> For the complete documentation index, see [llms.txt](https://synergy-codes.gitbook.io/workflow-builder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://synergy-codes.gitbook.io/workflow-builder/overview/technical-overview.md).

# 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](https://dribbble.com/shots/25501214-Workflow-Builder-App-for-automatizations). 

**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.