Playground

Try out our factory!

Load our examples to see what our template engine can do.

Use this tool to develop your own HTML template. Don't forget to customize the rendering with CSS, then export it for direct use in your code.

Samples

You can load our samples to see the WebForgePDF's powers!

codabars giftcard multiple order raw simple

Properties Document properties (dimensions, margins, exif tags)

Unit

Paper Width

Paper Height

Landscape?

Margin Top

Margin Bottom

Margin Left

Margin Right

Title

Subject

Keywords

Author

Data Json object (one page) or an array of Json object (multiple page)

[
    {
        "id": 1,
        "name": "John Doe",
        "country": "USA",
        "company": "General Electric",
        "image": "https:\/\/upload.wikimedia.org\/wikipedia\/commons\/f\/ff\/General_Electric_logo.svg"
    },
    {
        "id": 3,
        "name": "Anne O'nyme",
        "country": "Finland",
        "company": "Nokia",
        "image": "https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/ca\/Nokia_2023.svg"
    }
]

Template HTML with Twig, some tag & functions are disabled (iframe, javascript, ...)

<h1>{{ name }}</h1>
<div class="d-flex">
  <span class="mx-auto">{{ country }}</span>
  <span class="mx-auto">{{ company }}</span>
</div>
<div id="containerImg" class="mx-auto w-50">
  <img class="img-fluid" src="{{ image }}" />
</div>

Style CSS, with famous Framework or none

Framework C S S

h1 { color: #333; margin-bottom:2rem;}

.d-flex { display:flex; justify-content: between;}

.w-50 { width :50%; }

#containerImg { padding:1rem; }
.mx-auto {margin-left:auto; margin-right:auto; }
img.img-fluid { max-width:100%; height:auto; width:auto; }

Documentation

X / X

The PDF rendering is of medium quality by design and contains a watermark. Click here if you want to use all the features of WebForgePDF.

An error occured during the process!