DocMiral – Blog

  • How to Create Templates in DocMiral: A Complete Guide

    Creating professional document templates in DocMiral is straightforward and powerful. Whether you’re building invoices, reports, certificates, or any other document type, this guide will walk you through the entire process.

    Getting Started

    To create a new template, navigate to your profile dashboard or templates list and click the Create New Template button. You’ll be taken to the template creation page where you’ll start by filling in the basic information:

    • Category – Organize your templates by type
    • Name – Give your template a descriptive name
    • Page Size – Choose from standard sizes (A4, Letter, etc.)
    • Orientation – Portrait or landscape

    Designing Your Template

    After setting up the basic info, you’ll enter the DocMiral Template Studio where the real magic happens. The studio provides a live coding environment where you can write HTML and Tailwind CSS while seeing an exact preview of how your document will look.

    Understanding Page Structures

    DocMiral supports two types of page structures to handle different content scenarios:

    1. Fixed Pages

    Perfect for content with a predictable length, such as cover pages, pitch slides, or forms. Fixed pages are exactly one page long.

    <div class="page">
  <!-- Your content here -->
</div>

    Best for: Cover pages, certificates, business cards, single-page forms

    2. Flexible Pages

    Ideal when you can’t predict the content length. Flexible pages automatically create additional pages when content overflows.

    <div class="flexpage">
  <!-- Your dynamic content here -->
</div>

    Best for: Invoices, reports, product lists, any multi-page documents

    Customizing Page Settings

    Fine-tune your template’s appearance with comprehensive page settings:

    • Page size and orientation
    • Margins and padding
    • Base font size
    • Default text color
    • Background color
    • And more…

    These settings ensure your documents look professional and consistent every time.

    Managing Images

    DocMiral includes a built-in Image Manager that hosts images directly for your templates. No need to worry about external hosting or broken links.

    To use images:

    1. Upload your images through the studio interface
    2. Click on any uploaded image to copy its URL
    3. Use the URL directly in your template’s HTML

    This feature makes it easy to include logos, icons, photos, and other visual elements in your templates.

    Adding Dynamic Variables

    The real power of DocMiral templates comes from variables. By defining which fields can be populated dynamically, you create reusable templates that can generate unlimited unique documents through the API, internal UI, or Tars AI.

    DocMiral uses Jinja2 templating syntax – a widely-adopted, easy-to-learn templating language.

    Variable Types

    Single Fields

    For simple text or numbers:

    <h1>Welcome, {{ name }}!</h1>
<p>Total: ${{ amount }}</p>

    Dictionaries (Objects)

    For structured data:

    <p>{{ personal.name }}</p>
<p>{{ personal.email }}</p>
<p>{{ company.address }}</p>

    Lists (Arrays)

    For repeating content using loops:

    {% for item in items %}
  <div class="p-2">
    <p class="font-bold">{{ item.name }}</p>
    <p>Quantity: {{ item.qty }}</p>
    <p>Price: ${{ item.price }}</p>
  </div>
{% endfor %}

    Coming Soon: Functions

    DocMiral is introducing Functions – a powerful new feature for easily adding:

    • Charts and graphs
    • Barcodes
    • QR codes
    • Shapes and diagrams
    • Other dynamic elements

    Functions will make it even easier to create rich, data-driven documents without manual coding.

    Tips for Success

    • Start simple: Begin with a basic layout and add complexity gradually
    • Use the preview: Take advantage of the live preview to see changes instantly
    • Test with real data: Use sample data to ensure your variables work correctly
    • Leverage Tailwind: Tailwind CSS provides powerful utility classes for rapid styling
    • Think responsive: Consider how your content will flow across multiple pages

    Ready to Get Started?

    Creating templates in DocMiral combines the flexibility of code with the convenience of a visual editor. Whether you’re a developer comfortable with HTML and CSS or a designer learning to code, DocMiral’s studio environment makes template creation accessible and efficient.

    Start creating your first template today and see how easy it is to turn your designs into dynamic, professional documents.

    Have questions or need help? Check out our documentation or reach out to our support team.