Xuda Developer Studio
In Xuda, the route tree is the menu tree. The studio renders it as the sidebar; the runtime renders it
as the URL router. A route node has a name, a target program, optional
params, and any number of children. There is no separate router config and no
separate menu config. Edit the tree, both surfaces update.
project.routes.TREE_NODES.routes.Routes are stored as a hierarchical array. Each node carries the metadata the menu needs (label, icon, colors) plus the metadata the router needs (target program, params). Children inherit the parent path segment, so you build URLs by nesting.
{
_id: 'routes',
TREE_NODES: {
routes: [
{
id: 'r_home',
name: 'Home',
path: '/',
program: 'prog_home',
icon: 'home',
bgColor: '#0f172a',
bgTextColor: '#f8fafc',
params: {},
children: []
},
{
id: 'r_users',
name: 'Users',
path: '/users',
program: 'prog_users',
params: {},
children: [
{
id: 'r_user_detail',
name: 'User detail',
path: '/users/:id',
program: 'prog_user_detail',
params: { id: { type: 'string', required: true } },
children: []
}
]
}
]
}
}
route object.
A route node declares its params in the params object. Path segments prefixed with a colon
(like :id) get matched and exposed under the global route object. Programs
read them just like any other reactive value: @route.params.id for path params,
@route.query.tab for query string keys.
Declared with a colon in path. Required by definition (the URL would not match without
it). Use for resource IDs and stable identifiers.
path: '/invoices/:invoiceId'
read: @route.params.invoiceId
link: xu-on:click='[{"workflow":[
{"data":{"action":"navigate",
"name":{"value":"/invoices/INV-77"}}}
]}]'
Not declared in the path. Anything after ? is parsed and exposed under
@route.query. Use for filters, tabs, sort orders, anything optional.
url: '/invoices?status=open&sort=-date' read: @route.query.status read: @route.query.sort link: <a href="/invoices?status=open">Open</a>
Each route node carries display metadata: name (label), icon,
bgColor, bgTextColor, an optional order, and a
visibleWhen expression. The framework plugin turns the tree into a sidebar, top tabs, or a
drawer depending on the chosen layout. Nothing about your route structure changes when you switch chrome.
An expression evaluated against globals and the current route. Hide a menu item until the user is signed in: visibleWhen: '@currentUser.id'.
Numeric weight. Lower numbers come first. Sibling nodes without order sort by their array position.
The slug of an icon from any installed graphics plugin. The framework plugin renders it with the chosen pack.
Per-node color overrides. Useful for highlighting active tenants, environments, or status badges in the menu.
Tells the framework plugin whether this node is a leaf, a folder, a divider, or a header. Folders show their children expandable; leaves are clickable.
Optional auth rule. The router redirects to a login route when the rule fails, even if the user types the URL directly.
The Routes panel in the studio renders the same tree the runtime will render. Drag a node to reparent it. Click a node to edit its label, target program, params, icon, and colors. The right side shows a live preview that mounts the runtime against your in-progress draft, so URL changes hot-reload.