@jxsuite/studio

Visual builder for Jx documents.

Overview

Jx Studio is a browser-based visual IDE for Jx applications. It renders a live canvas via @jxsuite/runtime, provides a layer tree for structural editing, an inspector for property/style/state management, and a Monaco-powered code editor for function bodies. The UI is built with Adobe Spectrum Web Components.

At the site level, Studio acts as a CMS — providing a project explorer, content collection browser, schema-driven entry editors, and media management.

Development usage

Studio is served by @jxsuite/server during development:

bun run dev   # starts dev server + Studio at http://localhost:3000

Architecture

Three-column layout:

| Column | Content | | ------ | ------------------------------------------------------- | | Left | Activity bar + panel (layers, files, content, settings) | | Center | Canvas (live preview) + toolbar | | Right | Inspector (properties, style, state, code) |

Data flow

.json file → Studio state (immutable) → Canvas (runtime render)
                    ↓
            Inspector panels → mutation → new state → write .json

State model

Immutable state tree with 100-entry undo/redo history. All mutations produce a new state object. Key operations:

| Operation | Description | | ------------------------------------- | ----------------------------------- | | selectNode(path) | Select element by path | | insertNode(path, def) | Add child element | | removeNode(path) | Delete element | | moveNode(from, to) | Reorder or reparent | | updateProperty(path, key, value) | Set element property | | updateStyle(path, prop, value) | Set style property | | updateDef(key, value) | Update state entry | | pushDocument(doc) / popDocument() | Navigate into/out of sub-components | | undo() / redo() | History navigation |

Platform Abstraction Layer (PAL)

Studio is backend-agnostic. Platform bindings (filesystem access, native dialogs, Git, package management) are injected at startup via registerPlatform(). Three targets share a single codebase:

| Target | Backend | | -------------------- | ------------------------------ | | Desktop (Electrobun) | @jxsuite/desktop Bun process | | Dev mode (Chrome) | @jxsuite/server (localhost) | | SaaS | Cloud API (future) |

API

import { createStudio } from "@jxsuite/studio";
import { registerPlatform } from "@jxsuite/studio/platform.js";

registerPlatform(myPlatform);
createStudio(document.getElementById("root"));

Design principles

1. JSON is the source of truth — Studio reads and writes .json files directly.
2. Canvas is the runtime — Preview renders via @jxsuite/runtime, pixel-identical to production.
3. Zero lock-in — Studio edits produce standard Jx files that any editor can open.
4. Self-hosting — Studio is itself a Jx application.

License

MIT