Drag-and-drop node creation with automatic "Start" node identification.
Define conditional logic by connecting nodes with edges.
Real-time JSON schema generation and export.
Built-in validation for unreachable nodes and missing fields.
A lightweight, single-page visual tool for constructing logic flows and state machines. Built with React and TypeScript, it allows users to design complex sequences of steps (nodes) and conditional transitions (edges) through an intuitive drag-and-drop interface.
The core objective of this project is to provide a user-friendly environment for building structured JSON schemas for automated systems like chatbot workflows, Zapier-like automation, or custom business logic. It bridges the gap between visual design and machine-readable configuration.
- Interactive Canvas: Drag-and-drop node creation, deletion (excluding Start node), and movement with automatic "Start" node identification.
- Smart Transitions: Connect nodes by drawing edges and defining conditional logic for each path.
- Real-time Properties Sidebar: Edit node IDs, descriptions, and manage outgoing edges with immediate feedback.
- Live JSON Schema: View and validate the generated schema as you build, ensuring uniqueness and reachability.
- Import/Export Capabilities: Download your flow as a JSON file or import existing configurations with automatic layout reconstruction.
- Robust Validation: Visual warnings and errors for disconnected nodes, duplicate IDs, and missing requirements.
- Prerequisite: Node.js Ensure you have Node.js (v18.0.0 or higher) installed on your system.
- Prerequisite: npm
npm is typically bundled with Node.js. Verify with
npm -v. - Clone repo
git clone <repository-url> cd bolna
- Install dependencies
npm install
- Configuration No additional configuration is required. The project uses Vite for optimized development.
- Run application
The application will be accessible at
npm run dev
http://localhost:5173.