Forms Editor

Form builder product published as on-codemerge/forms. Thin app entry uses a shell ViewPort and FormBuilderPlugin({ surface: 'workspace' }), which mounts the shared form studio (palette / canvas / inspector) into contentTarget. Interchange via getText / setText (pretty FormConfig JSON).

Live preview (rendered form):

FormConfig JSON (getText()):

Install

bash

npm install --save on-codemerge

import { Editor, createDefaultPlugins } from 'on-codemerge/forms';

const host = document.getElementById('forms-editor')!;
const editor = new Editor(host, {
  chrome: 'bar',
  plugins: createDefaultPlugins(), // FormBuilderPlugin({ surface: 'workspace' })
});

editor.on('docChanged', () => {
  console.log(editor.getText());
});

editor.setText('{"id":"f1","method":"POST","action":"","fields":[]}');
editor.destroy();

createView defaults to createShellView. Local SPA: pnpm dev:forms.

Same plugin in WYSIWYG

import { Editor, createDefaultPlugins, FormBuilderPlugin } from 'on-codemerge';

new Editor(host, {
  plugins: [
    ...createDefaultPlugins(), // includes FormBuilderPlugin({ surface: 'atom' })
  ],
});

surface: 'atom' opens the same mountFormWorkspace UI in an lg popup (Save/Cancel). Schema is the SoT — edit loads from attrs.schema, not DOM scrape. Hotkey Mod-Alt-f opens the studio. See Form Builder Plugin and Editors.

Types

Published types for on-codemerge/forms expect TypeScript moduleResolution: "bundler" (or skipLibCheck: true).

Document API

Method	Role
`getText()`	Pretty `FormConfig` JSON
`setText(text)`	Replace SoT; returns `ParseError \| null` (SoT unchanged on error)
`getJSON()` / `setJSON(doc)`	Kernel document snapshot (`doc → form`)
`run` / `command` / `use`	Same as WYSIWYG
`on('docChanged', …)`	Subscriptions
`destroy()`	Tear down

Document shape

SoT is doc → single form child. Field list and HTTP settings live in attrs.schema (FormConfig).

createDefaultPlugins() ships Clear / wide·narrow preview (defaultFormToolbar()). Templates, field palette, and method live in the studio. Customize via toolbar / createDefaultPlugins({ toolbar }).

Local demo

bash

pnpm dev:forms    # apps/forms SPA
pnpm build:forms  # → dist-forms/

Forms Editor ​

Install ​

Same plugin in WYSIWYG ​

Types ​

Document API ​

Document shape ​

Toolbar ​

Local demo ​

See also ​