Make PDFs using web tech.

Private betav0.1.0

Build with

React
Vue
HTML
CSS
Tailwind
Sass

Read docs

The developer-first platform for building pixel-perfect PDFs with web technology

Follow our progress via email

01. PDFs for developers

PDFs as code

Generate pixel-perfect PDFs using React, Vue, HTML, Tailwind and Sass

import { Document, Flow, Layout, Stream } from '@format.dev/react'

export default function Invoice({ data }: RenderProps<InvoiceData>) {
	return (
		<Document title={`Invoice #${data.invoiceNo}`} author='Foundry Design Ltd'>
			<Layout id='invoice' width={793.71} height={1122.52}>
				<header className='banner'>
					<Logo />
					<ContactDetails contact={data.studio.contact} />
					<h1>Invoice</h1>
				</header>

				<AddressRow from={data.studio} to={data.client} issued={data.issueDate} />

				<Flow>
					<Stream>
						{data.lineItems.map(item => (
							<LineItem key={item.id} name={item.name} note={item.note} amount={item.amount} />
						))}
					</Stream>

					<Totals subtotal={data.subtotal} vat={data.vat} total={data.total} />
				</Flow>

				<Flow splitGranularity='sentence'>
					<PaymentTerms dueDate={data.dueDate} account={data.studio.account} />
				</Flow>

				<LegalFooter company={data.studio} />
			</Layout>
		</Document>
	)
}

01Automatic pagination

Content seamlessly flows across pages, no manual page breaks, no ugly clipping.

02Declarative syntax

Move away from traditional PDF solutions with difficult, imperative SDKs and APIs.

03Custom fonts

First-class support for Google Fonts, Fontsource, and more.

04Text segmentation

Split text with granular controls. Grapheme, word, and sentence support.

05Framework agnostic

Support for most popular frameworks. Made by engineers, for engineers.

06Agent-ready

AI agents and code-generation tools produce valid, paginated PDFs.

07Instant preview

Build your PDFs with Studio, our local development toolkit.

08Template flexibility

Mix and match different page styles all within the same document.

Step 1

Build your PDF template

Design your documents with declarative syntax using React, Vue, and HTML. Bring your own components, your own styles, your own layout logic.

Everything you already know about building for the web just works.

import { Document, Flow, Layout, Stream } from '@format.dev/react'

export function Invoice({ data }: RenderProps<Invoice>) {
	return (
		<Document title={`Invoice #${data.id}`}>
			<Layout id='invoice' width={793.71} height={1122.52}>
				<h1>Your invoice</h1>

				<Flow>
					<table className='line-items'>
						<Stream>
							{data.lineItems.map(item => (
								<LineItem key={item.id} {...item} />
							))}
						</Stream>
					</table>
				</Flow>

				<Flow splitGranularity='sentence'>
					<Notes notes={data.notes} />
				</Flow>
			</Layout>
		</Document>
	)
}

Step 2

Render your document

Go from data to document in milliseconds. Import your template, pass your data, and render. Format takes care of layout, pagination, fonts, and compression.

Drop into any Node backend or serverless function.

import { FormatClient } from '@format.dev/client'
import { invoice } from '@format:documents'

const data: Invoice = {
	id: '417A9K8X-0009',
	currencyCode: 'GBP',
	locale: 'en-GB',
	taxRate: 0.2,
	issueDate: new Date('2026-03-26T14:48:00.000Z'),
	dueDate: new Date('2026-05-31T23:59:59.999Z'),
	lineItems: [/* ... */],
	notes: [/* ... */]
}

const format = new FormatClient()

const doc = await invoice.render(data)
const response = await format.pdf(doc)

await response.toFile('./output/invoice.pdf')

Our Differentiator

Don’t fight your PDFs, work with them.

What you see is what you’ll get. Every time.

02. Demonstration

Format unifies your entire PDF workflow across three surfaces. Design with modern web tech, render with our custom-built engine, and operate at any scale.

Go ahead, see for yourself.
Make it PDF.

Download PDF

03. Solution architecture

Architecture

One platform, three surfaces.

01. Studio

Make documents like you make websites

Format Studio is your local development suite for building PDF templates using React, Vue, or HTML. Preview documents in your browser with live reload, variant testing against real data, schema-based contracts, and one-click document creation.

Studio docs

02. Engine

The rendering powerhouse beneath Format

Our rendering engine is written from scratch in Rust and compiled to WebAssembly. Complex layouts flow across pages automatically: automatic page breaks with seamless content splitting, precision-rendered to vector perfection.

Learn more about the document model Engine SDKs

03. Platform

Deliver documents at scale without infrastructure

Our API and Dashboard provides rendering infrastructure for documents at scale. Render metrics and tracing, organization-level access controls, usage tracking, and more. You deploy your document templates and we handle the rest.

API docsDashboard docs