Design transformation scripts
without writing the glue code
TLio lets your team build, version, test and execute JSON transformation pipelines using a visual drag-and-drop canvas — backed by a full REST API for production use.
Debug
Step 2 / 3
Everything your team needs
From design to production, TLio covers the full script lifecycle.
Visual Canvas Designer
Drag-and-drop script nodes onto a ReactFlow canvas. Connect them with edges to define your transformation pipeline visually — no YAML, no guesswork.
Semantic Versioning
Every script follows a full lifecycle: Draft → Published → Archived. Publish creates an immutable semver bundle. Branch from any published version to start a new draft.
Command Catalog
Browse built-in commands (Map, Filter, Merge, Decision Table, Script Reference…) and configure them per-node via a schema-driven JSON editor with live validation.
Run & Debug
Execute scripts against real JSON input and step through each node's input and output side-by-side. Visual pass/fail overlays on the canvas show exactly where execution succeeded or failed.
Decision Tables
Model multi-condition logic as visual tables with drag-and-drop rows and columns. Configure execution strategy (first match / all matches) and conflict resolution without writing a single line of code.
Script References
Compose complex pipelines by referencing published scripts as nodes. Version selector lets you pin to an exact semver or always use the latest — with circular-reference detection at publish time.
How it works
Three steps from idea to production-ready script.
Design on the canvas
Drag commands from the sidebar. Connect nodes with edges. Configure each step through a schema-validated JSON panel or a purpose-built modal (Decision Table, Merge settings…).
Test & debug
Paste JSON input or select a saved test case and click Run. Step through each node's input/output with First / Prev / Next / Last navigation. Visual pass/fail overlays show you exactly what happened.
Publish & call via API
When ready, publish to create an immutable semver bundle. Reference it from other scripts or call the Execution API directly. Version selectors let callers pin to a specific version or always use latest.
Design system
Built with Tailwind CSS and shadcn/ui conventions. Every colour is a CSS custom property — switch light / dark from the dashboard toolbar.
Colour tokens
Typography
Display — Bold 36px
Heading — Semibold 24px
Body — Regular 16px. The quick brown fox jumps over the lazy dog.
Small / Muted — 14px
Mono — 12px · used in JSON panels and node labels
Components
Card
customer-onboarding
Maps raw intake fields to canonical customer schema
Ready to get started?
Sign in to your workspace and start designing transformation scripts today.
Sign in to TLio