Built-in widgets
Every built-in widget — slider, number, toggle, combo, color, text — on one node, in WebGL.
{
"version": "xenolith.v1",
"nodes": [
{
"id": "controls",
"type": "Controls",
"position": {
"x": 0,
"y": 0
},
"render": {
"title": "All widgets"
},
"state": {
"amount": 0.6,
"count": 8,
"enabled": true,
"mode": "Multiply",
"tint": "#FCB400",
"name": "node"
},
"pins": [
{
"id": "controls:out",
"kind": "data",
"direction": "out",
"type": "any",
"multiple": true,
"label": "Out"
}
],
"widgets": [
{
"id": "amount",
"type": "slider",
"key": "amount",
"label": "Amount",
"min": 0,
"max": 1,
"step": 0.01,
"freeFloating": true
},
{
"id": "count",
"type": "number",
"key": "count",
"label": "Count",
"min": 0,
"max": 100,
"step": 1,
"freeFloating": true
},
{
"id": "enabled",
"type": "toggle",
"key": "enabled",
"label": "Enabled",
"freeFloating": true
},
{
"id": "mode",
"type": "combo",
"key": "mode",
"label": "Mode",
"values": [
"Add",
"Subtract",
"Multiply"
],
"freeFloating": true
},
{
"id": "tint",
"type": "color",
"key": "tint",
"label": "Tint",
"freeFloating": true
},
{
"id": "name",
"type": "text",
"key": "name",
"label": "Name",
"freeFloating": true
}
]
}
],
"edges": []
} import { XenolithGraph } from '@xenolithengine/graph-react'
import { buildBuiltinWidgets } from '@xenolithengine/demo/builtin-widgets'
import { DemoStage } from '../Layout.js'
/** Every built-in widget type on one node — slider, number, toggle, combo, color, text — rendered in
* WebGL and editable inline. The node is just DATA (@xenolithengine/demo/builtin-widgets, builtin-widgets.json). */
export function BuiltinWidgetsDemo() {
return (
<DemoStage>
<XenolithGraph className="xeno" resizeToWindow={false} onReady={(editor) => buildBuiltinWidgets(editor)} />
</DemoStage>
)
} // Every built-in widget type on one node — slider, number, toggle, combo, color, text — rendered in
// WebGL and editable inline. No custom code: just a node with a `widgets` array, defined as DATA in
// builtin-widgets.json and loaded with editor.loadJSON.
import type { XenolithEditor } from '@xenolithengine/graph-editor'
import graph from './builtin-widgets.json'
export function buildBuiltinWidgets(editor: XenolithEditor): void {
editor.loadJSON(graph)
editor.fitView({ padding: 90, maxZoom: 1 })
}