Jh2Pdf

Examples gallery

Each card below is an A4 page made with nothing but HTML and CSS. The browser measures the layout, js/jh2pdf.js turns it into drawing operations and PHP (demo/pdf.php) draws the PDF. Generate the PDF and compare it with the preview: they should match.

Live generation needs a server with PHP. On a static site (like GitHub Pages), the buttons open the ready-made PDF, generated earlier from this same page with Jh2Pdf.

1. HTML + CSS2. extractLayout() in the browser3. POST the JSON4. Renderer::render() → PDF

1 · Cover and typography

Gradient background, 12 embedded families, weights 400 to 700, italics, spaced uppercase, underline and line-through.

linear-gradient@font-facetext-transformletter-spacingtext-decoration
Annual report · 2026

Lorem ipsum dolor sit amet, consectetur

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa.

Lorem Ipsum Dolor Sit Amet · October 17

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.

Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Call extractLayout(pages) and send the result.

Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.

“Nulla facilisi. Aenean nec eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.” — Quisque Volutpat, Condimentum Velit

Text styles

Regular 400
Medium 500
Semibold 600
Bold 700
Italic lorem
Uppercase
Brand color
Opacity 45%
S P A C E

Bundled fonts SIL Open Font License

Lorem ipsumBarlow Condensed
Lorem ipsumDM Sans
Lorem ipsumFira Code
Lorem ipsumInter
Lorem ipsumJetBrains Mono
Lorem ipsumJh Serif
Lorem ipsumJh Serif Text
Lorem ipsumMontserrat
Lorem ipsumNunito
Lorem ipsumOpen Sans
Lorem ipsumJh Display
Lorem ipsumJh Serif Book
Jh2Pdf · examplesPage 1 of 7

2 · Report tables

Gradient header, zebra rows, rounded corners with overflow: hidden, badges, progress bars and a grouped table (colspan/rowspan).

border-collapse:nth-child(even)overflow: hiddencolspantabular-nums
Tables

Lorem ipsum by region

Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.

Total revenue$4.82 M+12.4% this year
Active customers18,204+8.1%
Average ticket$264+3.9%
Cancellations2.7%+0.4 pp

Performance by unit

UnitOwnerTargetRevenueStatus
Lorem NorthIpsum Dolor
$912,400On target
Consectetur SouthAmet Elit
$801,150On target
Adipiscing EastSed Tempor
$640,020At risk
Eiusmod WestLabore Magna
$1,020,900On target
Incididunt CenterUt Enim
$402,310Below
Veniam CoastQuis Nostrud
$713,880At risk
Exercitation HillsUllamco Laboris
$329,640At risk
Total$4,820,300

Quarterly comparison colspan, rowspan and a highlighted column

Metric20252026Var.
Q1Q2Q1Q2
Lorem ipsum
Dolor sit1,2041,3181,4021,588+20.5%
Amet consectetur8428809151,002+13.9%
Adipiscing elit
Sed do eiusmod63%66%69%72%+6 pp
Tempor incididunt4.14.34.44.6+7.0%
Labore et dolore17 d15 d14 d12 d−20.0%
Jh2Pdf · examplesPage 2 of 7

3 · Pricing plans and comparison table

Cards with a solid (unblurred) shadow, markers made with an empty ::before and a feature table with a highlighted column.

box-shadow 6px 6px 0::before { content: '' }floatborder-radius
Tables

Choose your lorem plan

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum aenean imperdiet etiam ultricies nisi vel augue.

Lorem

To get started

$0 /mo
  • 3 ipsum documents
  • PDF export
  • 1 user
  • Email support
Popular

Ipsum

For teams

$49 /mo
  • Unlimited documents
  • Custom branding
  • 10 users
  • Custom fonts
  • Priority support

Dolor

For companies

$199 /mo
  • Everything in Ipsum
  • Unlimited users
  • SSO and audit log
  • Account manager

Feature comparison

FeatureLoremIpsumDolor
Sit amet consectetur
Adipiscing elit sed
Eiusmod tempor
Incididunt ut labore
Magna aliqua enim110Unlimited
Minim veniam quis
Nostrud exercitationEmailPriorityDedicated
Ullamco laboris nisi
Jh2Pdf · examplesPage 3 of 7

4 · Boxes and effects

Vertical and horizontal gradients with multiple stops, per-corner radii, per-side borders, stacked solid shadows, an inset shadow, opacity and rounded clipping.

