Start a New Template

Click the "+" button or the large "Create Template" card to begin.

You'll be presented with the Create/Edit template workflow.

Create/Edit Workflow

There are multiple features that this workflow offers:

• Create from scratch - Start from blank
• Use AI Doc - Describe your template and let AI generate it
• Upload from mobile - Scan a physical document with your phone
• Upload existing - Upload a ZIP file (for JS framework templates or existing EJS/HTML templates)
• Editor - Edit templates with a no-code drag and drop editor
• Sample Data - Edit sample data that will fill your template

Here you can start by uploading a template. It must be a .zip folder that includes your template. This is a requirement for both EJS/HTML templates and JS Framework templates. Or, you can start talking with AI Doc and describe the template you want.

Use AI Doc (EJS/HTML Only)

The AI chatbot helps you create or modify templates using natural language.

How it works:

1. Describe what you want: "Create an invoice template with line items, totals, and a company logo section"
2. The chatbot generates the HTML/EJS code
3. Preview updates in real-time on the right side
4. Refine with follow-up requests: "Make the header blue and add tax calculation"
5. Continue iterating until satisfied

Example prompts:

• "Create a receipt template for a coffee shop"
• "Add a signature line at the bottom"
• "Change the table styling to have alternating row colors"
• "Add a watermark that says 'PAID' when status is paid"

Advanced Chatbot Features

Upload Images or Files

Upload reference documents to help the AI understand your desired template:

• Option 1: Click the Upload file from computer button in the chat interface\
• Option 2: Drag and drop files directly into the chat, or paste them in the chat
• Option 3: Click on Upload file from phone to upload from your mobile device:
  1. Scan the QR code with your phone's camera
  2. Open the link
  3. Take a picture of your document, select an image from your gallery or upload a file
  4. Click on "Send to AI Doc"
  5. The image will pop-up in your chat

AI Doc analyzes your document and:

• Extracts the layout and structure
• Identifies text fields and data placeholders
• Recreates the styling (fonts, colors, spacing)
• Generates clean EJS/HTML code

Supported file types:

• Images (PNG, JPG, PDF)
• Documents (PDF, Word, Excel)
• Existing templates for reference

Version History During Creation

The chatbot automatically saves each response as a version:

• Every AI response creates a new version
• Click "Revert" to go back to any previous response
• Compare different iterations side-by-side
• No changes are lost - all versions are preserved during creation

This lets you experiment freely and return to earlier versions if needed.

Select AI Models

Choose from different AI models for template generation. Switch models mid-conversation if one works better for your use case. Some model may require a different subscription plan.

Use the Visual Editor (EJS/HTML Only)

Switch to the "Editor" tab for a no-code visual editing experience. You can switch to the "Preview" tab at any time to preview how your document will look like, when it is filled with the data found in the "Data"

The visual editor provides:

Text Styling

• Font family, size, and color
• Bold, italic, underline
• Text alignment
• Line height and spacing

Layout Management

• Add/remove sections
• Adjust margins and padding
• Set widths and heights
• Position elements

Design Elements

• Background colors
• Borders and border radius
• Shadows and effects
• Box sizing

Images & Media

• Upload images
• Position and resize
• Add alt text
• Image styling

Tables

• Insert tables
• Style headers and cells
• Add/remove rows and columns
• Cell padding and borders

Dynamic Content

• Insert data placeholders
• Add conditional sections
• Loop through arrays
• Format numbers and dates

Edit Sample Data

Switch to the "Data" tab to define the sample data for your template.

The data editor lets you:

• Edit JSON directly with syntax highlighting
• Define the structure of data your template expects
• Test different data scenarios
• See live preview updates in the "Preview" tab as you change data

Example data structure:

{
  "my_company_info": {
    "logo": "https://image_link.png",
    "name": "Kodhen DOOEL Skopje",
    "address": "Mito Hadživasiliev Jasmin br.18",
    "city": "Skopje",
    "zip": "1000",
    "country": "North Macedonia"
  },
  "bill_to_company": {
    "name": "CODE CHEMISTRY INC.",
    "address": "Apt 14, 3670 Rue Saint-Hubert",
    "city": "Montreal, Quebec",
    "zip": "H2L0G5",
    "country": "Canada"
  },
  "invoice_info": {
    "number": "1101",
    "date": "02-03-2020",
    "due_payment": "02-03-2020",
    "due_amount": "1.00",
    "currency": "$",
    "currency_code": "USD"
  },
  "items": [
    {
      "name": "Development hours 1",
      "price": "1.00",
      "amount": "1.00",
      "quantity": 1
    }
  ]
}

Preview Your Template

Click the "Preview" tab to see how your template renders.

Save Your Template

Click "Save Template" to finalize and save to your library.

You'll need to provide:

Required Information

• Title - A descriptive name for your template
• Type - Select template type:
  • ejs - EJS templates
  • html - Plain HTML templates
  • react - JavaScript framework templates
  • latex, docx, xlsx, pptx (coming soon)

Optional Metadata

• Category - Tag your template (invoice, cv, receipt, certificate, etc.)
• Description - Detailed explanation of the template's purpose

After saving, you'll receive:

• A unique Template ID for API usage
• Access to edit or delete the template