All projects

TangentFlow

A browser-based PDF document builder and npm library with pixel-perfect text wrapping for every language — Latin, CJK, Arabic, Hindi, emoji — in pure client-side JavaScript.

2026
JavaScriptPretextPDFnpmCanvasDocument Layout

Overview

TangentFlow is a browser-based document builder and JavaScript library for generating professional PDFs with mathematically precise text layout. It ships as both a hosted document builder at tangentflow.com and an npm package (@upbrew/tangentflow) you can install and use directly in JavaScript.

Challenge

Accurate text wrapping is the hardest problem in PDF generation. Puppeteer needs a headless browser, pdfmake approximates text widths, and most libraries fall apart on non-Latin scripts. I wanted pixel-perfect line breaks for every language — CJK, Arabic, Hindi, emoji — in pure client-side JavaScript with no server roundtrip.

Approach

Built on top of Pretext for glyph-level measurement, so every line break is computed against actual font metrics rather than width estimates. The document model is block-based with 13 types (heading, paragraph, table, image with text-wrap-around, callouts, stat rows, etc.), 9 built-in templates (report, invoice, resume, NDA, multilingual demo), and a canvas-rendered fallback for non-Latin export.

Outcome

Published as @upbrew/tangentflow on npm with a hosted builder at tangentflow.com. The pure-JS, client-side approach means it runs anywhere — no Puppeteer, no headless Chrome, no PDF microservice — and the Pretext-backed layout produces output that matches what you see on screen.