linear-gradientborder-*-widthbox-shadow insetopacityoverflow: hidden
Effects

Boxes, gradients and shadows

Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Gradients and shadows

Verticallinear-gradient(#a855f7, #4f46e5)
Horizontalto right, #f97316, #ec4899
3 stops#0ea5e9, #22c55e 50%, #eab308
Soft with border#ffffff → #e0e7ff
Asymmetric corners4px 40px 4px 40px
Stacked shadows8px 8px 0, 16px 16px 0

CSS shapes

Callouts marker with an absolute ::before

InfoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
SuccessUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
WarningDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
ErrorExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

Rounded clipping and code

Lorem
Ipsum
Dolor
Sit
// browser
const layout = await extractLayout(pages, { width: 794, height: 1123 });
await fetch('pdf.php', { method: 'POST', body: JSON.stringify(layout) });
Jh2Pdf · examplesPage 4 of 7

5 · Images and filters

CSS filters are applied on the server with GD. Also: object-fit, rounded clipping and a drop-shadow that follows the PNG's transparency.

filterobject-fit: cover | containdrop-shadowdata:image/…
Images

Filters, clipping and shadows

The same image (drawn on a <canvas> and sent as data:) with each CSS filter.

filter

none
grayscale(1)
sepia(1)
blur(3px)
saturate(2.2)
hue-rotate(140deg)
contrast(1.7)
invert(1)
brightness(1.4) opacity(.6)

Clipping and shadow

Lorem ipsum dolor

Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.

Jh2Pdf · examplesPage 5 of 7

6 · Lists and hand-drawn marks

List markers (disc, circle, square, numbers, letters, a colored ::marker) and hand-drawn marks over the text (marks: true).

list-style-type::marker.mk-circle--mk-color
Lists

Lists and highlights

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient.

List markers

disc + circle

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Sed do eiusmod tempor
    • Incididunt ut labore
  • Magna aliqua ut enim

square

  • Ad minim veniam quis
  • Nostrud exercitation ullamco
  • Laboris nisi ut aliquip
  • Ex ea commodo consequat

decimal + ::marker

  1. Duis aute irure dolor
  2. In reprehenderit in voluptate
  3. Velit esse cillum dolore
  4. Eu fugiat nulla pariatur

lower-alpha / upper-alpha

  1. Excepteur sint occaecat
  2. Cupidatat non proident
  1. Sunt in culpa qui officia
  2. Deserunt mollit anim

Step by step marker with ::before and a gradient

  1. Lorem ipsum — dolor sit amet, consectetur adipiscing elit.
  2. Sed do eiusmod — tempor incididunt ut labore et dolore magna.
  3. Ut enim ad minim — veniam, quis nostrud exercitation ullamco.

Hand-drawn marks

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Jh2Pdf · examplesPage 6 of 7

7 · Business document: invoice

A real-world case: a header with a CSS logo, address blocks, a line-item table with two-line descriptions, totals and a semi-transparent stamp.

flexgridposition: absoluteopacitywhite-space: nowrap
INVOICENo. 2026-00417
Issued: 10/17/2026
Due: 10/31/2026
PAID

From

Lorem Ipsum Inc.
123 Dolor Sit Street
Austin, TX
Tax ID 00-0000000

Bill to

Consectetur Corp.
4567 Adipiscing Ave.
Denver, CO
Tax ID 11-1111111

Project

Elit Portal
Contract 88/2026
Period: September
Ref.: PO-55120
#DescriptionQtyUnit priceTotal
1Lorem ipsum dolor sit ametConsectetur adipiscing elit, sed do eiusmod tempor40 h$180.00$7,200.00
2Incididunt ut laboreEt dolore magna aliqua, ut enim ad minim veniam1$2,400.00$2,400.00
3Quis nostrud exercitationUllamco laboris nisi ut aliquip ex ea commodo12$95.00$1,140.00
4Duis aute irure dolorIn reprehenderit in voluptate velit esse cillum3$650.00$1,950.00
5Excepteur sint occaecatCupidatat non proident, sunt in culpa qui officia1$480.00$480.00
Subtotal$13,170.00
Discount (5%)− $658.50
Tax (2%)$250.23
Total$12,761.73
Notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Payment received
Wire transfer on 10/20/2026
Reference 9F3A-21C7-77B0
Jh2Pdf · examplesPage 7 of 7
PDF Download