Template Editor

The template editor is a visual drag-and-drop tool for designing document templates. It's built on GrapesJS and allows you to create professional document layouts without writing any code.

Opening the editor

1. Navigate to Blueprints.
2. Create a new blueprint and select Design with Editor, or edit an existing design-based blueprint.
3. The visual editor opens with a canvas and toolbar.

Editor features

Layout components

• Text blocks — add headings, paragraphs, and formatted text.
• Images — insert logos, images, or decorative elements.
• Tables — create structured data layouts.
• Columns — arrange content in multi-column layouts.
• Dividers — add horizontal rules and spacing.

Styling

• Fonts — choose from available typefaces.
• Colours — set text, background, and border colours.
• Spacing — control margins and padding.
• Alignment — align content left, centre, right, or justified.

Signing fields

After designing your layout, you can place signing fields:

• Position signature, initials, date, and text fields on the template.
• Set field properties (required, label, size).
• Assign fields to signatory positions.

Working with the editor

Drag and drop

1. Select a component from the toolbar.
2. Drag it onto the canvas.
3. Drop it where you want it to appear.
4. Resize and reposition as needed.

Editing content

• Double-click on a text block to edit its content.
• Use the formatting toolbar for bold, italic, lists, and other formatting.

Layers and selection

• Use the layers panel to see all components in your design.
• Click on a component in the layers panel to select it.
• Reorder components by dragging them in the layers panel.

Saving and using

1. Once your design is complete, click Save.
2. The template is stored as a blueprint.
3. You can now create documents from this blueprint.

tip

Preview your design before saving to make sure it looks correct at print size. The editor shows an approximation — the final PDF may have slight layout differences.