🛠 Widget editor

The editor is a split view: code on the left, live preview on the right. The header carries the widget name plus the Export and Save buttons.

🗂 Three tabs

• Code — the layout and its data contract.
• Functions — handlers for user interaction.
• States — conditional visibility rules.

💻 The Code tab

A small switch in the top-right corner of the editor toggles two views:

• JSX — the way you normally write. Components and props autocomplete, and a misspelled prop is underlined.
• JSON tree — the stored form. JSX is reprinted from this tree, so the two views never drift apart.

JSX is parsed ~300 ms after the last keystroke. On an error the footer shows Line 7: … and the preview keeps the last valid render.

📐 Bottom panel: schema and data

Under the code editor sits the data panel: Schema · Default · Example 1 · +.

• Schema — the data the widget expects, as JSON Schema. The switch on the right also renders it as Zod and d.ts (read-only).
• Default — sample data for the editor preview.
• + — stores the current payload as a named example; the ✕ on an example tab removes it.
• Infer from data builds the schema from the payload. Fill from schema builds an empty payload from the schema.

If the payload does not match the schema (missing required key, wrong type), a warning appears in the footer.

✨ Autocomplete

Typing {{ offers every path in the schema with its type: orders object[], orders.length, orders[0].status. Inside JSX the same binding is a plain expression: value={order.total}.

👀 Preview stage

The stage on the right shows the widget the way a visitor meets it. The switch at the bottom offers three modes:

• Widget — the bare widget.
• Chat bubble — a 380px chat window: header, two messages, the widget and a composer.
• Agent page — the same conversation at full page width.

The sun/moon button in the top-right switches only the stage to dark mode, so you can check the widget in both themes.

💾 Save, export, import

• Save creates the widget or updates the existing one. The button is disabled while any panel holds invalid JSON.
• Export downloads a .widget file.
• Import on the Widgets page opens that file as a new widget.

🌐 About the language

Editor labels such as Code, Schema and Default are intentionally kept in English — they are developer terms and appear the same way in the widget code.