FREE TOOL · NO SIGNUP · WATERMARKED PROOFS

HTML → PDF playground

Paste HTML, pick a format, render a proof. The same Chromium engine as the API — what you see here is exactly what your users get. Read the API docs when you’re ready to automate it.

SOURCE · HTML · MAX 100 KB4 KB

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
  :root {
    --ink: #1f1c17;
    --muted: #6b6459;
    --line: #e3ddd0;
    --accent: #00758c;
  }
  body {
    margin: 0;
    padding: 40px 44px;
    color: var(--ink);
    font: 14px/1.55 ui-sans-serif, system-ui, sans-serif;
  }
  header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 16px;
  }
  h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
  .tag {
    font: 11px/1 ui-monospace, monospace;
    letter-spacing: 0.1em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 22px 0 28px;
  }
  .meta b { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
  .items {
    display: grid;
    grid-template-columns: 1fr 70px 90px 100px;
    border-top: 1px solid var(--ink);
  }
  .items > span {
    padding: 9px 6px;
    border-bottom: 1px solid var(--line);
  }
  .items .head {
    font: 11px/1.4 ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }
  .num { text-align: right; font-variant-numeric: tabular-nums; }
  .totals {
    margin-left: auto;
    width: 260px;
    margin-top: 14px;
  }
  .totals div {
    display: flex;
    justify-content: space-between;
    padding: 5px 6px;
  }
  .totals .due {
    border-top: 2px solid var(--ink);
    font-weight: 700;
    font-size: 16px;
  }
  footer {
    margin-top: 48px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
  }
</style>
</head>
<body>
  <header>
    <div>
      <h1>Hartmann &amp; Baumann Studio</h1>
      <span class="tag">Design &middot; Utrecht</span>
    </div>
    <div style="text-align:right">
      <span class="tag">Invoice</span>
      <div style="font-size:20px;font-weight:700">#2026-0142</div>
    </div>
  </header>

<div class="meta">
    <div><b>Billed to</b>Fournier Fine Foods SARL<br>12 Rue des Halles, Lyon</div>
    <div><b>Issued</b>13 July 2026</div>
    <div><b>Due</b>27 July 2026</div>
  </div>

<div class="items">
    <span class="head">Description</span>
    <span class="head num">Qty</span>
    <span class="head num">Rate</span>
    <span class="head num">Amount</span>

<span>Brand identity refresh</span>
    <span class="num">1</span>
    <span class="num">&euro;3,200</span>
    <span class="num">&euro;3,200.00</span>

<span>Packaging design &mdash; 3 SKUs</span>
    <span class="num">3</span>
    <span class="num">&euro;640</span>
    <span class="num">&euro;1,920.00</span>

<span>Print production supervision</span>
    <span class="num">8</span>
    <span class="num">&euro;95</span>
    <span class="num">&euro;760.00</span>
  </div>

<div class="totals">
    <div><span>Subtotal</span><span class="num">&euro;5,880.00</span></div>
    <div><span>VAT 21%</span><span class="num">&euro;1,234.80</span></div>
    <div class="due"><span>Total due</span><span class="num">&euro;7,114.80</span></div>
  </div>

<footer>
    Payment to NL21 INGB 0001 2345 67 &middot; Please reference invoice #2026-0142.
    Thank you for your business.
  </footer>
</body>
</html>

FormatOrientationMargins

CTRL/⌘+ENTER TO RENDER · FREE · NO SIGNUP

RENDER A PROOF TO PREVIEW THE FRAME

A4 · 210×297 MMWATERMARKED — SIGN UP TO REMOVE