1. Globals
App-wide reactive state. Defined as a special program with menuType: 'globals'. Read by every program. Useful for the current user, theme, locale, feature flags.
Xuda Developer Studio
Build apps without writing the boring half.
One studio, one runtime, seven primitives
Xuda Studio is a visual editor for the Xuda runtime. Same data shape, edit anywhere, ship anywhere.
Xuda apps are not generated code. They are data: a single project document made up of
globals, routes, tables, programs, and a tree of UI nodes. Xuda Studio is a code-less visual editor
that writes that document directly. The Xuda runtime (full or slim) reads it and renders
the live application.
Once you understand the seven primitives on this page, you understand every screen the studio ever shows
and every behavior the runtime ever produces.
Mental model
A Xuda app is one JSON document. Everything you do in the studio is a field on that document.
Open a project in the studio and you are looking at a single object with five top-level keys:
globals, routes, tables, programs, and metadata.
The studio panels, the live preview, and the deployed runtime all read from the same shape. There is no
separate “build” step that converts your design into something else. The runtime is
the design.
Project shape (simplified)
{
globals: { _id: 'globals', progFields: [ /* app-wide fields */ ] },
routes: { _id: 'routes', TREE_NODES: { routes: [ /* menu tree */ ] } },
tables: {
'tbl_users': { _id, properties, tableFields, tableIndexes },
'tbl_invoices': { _id, properties, tableFields, tableIndexes }
},
programs: {
'prog_home': { _id, properties, progFields, progDataSource, progEvents, progUi },
'prog_login': { _id, properties, progFields, progDataSource, progEvents, progUi }
}
}
The seven things
Every screen in the studio edits one of these. Every runtime feature consumes one of these.
The rest of this site is one chapter per primitive. Skim the cards below to choose where to land first. The recommended path for a new developer is Programs, then Tree & UI, then Tables, then Routes, Globals, and finally AI Agents.
2. Routes
The URL surface and the navigation menu. A route binds a path (with params) to a program. The studio renders the same tree as both the menu and the router.
3. Tables
Typed records with fields and indexes. Backed by any dbs plugin (Xuda native, CouchDB, MySQL, custom). Live subscriptions for the native backend.
4. Programs
The unit of UI. Owns a progUi tree, progFields for state, progEvents for behavior, and an optional progDataSource binding.
5. AI Agents
Configurable assistants that read the project and produce tables, programs, alerts, and folders. Backed by the AI app builder library plugin.
6. Tree & UI
How progUi JSON becomes live DOM. The directive surface: xu-store, xu-content, xu-exp:*, xu-for, xu-click, xu-bind, and friends.
Studio vs. runtime
Two surfaces, one source of truth.
Xuda ships a code-less studio for authoring and a small runtime for execution. The studio writes to the same project document the runtime reads. There is no IR, no transpilation, no codegen. A change in the studio panel is a change in the JSON, and the live preview re-renders from that JSON without rebuilding.
The visual editor.
A code-less authoring environment. You drag, drop, and configure: panels for each top-level concept (Globals, Routes, Tables, Programs, AI Agents, Plugins, Settings) read and write the project document directly. No language to learn, no build step. A live preview mounts the runtime against the in-progress draft so changes are visible as you make them.
Tree editor for the UI
Schema editor for tables
Workflow editor for events
Property panel that mirrors the data shape 1:1
The renderer.
Two flavors. The full runtime ships under runtime/js/ and powers
production deployments, push notifications, jobs, and the message broker chain. Xuda
Slim (@xuda.io/xuda-runtime-slim-es) is a single ES module suitable for static
sites, embeds, and docs (it is what mounts this very page).
Reads the project document directly
Renders
progUi into DOMResolves
xu-* directives reactivelyLoads plugins lazily by category
A two-second demo
This page is itself a Xuda program. The button below mutates a store; the runtime re-renders.
The card on the right has an xu-store. The button issues an xu-click update.
The label uses xu-exp:xu-content to read it back. No build step, no framework, no JSX.
Just a directive surface against a JSON tree.
Store value
EDIT
Studio mode is active.
What you just used
xu-store declared a scoped state object. xu-click issued an update.
xu-exp:xu-content bound a derived expression to the DOM. The same three primitives drive
every interactive screen the studio produces.