Technical overview

Installation As a frontend-only app implemented in React, Workflow Builder can be:

• Integrated seamlessly into an existing client project, or

• Self-hosted as a standalone application.

Built using Vite for lightning-fast development and optimized builds, the app is highly flexible. Upon delivery, clients receive the complete codebase and have full ownership, allowing them to modify, extend, or use.

Required / Used libraries

The following main libraries are used in Workflow Builders (all in their latest versions):

• @mui/base - Headless React components for building highly customizable UIs.

• JSONForms- Enables the creation of node and link properties by defining them in JSON Schema.

• React - The leading frontend library for building user interfaces.

• Zustand- A lightweight and intuitive state management library, natively supported by React Flow.

• xyflow (React Flow) - A powerful library for creating and managing interactive diagrams.

These libraries were chosen for their popularity, active community support, and robust documentation, ensuring easy maintenance and long-term reliability. There is no need for clients to purchase additional licenses, as all libraries are open-source or free to use.

Design Overview

View the application overview on Dribble.

Interface Layout

The interface is divided into three main sections:

1. Diagram area – a workspace resembling an infinite whiteboard where users can create and modify diagrams.

2. A library with available elements (nodes) – a section where users can select elements to place on the diagram by drag and drop.

3. Properties side panel – a side window for editing and reviewing detailed properties of selected elements.