1 / 10
Document Engine — Editor and deterministic renderer
A browser-based document editor and rendering engine built around dynamic layouts, structured document state, pagination, templates, and PDF generation.
I wanted document interfaces with free positioning, not the constraints of normal page layout. Browser layouts struggle with pagination, repeatable sections, arbitrary positioning, and reliable PDF output.
I built a graph-based document rendering engine in React that takes structured JSON and turns it into dynamic layouts and paginated documents. The work covered node relationships, layout calculations, pagination, repeat sections, template rendering, and PDF export.
The project pushed my thinking on rendering systems, layout algorithms, document state, and the gap between what the browser paints and what a page actually is.
Scope
Schema, editor, bindings, render tree, pagination, React rendering, and PDF export under the Templara packages.
The editor is not the renderer
Authored template JSON and runtime data remain separate. The renderer resolves them into a paginated tree before the React surface paints the result.
- 1.Template JSON + data JSON
- 2.@templara/core
- 3.@templara/renderer
- 4.Paginated render tree
- 5.@templara/react-renderer
- 6.Preview or PDF
Interaction details
- The editor never pretends to be the renderer. Authored JSON and runtime data stay separate.
- Absolute and flow layout modes coexist so fixed design and expanding data can share one template.
- Render warnings are part of the contract, not silent failures.
Stack
TypeScript, React, Zod, Turborepo.
Links
- Source: github.com/Dannny-Babs/templara
How it works
Two layout modes
The model preserves direct manipulation for fixed design work and flow behavior for content that must expand safely.
- Absolute nodes keep authored x, y, width, and height.
- Flow regions expand repeated rows and paginate overflow.
- Warnings remain part of the output instead of being silently discarded.