Form Editor quickstart

The Form Editor lets you build a form visually. In this quickstart, you will start with a template, make a small change, preview the result, and export the form configuration.

No Angular or coding experience is required for this walkthrough.

The Form Editor saves forms in the current browser. Export important work before moving to another browser or device.

1. Open the Form Editor

Open the Formly Studio demo and select Form Editor. The editor opens with the workspace and its available forms.

If you do not have a form open, open Workspace in the sidebar and choose Create Form.

2. Choose a starting point

In the Create Form dialog:

1. Enter a name for the form.
2. Select Starter Form.
3. Select Create Form.

You can also choose Blank Form to build the structure yourself. For a blank form, select the UI Library you want to use before creating it. See UI Libraries to compare the available field types and properties. Templates provide fields and example values and select their configured UI library automatically.

3. Make a change

Select a field in the form canvas or in the Fields panel. Open Field Edit in the sidebar and change a visible property, such as its label or whether it is required.

The form updates as you edit it. The field count and form name are shown in the toolbar above the canvas.

4. Preview the result

Select Preview in the toolbar. Preview hides the editing focus so you can check how the form looks and behaves as a completed form.

Select Builder to return to editing. You can also use Open preview to view the form in a larger preview window.

5. Export the form

When the form is ready:

1. Select Export Form in the toolbar.
2. Review the generated JSON configuration.
3. Select Export Form in the dialog.

The downloaded file contains the form configuration produced by the editor. If you plan to use it in an Angular application, continue with use exported forms.

Keep the downloaded JSON if the form is important. It is the portable copy you can import into another browser or Formly Studio session.

Continue with Add and configure fields or learn how to save, import, and export your work.