Skip to main content

Design Tab

The Design Tab is the central workspace within Design Mode where users visually create and structure their forms using an intuitive drag-and-drop interface. It allows you to build complex forms quickly without writing any code.

The Design Tab provides an interactive canvas where you can easily add, arrange, and customize form components.

This visual approach makes it simple to create structured, user-friendly forms for any use case — from simple registration forms to advanced data collection interfaces.

Adding Components​

You can add components to your form using a drag-and-drop system:

  1. On the left sidebar, you’ll see a list of available components (Text Field, Email, Dropdown, Checkbox, etc.).
  2. Click and drag the desired component onto the form canvas.
  3. Drop it into the section where you want it to appear.

drag and drop

Once a component is dropped:

  • It is instantly added to the form preview area.
  • You can click on the top right above the component to open its component settings panel for configuration (label, placeholder, validations, visibility conditions, etc.).
  • The component is automatically included in the internal JSON schema, which updates in real time.

What Happens After Adding a Component​

When a component is added to the form:

  • The system dynamically updates the form JSON structure with the new field definition.
  • The UI refreshes to show the new field in the live preview area.
  • Field properties such as type, key, label, and validation rules become editable.
  • Any changes made in the settings are instantly reflected in both the preview and the underlying schema.

This ensures that the visual layout and data configuration always remain in sync.

Usage Example​

Example workflow for adding a Text Field component:

  1. Drag the Text Field component from the sidebar.
  2. Drop it inside your form layout.
  3. Once the field is dropped, the component settings panel opens automatically to modify options like label and placeholder. If not, click the settings icon on the top right of the component to open its settings.
  4. Modify properties such as:
    • Label: Full Name
    • Placeholder: Enter your full name
    • Required: Yes
  5. Save or preview the form — the new field now appears in the form structure and JSON schema.

draganddrop​

Inline Component Settings​

When a component is added and saved in the builder,inline settings become available when you hover over the field. These settings appear at the top right above the component and are universal, meaning they are available for every component added to the builder, rather than being specific to any single component.

inline

Edit​

Opens the settings window for the component.

Move​

Reposition the component on the form by clicking and holding the Move icon

Edit JSON​

You can directly edit a component’s settings by modifying the JSON. As you configure options in the component settings UI, the JSON Schema updates automatically. To view all possible settings—including those not currently configured for the component—enable the Full Schema option, which displays the complete schema configuration.

Copy​

Copies the component JSON. When the Copy button is selected the Paste button will appear within the Inline Component Settings.

Paste​

Pastes the component that was previously copied. The new component will be added directly below the component where the Paste button was clicked.

Delete​

Deletes the component from the form. If a component is removed unintentionally, refresh the form to its previous state by navigating away from the form and selecting No for the Save prompt, or reloading the browser directly.

Import and Export​

It also supports Import and Export of JSON form schemas.

Import JSON Schema​

You can import an existing Form JSON schema to quickly load a pre-built design.

  • Click on the Import button at topbar.
  • Upload your JSON file.
  • The system will instantly render the form layout from that schema.

Export JSON Schema​

Once your form design is ready, you can export it as a JSON file for backup, reuse, or sharing with your team.

  • Click the Export button.
  • The full form structure (including components, settings, and logic) will be saved as a downloadable JSON file.