Modyra Studio

Author the model before choosing its final integration.

Studio is a local-first editor for Modyra projects. It works on the form model and contract, previews through @modyra/plain, and keeps generated targets separate from the authoring surface.

The Studio canvas

The Studio canvas with the checkout project: an outline of groups and fields on the left, the form model as nested cards in the centre with the ZIP code field selected, and the inspector on the right showing the field's name, label and its required and pattern validators
The checkout project open in Studio: the ZIP code field selected, its validators readable in the inspector. Captured from the app itself (npm run docs:studio-shot).

A model-first workflow

  1. AuthorAdd fields, groups, arrays, layout and validation rules.
  2. InspectReview diagnostics against the project model and contract.
  3. PreviewExercise supported fields with the framework-free renderer.
  4. ExportGenerate project data, contract data or target-specific source files.

What Studio owns

Project editing

Commands provide undo and redo while keeping IDs and derived paths consistent.

Contract diagnostics

Model and export diagnostics are shown before a project is handed to a renderer or target.

Local persistence

The current project is stored in the browser and can be exported or imported as JSON.

Target isolation

Generation runs outside the authoring state so a target failure does not mutate the project.

Current scope

Studio is in active development. The project format, supported palette, preview coverage and generated targets may change before 1.0. Export project data regularly when using it for ongoing work.