← WorkDocument Engine

Document Engine — Editor and deterministic renderer

2026

Site templara.vercel.app
Source GitHub

Design a document once. Bind JSON. Get a paginated preview or a PDF.

Place a heading where you want it. Then fill the template with real data. HTML is bad at both: free placement, repeating rows, page breaks, and a PDF that matches the screen.

Templara welcome dashboard with projects and starter templates — Projects and templates

Templara splits that job. You author a template as JSON. Data stays separate. A renderer expands repeats, paginates overflow, and paints a document. The editor is not the renderer.

Templara invoice editor with layers, data bindings, and page inspector — The authored page

On the canvas you move layers, bind fields, and look at the schema. Absolute nodes keep the x, y, width, and height you set. Flow regions grow with the data and break onto the next page.

Templara layers panel for the invoice page tree — The page tree

Templara data panel with schema fields — Schema the template binds to

Templara editor highlighting repeat and binding regions — Repeat and field regions

Preview and PDF are another projection of the same template. If a binding fails, you see it. Warnings stay in the output.

Templara preview overlay on a bound invoice — The renderer, not the editor

Templara system architecture diagram — Editor and renderer stay apart

Scope

Schema, editor, bindings, render tree, pagination, React rendering, and PDF export under the Templara packages.

The editor is not the renderer

You author a template as JSON. Data stays in a second JSON file. The renderer binds them, paginates, and paints. Preview and PDF are the same tree, not a second layout.

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. Template JSON and data stay separate.
Absolute and flow layout share one template, so fixed design and expanding data can live together.
If a binding fails, the warning stays in the output.

Stack

TypeScript, React, Zod, Turborepo.

How it works

Two layout modes

Fixed design and expanding data share one template.

Absolute nodes keep the x, y, width, and height you set.
Flow regions grow with repeated rows and break onto the next page.
If a binding fails, the warning stays in the output.