Using the editor

The editor is a Tungsten component. Its settings, component lists and rules are ordinary Tungsten forms.

A short tour

1. Drag a field, group or repeater from the categorized core-derived palette into Form layout. Empty containers accept drops too.
2. Select a field in the canvas or outline to open its settings modal. Edit its label, key, defaults, validation and behavior. Close with Escape or the close button to return to the layout.
3. Use Apply changes. Core checks the candidate schema before the live preview updates.
4. Drag handles or outline entries to reorder or move components into groups and nested repeater templates. Drop between cards to choose the order. Palette clicks, component lists, arrows and Move selected here remain available.
5. Switch to Preview to try the form. The live form and its State/Values panels share the screen equally. Switch to JSON to edit or import the schema.
6. Download or copy JSON. It is a Tungsten schema with no editor-specific output format.

Import and drafts

Use JSON mode to paste a schema. Apply JSON asks core to load it. An invalid schema remains editable, and the preview continues showing the last accepted schema with a visible error. Undo/redo keeps up to 50 schema changes. Changes in a settings form are applied explicitly; switching components before applying discards those unsaved settings.

Renaming a component updates its descendants and matching rule/operand/initialSection references. Reordering and moving components preserves their configuration and rebases their keys and references. Moving between different collection boundaries can require repairing scoped references; core reports invalid drafts. Sectioned groups accept basic groups as sections. Switching a presentation discards inactive renderer settings from output. Default JSON accepts only the field’s scalar domain; arrays are used for repeater defaults.

Try existing values

In Preview, beneath the live form, open Load initial values. JSON is prefilled with canonical keys, defaults and nested repeater item keys. Unsupplied empty collections show one sample item; loading that sample creates an instance. Use [] for zero instances, or null for schema defaults. Edited JSON survives schema changes; Fill keys from schema adds missing keys while retaining your edited values. Reset restores the loaded starting values. A schema edit that makes loaded inputs incompatible resets preview inputs to defaults and reports the reset. Nothing is uploaded or saved automatically; download to keep your schema.

Embed it

import { TungstenEditor } from '@myoon/tungsten/react'

<TungstenEditor
  initialSchema={schema}
  initialValues={null}
  onChange={(acceptedSchema) => saveSchema(acceptedSchema)}
/>

Initialization props are read on mount. Remount to replace the complete editing session. The design prop controls the live form preview; the editor has its own authoring design. OnChange emits accepted schemas, while invalid drafts stay local. Catalog is optional and must match the host’s actual core registry and renderers.