PDF Toolkit

# The toolkit ships with the library
npm install fluxo-ui

import { PdfDocument, drawGrid, savePdf } from 'fluxo-ui/pdf';

const doc = new PdfDocument({
  format: 'a4',
  margin: 40,
  metadata: { title: 'Monthly summary' },
});

doc.drawText('Monthly summary', 40, 50, { fontSize: 20, bold: true });

drawGrid(doc, {
  startY: 90,
  preset: 'ruled',
  columns: [
    { key: 'region', header: 'Region' },
    { key: 'revenue', header: 'Revenue', width: 90, style: { align: 'right' } },
  ],
  body: [
    { region: 'Nordics', revenue: '$42,257' },
    { region: 'East Asia', revenue: '$66,014' },
  ],
});

savePdf(doc.build(), 'summary.pdf');

// Document, drawing, tables, layout helpers and output — isomorphic
import {
  PdfDocument,
  drawGrid,
  createFlow,
  applyHeaderBand,
  applyFooterBand,
  applyWatermark,
  stampPageNumbers,
  savePdf,
  toBlob,
  toDataUrl,
} from 'fluxo-ui/pdf';

// Reading tables out of the DOM — browser only
import { extractTable, buildPdfFromTable, exportTableToPdf } from 'fluxo-ui/pdf/html';

import { PdfDocument, drawGrid } from 'fluxo-ui/pdf';
import { savePdf } from 'fluxo-ui/pdf';

const doc = new PdfDocument({
  format: 'a4',
  margin: 44,
  metadata: { title: 'Invoice INV-2026-0418', author: 'Northwind Studio Ltd.' },
});

const right = doc.pageWidth - doc.margin.right;

doc.drawRectangle(0, 0, doc.pageWidth, 8, { fillColor: '#4f46e5' });
doc.drawText('Northwind Studio Ltd.', doc.margin.left, 56, { fontSize: 17, bold: true });
doc.drawText('INVOICE', right, 56, {
  fontSize: 26,
  bold: true,
  color: '#4f46e5',
  align: 'right',
  anchor: 'point',
});

const table = drawGrid(doc, {
  startY: 258,
  preset: 'ruled',
  columns: [
    { key: 0, header: 'Description' },
    { key: 1, header: 'Qty', width: 44, style: { align: 'right' } },
    { key: 2, header: 'Unit price', width: 78, style: { align: 'right' } },
    { key: 3, header: 'Tax', width: 46, style: { align: 'right' } },
    { key: 4, header: 'Amount', width: 86, style: { align: 'right' } },
  ],
  body: lineItems,
});

doc.drawText('Total due', right, table.finalY + 46, { bold: true, align: 'right', anchor: 'point' });

savePdf(doc.build(), 'invoice.pdf');

import { PdfDocument, drawGrid, stampPageNumbers } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format: 'a4', margin: 40 });

// Summary cards drawn with primitives
cards.forEach((card, index) => {
  const x = 40 + index * 132;
  doc.drawRectangle(x, 100, 122, 62, { fillColor: card.tint, radius: 8 });
  doc.drawText(card.label, x + 12, 114, { fontSize: 8, color: card.ink });
  doc.drawText(card.value, x + 12, 132, { fontSize: 16, bold: true, color: card.ink });
});

drawGrid(doc, {
  startY: 190,
  preset: 'ruled',
  columns: [
    { key: 'date', header: 'Date', width: 74 },
    { key: 'description', header: 'Description' },
    { key: 'debit', header: 'Debit', width: 78, style: { align: 'right' } },
    { key: 'credit', header: 'Credit', width: 78, style: { align: 'right' } },
    { key: 'balance', header: 'Balance', width: 84, style: { align: 'right' } },
  ],
  body: entries,
});

stampPageNumbers(doc);

import { PdfDocument } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format: 'a4', margin: 40 });

doc.drawText('Typography', 40, 60, { fontSize: 22, bold: true });
doc.drawText('Helvetica, Times and Courier are always available.', 40, 88, {
  fontSize: 11,
  font: 'Times',
  italic: true,
  color: '#475569',
});

doc.drawText('Wrapped paragraph text flows inside a fixed measure.', 40, 120, {
  maxWidth: 240,
  lineHeightFactor: 1.4,
});

doc.drawText('Centred', 297, 200, { align: 'center', anchor: 'point', fontSize: 14 });
doc.drawText('Right edge', 555, 200, { align: 'right', anchor: 'point', fontSize: 14 });

