_{Edit a document in the playground: it renders again in the browser, and Layout shows the boxes the engine laid out.}

Inkoxide does the typesetting of a PDF: text shaping, line breaking, layout, pagination and PDF output, in native code. Documents are written as React components with @inkoxide/render, styled with Tailwind classes or style objects, or built as JSON by any program and rendered with inkoxide. A one-page invoice renders in about a millisecond; a 98-page report with 40 tables in about 130 ms.

Features

• Typesetting. OpenType shaping, justification, hyphenation with TeX patterns, orphans and widows, font fallback and right-to-left text.
• Layout. Flexbox and CSS grid, absolute positioning, transforms, borders and radii.
• Pagination. Tables that split across pages with repeating header rows, headers and footers, page numbers, keep-together blocks and page breaks.
• Content. JPEG, PNG, GIF, WebP and SVG images, vector drawing, links, bookmarks, fillable form fields and text notes.
• Output. Font subsetting (TrueType and CFF), PDF/A-1b, 2b and 3b, AES-256 encryption with passwords and permissions, parallel rendering across pages, and byte-identical output for identical input.
• Validation. Every document is checked against a JSON Schema, with the path of each error. In React, errors carry the component stack.

Getting started

With React

npm install @inkoxide/render

To style with Tailwind classes (className), as the example does, add:

npm install @inkoxide/tailwind

Save this as receipt.tsx:

/** @jsxRuntime automatic */
import { Document, Page, renderToFile, Text, View } from '@inkoxide/render';

function Receipt({ customer, lines }: { customer: string; lines: { name: string; amount: number }[] }) {
  const total = lines.reduce((sum, l) => sum + l.amount, 0);
  return (
    <Document title={`Receipt for ${customer}`}>
      <Page size="A6" className="p-8 text-xs text-gray-900">
        <Text className="text-lg font-bold">Receipt</Text>
        <Text className="mb-4 text-gray-500">for {customer}</Text>
        {lines.map((l) => (
          <View key={l.name} className="flex-row justify-between border-b border-gray-200 py-1.5">
            <Text>{l.name}</Text>
            <Text>${l.amount.toFixed(2)}</Text>
          </View>
        ))}
        <View className="mt-3 flex-row justify-between font-bold">
          <Text>Total</Text>
          <Text>${total.toFixed(2)}</Text>
        </View>
      </Page>
    </Document>
  );
}

renderToFile(
  <Receipt
    customer="Ada Lovelace"
    lines={[
      { name: 'Espresso', amount: 3.2 },
      { name: 'Almond croissant', amount: 4.5 },
      { name: 'Sparkling water', amount: 2 },
    ]}
  />,
  'receipt.pdf',
);

Run it with npx tsx receipt.tsx. The fonts (Inter, Noto Sans, Roboto Mono) ship with the package, and @inkoxide/tailwind brings the Tailwind compiler. The six documents above, with their code, are in examples/ and in the @inkoxide/render README.

With JSON

import { readFileSync, writeFileSync } from 'node:fs';
import { registerFont, render } from 'inkoxide';

registerFont('Inter-Bold', readFileSync('Inter-Bold.ttf'));

const doc = {
  version: 1,
  fonts: [{ id: 'Inter-Bold', family: 'Inter', weight: 700 }],
  pages: [
    {
      size: { width: 595.28, height: 841.89 },
      margin: { top: 56, right: 56, bottom: 56, left: 56 },
      children: [{ type: 'text', runs: [{ text: 'Hello, PDF', font: 'Inter-Bold', size: 28 }] }],
    },
  ],
};

writeFileSync('hello.pdf', await render(JSON.stringify(doc)));

The document tree is a fully resolved description of boxes, text, images and tables, as JSON or MessagePack. @inkoxide/schema has its TypeScript types and JSON Schema.

Documentation

Packages

Performance

Median render times after warm-up:

Layout and PDF writing run in parallel across pages, and fonts are parsed once per process. docs/BENCHMARKS.md has the methodology, per-stage profiles and comparisons with other libraries, on the server and in the browser.

Platforms

Prebuilt binaries; npm installs the one for the current platform. Every package needs Node.js 22 or later and is an ES module.

In browsers (current Chrome, Edge, Firefox and Safari), the engine is WebAssembly (@inkoxide/wasm), and @inkoxide/render/browser renders in a Web Worker; see In the browser.

Contributing

Issues and pull requests are welcome. CONTRIBUTING.md explains how to build the project, run the tests and propose a change, and docs/ARCHITECTURE.md how the code is organised. Please report security issues privately, as described in SECURITY.md. Changes are listed in CHANGELOG.md.

Licence

MIT. The bundled fonts are under the SIL Open Font License (fixtures/fonts/*-OFL.txt).