@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 the Jx UI kit: interface elements authored as Jx documents and interpreted by the runtime, so the chrome is edited on the same canvas as the sites it builds.

At the site level, Studio acts as a CMS. It provides 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