doc.drawRectangle(40, 240, 140, 70, { fillColor: '#6366f1', radius: 10 });
doc.drawCircle(250, 275, 35, { fillColor: '#f97316', strokeColor: '#7c2d12', lineWidth: 2 });
doc.drawPolygon(
  [{ x: 330, y: 240 }, { x: 400, y: 310 }, { x: 330, y: 310 }],
  { fillColor: '#10b981', opacity: 0.75 },
);
doc.drawLine(40, 340, 555, 340, { strokeColor: '#cbd5e1', dashPattern: [5, 3] });

doc.drawPath((path) => {
  path.moveTo(40, 380).curveTo(140, 350, 240, 430, 340, 380);
}, { strokeColor: '#db2777', lineWidth: 2.5 });

import { PdfDocument, drawGrid } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format: 'a4' });

// Five built-in presets: lined, ruled, zebra, minimal, boxed
let y = 60;
for (const preset of ['lined', 'ruled', 'zebra', 'minimal', 'boxed'] as const) {
  const result = drawGrid(doc, {
    startY: y,
    preset,
    columns: [
      { key: 'sku', header: 'SKU', width: 70 },
      { key: 'product', header: 'Product' },
      { key: 'stock', header: 'Stock', width: 54, style: { align: 'right' } },
      { key: 'price', header: 'Price', width: 62, style: { align: 'right' } },
    ],
    body: rows,
  });
  y = result.finalY + 26;
}

import { PdfDocument, drawGrid } from 'fluxo-ui/pdf';

drawGrid(doc, {
  startY: 60,
  preset: 'boxed',
  head: [
    [
      { value: 'Team', rowSpan: 2 },
      { value: 'First half', colSpan: 2, style: { align: 'center' } },
      { value: 'Second half', colSpan: 2, style: { align: 'center' } },
      { value: 'Total', rowSpan: 2, style: { align: 'right' } },
    ],
    ['Q1', 'Q2', 'Q3', 'Q4'],
  ],
  body: [
    ['Platform', '18', '24', '31', '29', '102'],
    ['Design', '12', '9', '15', '18', '54'],
  ],
  foot: [[{ value: 'All teams', colSpan: 5, style: { align: 'right' } }, '156']],
});

import { PdfDocument, drawGrid, applyHeaderBand, applyFooterBand } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format: 'a4', orientation: 'landscape', margin: 40 });

drawGrid(doc, {
  startY: 80,
  preset: 'zebra',
  repeat: { header: 'everyPage', footer: 'lastPage' },
  columns: [
    { key: 'region', header: 'Region' },
    { key: 'representative', header: 'Representative' },
    { key: 'units', header: 'Units', style: { align: 'right' } },
    { key: 'revenue', header: 'Revenue', style: { align: 'right' } },
    { key: 'growth', header: 'Growth', style: { align: 'right' } },
    { key: 'status', header: 'Status', style: { align: 'center' } },
  ],
  body: salesRows,
  foot: [[{ value: 'Total', colSpan: 3, style: { align: 'right' } }, total, '', '']],
  onCellBeforeDraw: ({ cell }) => {
    if (cell.section === 'body' && cell.columnIndex === 5) {
      cell.style.textColor = statusColors[cell.text[0]] ?? '#334155';
    }
  },
});

applyHeaderBand(doc, { slots: [{ text: 'Regional Performance' }, { text: 'FY2026', align: 'right' }] });
applyFooterBand(doc, {
  slots: [{ text: (page, total) => `Page ${page} of ${total}`, align: 'right' }],
  ruleColor: '#e2e8f0',
  ruleWidth: 0.5,
});

import { PdfDocument, createFlow, stampPageNumbers } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format: 'a4', margin: 48 });
const flow = createFlow(doc, { startY: 60, gap: 10 });

flow.heading('Annual Review', { fontSize: 22 });
flow.paragraph(summary, { fontSize: 10.5, lineHeightFactor: 1.5 });
flow.rule();

flow.heading('Territory breakdown', { fontSize: 14 });
flow.grid({
  preset: 'ruled',
  columns: [...],
  body: rows,
});

flow.heading('Outlook', { fontSize: 14 });
flow.paragraph(outlook);

stampPageNumbers(doc);

import { PdfDocument } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format: 'a4', orientation: 'landscape', margin: 0 });

const width = doc.pageWidth;
const centre = width / 2;

doc.drawRectangle(0, 0, width, doc.pageHeight, { fillColor: '#fffbeb' });
doc.drawRectangle(26, 26, width - 52, doc.pageHeight - 52, { strokeColor: '#b45309', lineWidth: 2.5 });

doc.drawText('CERTIFICATE OF COMPLETION', centre, 104, {
  align: 'center',
  anchor: 'point',
  fontSize: 25,
  bold: true,
  color: '#78350f',
  characterSpacing: 1.5,
});

