[Go to site: main page, start]
Skip to content

Components + HTML/CSS to PDF · MIT licensed

Your data. Your design. Your PDF.

Compose invoices, reports, and print documents with Python components, JavaScript and JSX, or existing HTML/CSS templates. One Rust print engine, in your application.

Try PDF components Choose your language

Python, Rust, Node.js, C#, and browser JavaScript. One print engine.

Northstar Studio invoice with editorial typography, vermilion rules, and a forest-green total panel.

A real generated PDF. Open it · Explore the designed showcase

Reusable components   /   Explicit fonts and assets   /   Repeatable output   /   Free for commercial use under MIT

Building a store? Try the WooCommerce editor in a sample store, then evaluate an automated order workflow for email attachments or customer downloads.

Compose PDFs with Python components

Functions, props, children, lists and conditionals—familiar building blocks for your print documents. Use named elements and Python style mappings to build a complete invoice without writing HTML strings. The component workflow below requires Fullbleed 2.5.25 or later.

from importlib.resources import files
from pathlib import Path
import fullbleed
from fullbleed.ui import Document, Heading, Paragraph, Stack, Strong, component

@component
def Line(label, amount):
    return Paragraph(Strong(label), ": ", amount)

@Document(title="Invoice", styles={
    "@page": {"size": "A4", "margin": "18mm"},
    "body": {"font_family": "Inter"},
})
def Invoice():
    return Stack(Heading("Made for you", level=1), Line("Design", "$120"), gap="12pt")

font = files("fullbleed_assets").joinpath("fonts/Inter-Variable.ttf")
engine = fullbleed.PdfEngine(font_files=[str(font)])
Path("component-invoice.pdf").write_bytes(Invoice().render_pdf(engine))

Build with Python components Download the designed invoice

Prefer JavaScript? Compose the same kind of document with functions or JSX/TSX. Named components, typed props and reusable styles work with the Node and browser renderers. Try the live component invoice or connect it to your React application. Ordinary JavaScript functions need no build step or React runtime.

Building a web application? Render PDFs in a browser worker with editable templates, previews, and downloads. Try the live starter.

Choose your language

Pick your application stack. Generate a PDF locally or download one from the browser app.

Render an invoice or report in a Web Worker with fullbleed/browser. Edit its HTML/CSS, generate a preview, and download the PDF. The app loads the engine and fonts from its static host and renders the document in your browser.

Open the live editor Edit source online Download the project

Choose Edit source online, then Open in StackBlitz, to edit the complete JavaScript project in your browser. It includes the same files as the ZIP.

Extract the ZIP and open a terminal in fullbleed-browser-starter. Use Node.js 22.12 or newer for the development tools:

npm ci
npm run dev

Open the localhost URL printed by Vite. The starter includes a designed invoice and report, editable templates, previews, cancellation, and PDF downloads. Build it with npm run build and serve the result as a static site.

Using React? Edit the complete React project online in StackBlitz, with TypeScript and automatic PDF previews.

Using Vue? Edit the complete Vue project online with reactive form fields, automatic previews, and a reusable composable.

Browser SDK and hosting guide → React and TypeScript starter → Vue and TypeScript starter →

Use Python 3.10–3.14. The wheel includes the engine, CLI, and fonts.

python -m pip install fullbleed

Save as hello.py:

from importlib.resources import files
from pathlib import Path
import fullbleed

font = files("fullbleed_assets").joinpath("fonts/Inter-Variable.ttf")
engine = fullbleed.PdfEngine(font_files=[str(font)])
html = "<h1>Invoice INV-1042</h1><p>Consulting: USD 1,200.00</p>"
css = """
@page { size: A4; margin: 20mm; }
body { font-family: Inter; color: #203a36; }
h1 { color: #175c52; }
"""
pdf = engine.render_pdf(html, css)
Path("invoice.pdf").write_bytes(pdf)

Run:

python hello.py

Open invoice.pdf. This example embeds the bundled Inter font.

Python quickstart → · FastAPI, Flask, and Django

Building a data app? Export filtered Streamlit data to a designed PDF, with a complete app, editable print template and interactive PDF viewer.

Use Node.js 22 or newer. The npm package includes the WebAssembly engine, fonts, and TypeScript declarations.

