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:
Diagram area – a workspace resembling an infinite whiteboard where users can create and modify diagrams.
A library with available elements (nodes) – a section where users can select elements to place on the diagram by drag and drop.
Properties side panel – a side window for editing and reviewing detailed properties of selected elements.
Last updated