How Tango’s Open‑Source Low‑Code Engine Redefines Front‑End Development with AST‑Based Visual Builder

Why Traditional Low‑Code Falls Short

Low‑code platforms rely on UI visual programming to hide code complexity, but real‑world business scenarios often involve intricate logic that cannot be easily expressed through UI actions, leading to limited efficiency compared to hand‑written code.

Problems with Private Schema Approaches

Conventional low‑code solutions use proprietary JSON schemas to describe UI, which quickly become bloated, lack extensibility, and fail to achieve Turing completeness. They restrict developers to built‑in components, hinder reuse of existing front‑end assets, and make debugging difficult.

Moving to a Public Protocol: ESTree

Adopting the ESTree specification—a community‑standard AST format for JavaScript—allows Tango to describe source code semantics without a private schema, enabling seamless code‑to‑schema and schema‑to‑code transformations using a rich ecosystem of tools.

Core Architecture of the Tango Engine

Tango parses source files into an AST, maps user drag‑and‑drop actions to AST traversals and modifications, then regenerates code for execution in a sandbox. Babel is used for parsing, traversing, and generating code.

AST (Abstract Syntax Tree) is a hierarchical representation of source code structure based on language grammar.

AST‑Based Development Workflow

The process includes lexical analysis (tokenizing source code) and syntactic analysis (building the AST). Tools like Babel facilitate converting code to AST, manipulating the tree, and generating updated code.

Example: Inserting a Section via AST

A demonstration modifies the AST to insert a new Section node into a Page component by traversing JSX elements, updating the children array, and regenerating the source code.

Data Change Flow in Tango

Upon engine initialization, source files are parsed to establish state. User interactions trigger browser events, causing state changes that update the AST. The updated AST is compiled back to code, sent to the rendering sandbox, which performs hot‑module replacement to refresh the UI.

Online Rendering Sandbox Design

Tango uses a customized version of Sandpack (from CodeSandbox) as an in‑browser bundler and executor, consisting of three parts: a low‑code sandbox component, an online bundler (a lightweight Webpack), and a Node‑based packaging service for pre‑building npm dependencies.

The sandbox sends source code and compile instructions via postMessage to the bundler, which loads dependencies, compiles, executes, and returns a success message.

Engine Composition

Engine core: manages files, node models, and I/O.

Drag‑and‑drop engine and visual panel: provides visual development capabilities.

Rendering sandbox: compiles and runs source code in the browser.

By integrating these components, Tango offers developers a source‑level customizable low‑code experience where visual edits modify the AST and source code synchronously.

Open‑Source Release Roadmap

The core engine, sandbox, configurator, application framework, and material protocol are already open‑sourced. A community RC is planned for late October, with a stable official release expected by Q4 2023, followed by further extensions such as React Native low‑code, backend orchestration, and full‑stack toolchains.