Create a template from scratch

In this screencast we will create a template using HTML, Twig and Tailwind CSS.

To start select a blank template. Let’s begin with a simple JSON object.

{
    "name" : "John Doe"
}

Import Tailwind CSS Library and Google fonts.

@import url('https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css');
@import url('https://fonts.googleapis.com/css?family=Bangers:400,700&display=swap');
.font-bangers {
    font-family: Bangers;
}

Bind data using Twig syntax and style template.

<div class="bg-indigo-600 text-white h-screen flex items-center justify-center">
    <div class="font-bangers text-5xl">{{ name }}</div>
</div>

Create and edit PDF documents using template.

Keyboard shortcuts used in this screencast on template editor

CTRL + U : Switch between HTML and PDF view.
CTRL + ENTER : Save and render document

Create a template from scratch

Recommended