doc.drawText(recipientName, centre, 200, {
  align: 'center',
  anchor: 'point',
  fontSize: 34,
  font: 'Times',
  italic: true,
});

// A seal supplied as a PNG or JPEG, sized and centred on the page
if (sealImage) {
  doc.drawImage(sealImage, { x: centre - 34, y: 318, width: 68, height: 68 });
} else {
  doc.drawCircle(centre, 352, 34, { fillColor: '#fef3c7', strokeColor: '#b45309', lineWidth: 1.5 });
  doc.drawText('SEAL', centre, 350, { align: 'center', anchor: 'point', fontSize: 10, bold: true });
}

import { PdfDocument, applyWatermark } from 'fluxo-ui/pdf';

// Work in millimetres instead of points
const doc = new PdfDocument({ unit: 'mm', format: 'a5', margin: 12 });

doc.drawText('A5 measured in millimetres', 12, 20, { fontSize: 14, bold: true });
doc.drawRectangle(12, 30, 60, 25, { fillColor: '#0ea5e9' });

// Each page can take its own size and orientation
doc.addPage({ format: 'letter', orientation: 'landscape' });
doc.drawText('Letter, landscape', 12, 20, { fontSize: 14, bold: true });

doc.addPage({ format: [120, 80] });
doc.drawText('Custom 120 x 80 mm', 12, 20, { fontSize: 12, bold: true });

applyWatermark(doc, { text: 'SPECIMEN', opacity: 0.12 });

import { PdfDocument } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format: 'a4' });

// A clickable external link
doc.drawText('Read the documentation', 40, 120, { color: '#1d4ed8', underline: true });
doc.addLink(40, 120, 150, 14, { url: 'https://example.com/docs' });

// A jump to another page in the same document
doc.addLink(40, 150, 120, 14, { pageIndex: 2, tooltip: 'Go to appendix' });

// A bookmark tree for the reader's sidebar
doc.addOutline({
  title: 'Introduction',
  pageIndex: 0,
  children: [{ title: 'Scope', pageIndex: 0 }],
});
doc.addOutline({ title: 'Appendix', pageIndex: 2 });

// Links with an unsafe scheme are dropped rather than written
doc.addLink(40, 200, 100, 14, { url: 'javascript:alert(1)' });

import { buildPdfFromTable, exportTableToPdf } from 'fluxo-ui/pdf/html';

// One call: read a live table from the DOM and save it
exportTableToPdf('#catalog-table', {
  title: 'Product Catalog',
  fileName: 'catalog.pdf',
  // Keep the spacing, alignment and borders, but print in the preset's colours
  extract: { inheritStyles: true, ignoreColors: true },
  grid: { preset: 'ruled' },
});

// Or take the document first to keep editing it
const { doc } = buildPdfFromTable('#catalog-table', {
  extract: { inheritStyles: true, includeHidden: false },
  grid: { preset: 'zebra' },
});
doc.drawText('Reviewed by operations', 40, doc.pageHeight - 60, { fontSize: 9 });
savePdf(doc.build(), 'catalog.pdf');

import { PdfDocument, drawGrid } from 'fluxo-ui/pdf';

const doc = new PdfDocument({ format, orientation, margin: 40 });

doc.drawText(title, 40, 50, { fontSize: 18, bold: true });

drawGrid(doc, {
  startY: 84,
  preset,          // lined | ruled | zebra | minimal | boxed
  columns: [
    { key: 'item', header: 'Item' },
    { key: 'qty', header: 'Qty', width: 56, style: { align: 'right' } },
    { key: 'rate', header: 'Rate', width: 80, style: { align: 'right' } },
    { key: 'amount', header: 'Amount', width: 90, style: { align: 'right' } },
  ],
  body: rows,
  foot: [[{ value: 'Total', colSpan: 3, style: { align: 'right' } }, total]],
});

import { writeFileSync } from 'node:fs';
import { PdfDocument, drawGrid } from 'fluxo-ui/pdf';

// No DOM is involved, so this runs unchanged on a server
const doc = new PdfDocument({ format: 'a4', margin: 40 });

doc.drawText('Nightly batch', 40, 50, { fontSize: 18, bold: true });

drawGrid(doc, {
  startY: 84,
  preset: 'zebra',
  columns: [
    { key: 'account', header: 'Account' },
    { key: 'balance', header: 'Balance', width: 90, style: { align: 'right' } },
  ],
  body: await loadAccountRows(),
});

writeFileSync('statement.pdf', doc.build());