Preview and Edit

Edit is where you change the layout. Preview is where you fill fields, run validation, and click buttons. You cannot drag components in Preview. The canvas is the center of the screen. The header above it has Preview, undo, and the menu.

Canvas

Event registration form on the center canvas.Event registration form on the center canvas.
  • Click components to select them.
  • Drag from the Components tab to add new fields.
  • Scroll for long forms, or use the Tree tab if selections are difficult.

Header toolbar

Central header toolbar with numbered controls: menu, undo/redo, component library, preview, device icons, and language.Central header toolbar with numbered controls: menu, undo/redo, component library, preview, device icons, and language.
#ControlPurpose
1Menu (hamburger)Add a new form, Download, Upload, Translation, Save, Save as…, export/import, Clear, version
2Undo / RedoReverse recent layout edits
3Component librarySwitch UI kit (for example Material UI, RSuite UI). Demo only.
4PreviewTest the form. Becomes Edit in Preview mode
5Device iconsApproximate phone/tablet/desktop width
6Language (for example EN)Switch localized form content in Edit and Preview

The two language controls are separate. The header picker switches the form’s localized labels and other content in Edit and Preview. Menu → Translation changes the language of Designer’s menus, panels, and other interface text.

Edit vs Preview

EditPreview
Authoring panels stay open (library, tree, properties)The form runs like an end-user screen
You can drag components and use undo/redoAuthoring chrome is reduced or hidden
Selection outlines show what you are editingYou focus on values, errors, and button behavior

Preview your layout

  1. Click Preview in the header.
  2. Interact with fields as a user would.
  3. Open Data on the left to inspect values. Click Validate to run validation.
  4. Click Edit to return to layout mode.
Preview button in the top bar.Preview button in the top bar.

Run Preview before you hand the form off. Going live is still a separate step in your app. See Save and share.

Check the result

  • In Preview, side authoring panels give way to testing tools on the left (Data and Validate).
  • In Edit, the component library returns.

Summary

Use the canvas to lay out the form. Use Preview to try it. Edit brings the library back.

See also