ZUI
A node-based editor for configuration-driven content. Connect Config nodes (PlantUML, Markdown, or Wireframe) to Render nodes to see live output. Use Variable and Function nodes to feed data and custom logic into configs via Nunjucks templating.
Run the app
npm install
npm run dev
Open the URL shown in the terminal (e.g. http://localhost:5173).
Adding nodes
- Right-click on the canvas to open the context menu.
- Choose Create Node → Config, Render, Variable, or Function.
- Connect nodes by dragging from an output handle to an input handle.
Saving and loading
- Project → Export… saves the current graph as a
.zui.jsonfile. - Project → Import… loads a previously saved project.
Projects are stored as JSON with a version field, plus nodes and edges arrays.
Tech
- React Flow for the graph canvas
- Nunjucks for templating in configs
- PlantUML diagrams via Kroki (proxied in dev)
- Wireweave for wireframe UI → SVG
Scripts
| Command | Description |
|---|---|
npm run dev |
Start dev server |
npm run build |
Production build |
npm run preview |
Preview production build |
npm run test |
Run tests in watch mode |
npm run test:run |
Run tests once |