# 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

```bash
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.json` file.
- **Project → Import…** loads a previously saved project.

Projects are stored as JSON with a `version` field, plus `nodes` and `edges` arrays.

## Tech

- [React Flow](https://reactflow.dev/) for the graph canvas
- [Nunjucks](https://mozilla.github.io/nunjucks/) for templating in configs
- PlantUML diagrams via [Kroki](https://kroki.io/) (proxied in dev)
- [Wireweave](https://github.com/wireweave/core) 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        |