Previewing a Form

How to Enter Preview Mode

Click the Preview button in the designer toolbar. The canvas switches from design mode to preview mode. The control palette and properties panel disappear, replaced by the full-width form experience.

Click Back to Designer to return to design mode. Your draft is preserved.

Mode Switcher in Preview

While in preview, a mode selector in the toolbar lets you switch between:

• Edit Preview — Renders with mode="edit". Controls are interactive. Test validation by submitting with missing required fields.
• View Preview — Renders with mode="view". All controls are read-only. Tests your modeVisibilitySettings for view mode.
• Admin Preview — Renders with mode="admin". Shows admin-only fields. Useful for checking that admin controls are correctly restricted.

Sample Data in Preview

You can inject sample data into the preview to test data-bound controls. Click Load Sample Data to open the sample data editor — a JSON editor where you paste the initial values object:

{
  "company": {
    "name": "Acme Corp",
    "email": "admin@acme.com",
    "phone": "+1-555-0100"
  },
  "contactPerson": {
    "firstName": "Jane",
    "lastName": "Smith"
  }
}

The form renders with these values pre-populated. This tests your binding paths and confirms that the correct fields receive the correct data.

Testing Validation

In Edit Preview mode:

1. Leave required fields empty and click Submit
2. Confirm that required error messages appear below each unfilled required field
3. Confirm the submit button is blocked
4. Fill in values that violate validation rules (too short, wrong format)
5. Verify the correct error messages appear
6. Fill all fields correctly and confirm the form submits (preview shows a success confirmation)

Testing Visibility Rules

If your form has conditional visibility rules, preview mode is where you test them:

• Change a field's value to trigger the condition
• Confirm the dependent field appears or disappears correctly
• Check both branches of every condition

Responsive Preview

The preview toolbar includes a device frame selector:

• Desktop — Full width (default)
• Tablet — 768px width simulation
• Mobile — 375px width simulation

Use this to confirm that your grid layouts and column widths respond correctly on smaller screens. Atlas Forms uses a 12-column responsive grid that automatically stacks columns on mobile viewports.