Skip to main content

AI Template Generation

AI Template Generation allows you to create and edit PDF templates using prompts and reference files. Instead of writing HTML and CSS from scratch, describe your requirements, attach example files, and the AI will create your complete template – HTML code, sample data, and PDF parameters (format, orientation, headers/footers).

Creating Templates with AI​

To create a new template with AI:

1️⃣ Click "Create Template" in the Templates section of your Dashboard.

Templates section in Dashboard with Create Template button

2️⃣ Enter a Template Name and optional description.

3️⃣ Select "Generate with AI" as your creation method.

Create Template modal with Generate with AI option selected

4️⃣ Enter a detailed description of the template you want to create. You can also attach reference files to give the AI more context.

AI prompt input with file attachments

5️⃣ Click "Generate with AI" and let the AI create your template (usually takes around 1 minute, complex templates may take longer).

6️⃣ Preview the generated template in the Quick HTML Preview and refine in the Designer as needed.

7️⃣ Generate a Real PDF Preview to check how your template looks in the final output.

Template Designer with PDF preview

Effective Prompts​

Here is an example of an effective prompt for an invoice:

Create a professional invoice template. Header: company logo on the left, company details (name, address, phone, email, website) on the right. Below the header, a full-width row with invoice number, issue date, and due date. Two address blocks side by side: 'Bill From' and 'Bill To' – each with name, company, address, city, postal code, and country. Main section: itemized table with columns for description, quantity, unit price, and line total. Below the table: subtotal, discount (percentage and amount), tax (rate and amount), and total highlighted. At the bottom: payment terms, QR code for payment, and a short thank you message. Footer with page numbers. Clean modern styling with blue accent color.


Writing Effective Prompts

The more specific your description, the better the results. Include details about:

  • Layout structure – describe sections, columns, and how elements should be positioned.
  • Data fields – specify what information to display and where (names, dates, addresses, line items, totals).
  • Visual elements – mention if you need images, logos, charts, QR codes, or barcodes.
  • Styling – indicate color scheme, font preferences, borders, or reference a style (e.g., "modern", "minimalist", "formal").
  • Page format – specify size (A4, Letter, A6), orientation (portrait, landscape), and header/footer requirements.

Prompt limit: 10,000 characters – plenty of room to be detailed.

Attach Reference Files​

You can attach reference files to give the AI more details about your template:

File attachment area with drag and drop

Supported file types:

  • Documents: PDF
  • Images: PNG, JPG, JPEG, SVG (including pasted screenshots)
  • Text & Code: HTML, CSS, JavaScript, JSON, TXT

How to attach files:

  1. Drag and drop files into the attachment area.
  2. Click to browse and select files.
  3. Paste from clipboard (Ctrl+V / Cmd+V).

File limits:

PlanMax Total SizeMax Files
Free1 MB5
Paid5 MB5

Example use cases:

  • Attach a PDF of an existing document you want to recreate.
  • Include a logo to help the AI match the template style to your branding.
  • Share a screenshot of a design you'd like to replicate.
  • Provide sample HTML/CSS for reference.

Generated Output​

When the AI creates your template, you receive:

ComponentDescription
HTML TemplateComplete HTML/CSS code with Handlebars variables.
Sample DataJSON data structure matching your template variables.
PDF ParametersFormat, orientation, header/footer.

AI-generated templates are fully editable. You can fine-tune them manually in the Designer or use AI Assist to refine specific sections.

Editing Templates with AI​

You can use the AI to modify existing templates – whether they were AI-generated, created from scratch, or selected from the gallery.

1️⃣ In the Template Designer, click the AI Assist button in the code editor toolbar.

AI Assist button

2️⃣ Describe the changes you want to make in the prompt field. You can also attach reference files (images, PDFs, code) to provide additional context.

3️⃣ Click "Prepare Changes" and wait for the AI to modify your template.

AI Assist edit prompt modal

4️⃣ Review the AI-generated changes in the Review Modal and choose to "Accept" or "Reject" them.

Example Edit Instructions​

Adding elements:

  • Add a discount field to the invoice.
  • Add a QR code in the top right corner.
  • Include a notes/comments section after the items table.

Styling changes:

  • Change the color scheme to blue and white.
  • Make the table headers bold and add alternating row colors.
  • Increase font size and add more spacing between sections.

Layout modifications:

  • Move the logo to the center and make it larger.
  • Add a sidebar with contact information.
  • Split the address section into two columns.

You can make multiple edits in sequence, refining your template step by step until it matches your exact requirements.

Review AI Changes​

After the AI processes your request, you'll see the Review AI Changes modal where you can examine and approve the changes before applying them.

Code View​

Compare changes across three tabs:

  • Template – Side-by-side diff of HTML/CSS and Handlebars code showing additions, removals, and modifications.
  • Data – Changes to sample JSON data.
  • Parameters – PDF parameter changes (format, orientation, header/footer).
Review AI Changes modal with code diff view

PDF Preview​

Switch to the PDF Preview tab to see before (1) and after (2) renderings side by side, helping you verify the visual result matches your expectations.

Review AI Changes modal with PDF preview comparison

Accept or Reject​

After reviewing the changes:

  • Click "Accept" to apply the AI-generated changes to your template.
  • Click "Reject" to discard changes and return to try a different prompt.

How AI Template Generation Works​

AI Template Generation uses advanced language models to understand your requirements and generate complete, functional templates. When you submit a prompt, you'll see a progress indicator with these steps:

  1. Analyzing your request – AI reads and understands your requirements.

  2. Designing layout structure – AI plans sections, columns, and positioning.

  3. Creating HTML template – AI generates HTML/CSS code with Handlebars variables.

  4. Generating sample data – AI creates JSON data matching your template.

  5. Finalizing your template – AI completes and validates the output.

AI Template Generation Steps
Generation Time

Generation usually takes around a minute, depending on the complexity of your prompt, attached files, output size, and amount of sample data.

AI Generation Limits​

Each subscription plan includes a quota of AI template generations:

PlanAI Generations
Free1
Basic10 / month
Growth50 / month
Enterprise150 / month
  • Each AI operation (create or edit) uses 1 generation from your quota.
  • Paid plan generations reset monthly with your billing cycle.
  • You can view your remaining generations in the dashboard navbar.
Free Plan Note

Free plan users need to add a payment method to access AI features. Don't worry – no charges will be made, it's just for verification purposes.