SpectreSkills
← All skills

form-preview

v1.0.0

Show the in-progress form in a preview panel using the same renderer the published page uses, including unsaved edits, conditional visibility, and multi-step navigation. Trigger when adding or changing the builder's preview.

Formsformspreviewweb-components
Install
npx @spectre-apps/skills add form-preview

Writes .claude/skills/form-preview/SKILL.md. Add --user to install globally.

What it does

Form preview

The preview panel mounts the same renderer as the published embed (see form-web-component). Authors then see widths, conditional visibility, step navigation, and the success state exactly as a respondent will. A second form component that "looks like" the embed will drift the first time either side changes.

What the panel is fed

The panel reads the in-memory FormDefinition, including unsaved edits. Two ways to get that into the shared renderer:

  • Pass the document in as data, and have the renderer draw it without a fetch.
  • Mount the custom element and point its API base at a draft endpoint that returns this form, unsaved edits included.

Use the draft path only from the builder. The public endpoint serves LIVE forms. A query flag such as preview=1 on the builder's own origin is enough; leave it off any URL a respondent can open.

When the form has more than one locale, the panel has a locale switch that reloads that locale's document into the same element.

What the respondent can do in preview

  • Fill fields. Conditional rules run against those values, with the same operators as production.
  • Move between steps. The stepper shows the step title, previous and next, and the submit button on the last step only. Jumping via the step indicator is fine in preview.
  • Submit. The preview posts nowhere that notifies a person or a connector. Either the renderer stops before the network call and shows successMessage, or it posts to a preview endpoint that stores nothing and dispatches nothing.

File fields may show the picker and a local thumbnail. They skip the presigned upload.

Layout

The panel sits in the canvas area, toggled from the header (Edit / Preview), full width of that column. Keep the palette and inspector available so the author can change a field and see it without leaving preview — the element re-renders from the latest document.

Viewport width is a control on the panel (desktop / mobile widths), because row packing is the thing authors get wrong. It changes the container width only.

Style

Theme (colors, radius, type, custom CSS) is data on the form, applied by the shared renderer in both places. The preview hosts that stylesheet. Editing it updates the preview immediately and the published form on save.

Pair with form-builder-canvas for the document under edit and form-web-component for the element this panel mounts.