Teckel Editor (teckel-ui)
Teckel Editor is a visual pipeline editor for Teckel. It provides a drag-and-drop canvas where you build data pipelines by connecting nodes, then exports valid Teckel YAML for execution by the Teckel Engine.
Key features
- Drag-and-drop canvas — Build pipelines visually with React Flow. Nodes represent inputs, outputs, and transformations; edges represent data flow.
- 49 node types — 1 input source, 1 output sink, and 47 transformation types covering column operations, filtering, aggregation, joins, reshaping, quality checks, and advanced operations.
- YAML round-trip — Bidirectional conversion between the visual graph and Teckel YAML (
version: "3.0"). Edit in the canvas or in the Monaco YAML editor; changes sync both ways. - Live validation — Two-tier validation: instant client-side checks (Zod schemas, cycle detection, AssetRef format) plus debounced server-side validation via gRPC.
- Job execution — Submit pipelines to the Teckel Engine, monitor job status (queued, running, completed, failed, cancelled), and cancel running jobs.
- Variables and secrets — Define pipeline variables (
${VAR_NAME}) and secrets ({{secrets.alias}}) that are passed to the server on validation and execution.
Tech stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| UI library | React 19 |
| Canvas | React Flow v12 (@xyflow/react) |
| State management | Zustand 5 (5 stores) |
| gRPC client | ConnectRPC (gRPC-Web) |
| YAML editor | Monaco Editor |
| Form validation | Zod + React Hook Form |
| UI primitives | Radix UI |
| Styling | Tailwind CSS 4 |
| Graph layout | Dagre |
Next steps
- Installation — Set up the development environment.
- Connecting to the backend — Configure the gRPC connection to teckel-api.
- Canvas editor — Learn the visual editor interface.