npm install fullbleed

Save as invoice.mjs:

import { writeFile } from 'node:fs/promises';
import { renderPdf } from 'fullbleed';

const result = await renderPdf({
  html: '<h1>Invoice NS-1042</h1><p>Consulting: USD 1,200.00</p>',
  css: '@page { size: A4; margin: 20mm } h1 { color: #175c52 }',
  previewDpi: 96,
});

await writeFile('invoice.pdf', result.pdf);
await writeFile('invoice.png', result.previews[0]);
console.log(`${result.pages} page; engine ${result.engineVersion}`);

Run:

node invoice.mjs

Open invoice.pdf or its invoice.png preview. This API covers ordinary PDF rendering and previews.

Node.js quickstart → · Next.js PDF downloads

Use a native Rust toolchain and the published crate.

Download the styled Rust project

The ZIP includes editable invoice/report templates, fonts, and a Cargo lockfile. Run the project, or start with the smaller example below.

cargo new invoice-demo
cd invoice-demo
cargo add fullbleed@=2.5.24 --features svg_raster

Replace src/main.rs with:

use fullbleed::FullBleed;

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let html = "<h1>Invoice INV-1042</h1><p>Consulting: USD 1,200.00</p>";
    let css = "@page { size: A4; margin: 20mm; } h1 { color: #175c52; }";
    let engine = FullBleed::builder().build()?;
    let pdf = engine.render_to_buffer(html, css)?;
    std::fs::write("invoice.pdf", pdf)?;
    Ok(())
}

Run:

cargo run --release

Open invoice.pdf. This first example uses standard PDF fonts; the guide adds explicit fonts and a designed invoice.

Rust quickstart → · Latest hosted Rust API reference

Building an HTTP endpoint? Download the Axum invoice starter with JSON input, editable templates, and a browser download form.

Start a new application with the .NET 10 SDK. The NuGet package includes native rendering libraries.

dotnet new console -n InvoiceDemo --framework net10.0
cd InvoiceDemo
dotnet add package FullBleed.DotNet --version 0.1.8

Replace Program.cs with:

using FullBleed.DotNet;

using var engine = new FullBleedEngine(new FullBleedEngineOptions
{
    DocumentLanguage = "en-US",
    DocumentTitle = "Invoice INV-1042",
});

var html = "<h1>Invoice INV-1042</h1><p>Consulting: USD 1,200.00</p>";
var css = "@page { size: A4; margin: 20mm; } h1 { color: #175c52; }";
File.WriteAllBytes("invoice.pdf", engine.RenderPdf(html, css));

var inspection = FullBleedEngine.InspectPdf("invoice.pdf");
Console.WriteLine($"Created invoice.pdf: {inspection.PageCount} page(s).");

Run:

dotnet run

Open invoice.pdf. This first example uses standard PDF fonts. Existing .NET 8 and 9 applications can use the same package; see the guide for platform support and explicit fonts.

C# and .NET quickstart → · LINQ and variable data

Pick a document to build

Built for a document pipeline

Keep document structure in HTML and design in CSS, then generate PDF bytes in your application. The language guides explain each integration’s fonts, previews, API coverage, and deployment requirements.

Using PHP? The Laravel Blade and queue starter connects business events to styled PDFs, with retries, private downloads and expiry cleanup.

For command-line document workflows, the Python wheel includes the engine, CLI, and fonts with no required third-party Python runtime packages. Use it to render, preview, inspect, and verify your output.

While editing HTML and CSS, watch mode rebuilds your PDF and PNG previews after saves. It is available in Fullbleed 2.5.0 and newer. Use the PDF regression starter to compare a new render with a reviewed baseline in GitHub Actions and retain previews on failure.

Fullbleed uses static HTML/CSS as its layout language. Read the CSS coverage for your templates, and the tool selection guide when you also need live browser rendering or general PDF editing.

Open source, with inspectable evidence

Fullbleed is MIT licensed. The 2.5.24 release links the published engine packages and retained engineering evidence. See the smaller-PDF before/after check and the performance report for specific measured workloads and their limits.

Browse the CSS comparison to inspect printed pages and download PDFs from all 1,662 fixtures, including failures and disputed references.

Read the Python API · Set up a coding agent · Report an issue · Support Fullbleed