SHEET 01/01 · SCALE NTS · WRAFT SYSTEM · REV A · 2026
DOC.NO WR-ARCH-001

Wraft.

A machine that compiles
documents from data.

This is a plain-language blueprint of how Wraft works — for developers and for anyone curious about the system. Read top to bottom; each drawing explains one idea.

Backend Elixir · Phoenix Frontend Next.js · React Storage PostgreSQL · MinIO Jobs Oban Search Typesense
▼ SCROLL TO READ
SHT 01 · THE PROBLEM
One document, scattered across four tools

Today a single contract lives in four different places. Its data is trapped inside a flat file, unstructured, and impossible to automate.

AUTHORING Word · Google Docs write & edit SIGNING DocuSign · Adobe Sign legally bind STORAGE Drive · Dropbox file away DATA ? unstructured ? trapped part 1 part 2 part 3 part 4 one document, torn in four
FIG 1.1 — FOUR TOOLS, ONE DOCUMENT, NO SINGLE SOURCE OF TRUTH

What goes wrong

A contract starts in Google Docs (authoring), gets signed in DocuSign, is stored in Drive, and its metadata is — nowhere. Four tools hold four copies. Change the layout and the data breaks. Rebrand and every old file still looks old. Want to generate 500 invoices straight from a database? You can't.

The root cause: content and presentation are glued together inside a flat file. The document is a picture of data, not the data itself.
SHT 02 · THE BIG IDEA
Stop writing files. Start compiling data.

Wraft splits a document into its three real ingredients — data, layout, and theme — then compiles them back together. Change one without breaking the others.

BEFORE · STATIC FILE { content + styling + fonts + colors + layout } all glued together change anything → everything can break VS AFTER · DATA SYSTEM DATA structured fields LAYOUT typst · structure THEME fonts · colors COMPILE OUTPUT branded PDF edit data, layout, or theme independently → always get a consistent, branded document
FIG 2.1 — SEPARATE THE INGREDIENTS, THEN COMPILE

The mental model

Think of Wraft as “Git + Figma + DocuSign for documents, but API-first and structured.” You don't hand-write a finished document. You define what a kind of document is, fill in the blanks with real data, and the machine produces a perfect, branded result every time.

Key insight: users aren't “writing” a free-form document — they are filling out structured data and generating a perfectly compliant output.
SHT 03 · FIVE CORE PARTS
The five components of every Wraft document

Like parts in an assembly drawing, each component has one job. Bolt them together and you get a complete, compliant document.

1 2 3 4 5 VARIANTthe schema defines fieldsContentType DOCUMENTthe record real data valuesInstance LAYOUTthe renderer page structureLayout · Typst THEMEdesign system fonts · colorsTheme FLOWstate machine approval stepsFlow 5 CORE COMPONENTS — ASSEMBLED INTO ONE DOCUMENT
FIG 3.1 — EXPLODED ASSEMBLY OF A WRAFT DOCUMENT

1 · Variant — schema layer

Defines a type of document, like a database schema. An “Offer Letter” variant has fields such as candidate_name, salary, joining_date. It enforces what content a document may hold.

2 · Document — instance layer

An actual instantiation of a Variant. It holds the real values for those fields — no styling baked into the data payload at all.

3 · Layout — structure layer

Determines how data is arranged on a page. Wraft drives layout engines like Typst and LaTeX — controlling paragraphs, sections, tables, and spacing.

4 · Theme — design system

The visual identity applied globally or per-document: typography, color palettes, header styles. Ensures brand consistency without manual tweaking.

5 · Flow — workflow engine

Defines state transitions that mirror real-world approval steps: Draft → Review → Approved → Signed → Archived. Automates a document through its full lifecycle.

For developers: a Variant is the ContentType schema; a Document is an Instance. Each ContentType belongs_to a Layout, a Theme, and a Flow, and has_many Instances.
SHT 04 · THE PIPELINE
The rendering pipeline — a document compiler

Wraft behaves like a compiler. Raw structured data goes in one end, passes through transformation stages, and a polished PDF comes out the other.

DATA IN → ① JSON structured inputno styling ② AST markdown / ASTintermediate form ③ LAYOUT + theme injectedtypst engine ④ COMPILE render to pagesbuild job ⑤ PDF branded outputready to sign → DOCUMENT OUT ASSEMBLY LINE — DATA FLOWS LEFT → RIGHT THROUGH EACH STAGE structured parsed styled rendered finished
FIG 4.1 — THE RENDERING PIPELINE AS AN ASSEMBLY LINE

Stage by stage

① Structured input (JSON) — the document instance begins as a JSON payload conforming to its Variant schema. No styling yet. ② AST / Markdown conversion — the JSON is mapped into a text-friendly intermediate form. ③ Layout + theme — the intermediate structure is processed by the layout engine (Typst) and injected with the theme's visual properties. ④ Compilation — the layout files are rendered into the final output format. ⑤ Output — a consistent, branded PDF, ready for signing.

For developers: builds run as Oban background jobs. The pipeline is orchestrated through LogicPipeline and Pipelines; final rendering goes through DocConversion and the registered engines. Assets are saved to MinIO via Waffle.
SHT 05 · LIFECYCLE
A document is a state machine, not a file

Wraft documents are stateful. They model the real-world progression of paperwork — from a rough draft to a signed, archived record.

reject / revise DRAFTauthoring REVIEWapproval APPROVEDcleared SIGNEDlegally bound ARCHIVEDstored A DOCUMENT TRAVELS LEFT → RIGHT THROUGH ITS APPROVAL STATES
FIG 5.1 — THE DOCUMENT LIFECYCLE AS A STATE MACHINE

Four phases of a document's life

① Authoring

Defining document variants (schemas), writing content, connecting layout and design to raw data, and collaborating on the structured data payload.

② Approval

Ensuring correctness and compliance. Custom workflows set up conditional review cycles; role-based validation restricts approval to specific teams or roles.

③ Signing

The final, legally binding step: trusted digital signature integrations, with immutable versions and audit trails for compliance.

④ Storage

Archival and retrieval in a centralized, secure repository — with queryable metadata that enables search, automation, and AI processing later.

SHT 06 · SYSTEM
The whole machine, on one drawing

Three parts work together: a Next.js frontend, a Phoenix/Elixir API, and a set of infrastructure services. The frontend never touches the database directly — everything goes through the API.

FRONTEND · NEXT.JS 15 · REACT 19 MONOREPO apps/web @wraft/ui @wraft/icon editor typst pkg REST · WebSocket BACKEND · PHOENIX · ELIXIR API Documents Organisation Pipelines Storage Auth/RBAC Billing YDocuments (CRDT collab) AI Agents · Models Notifications Guardian JWT POSTGRESdatabase MINIOobject storage OBANjob queue TYPESENSEsearch
FIG 6.1 — THREE-TIER SYSTEM ARCHITECTURE

Frontend — the interface

A Next.js 15 monorepo (Turborepo + pnpm). The main app is apps/web; shared building blocks live in packages: @wraft/ui (Base UI + Tailwind), @wraft/icon, editor, and a typst package. Server Components by default; Client Components only when interactivity is needed.

Backend — the engine room

An Elixir/Phoenix API organized into contexts in lib/wraft_doc/. Auth is JWT via Guardian; file uploads go through Waffle to MinIO; background work runs on Oban; collaborative editing uses Yjs (CRDTs). Everything is API-first.

Infrastructure

PostgreSQL 16 holds all structured data. MinIO (S3-compatible) stores files and generated documents. Oban runs build jobs and background tasks. Typesense powers search over the document repository. A separate website/ Astro project serves the public landing page.

SHT 07 · DATA FLOW
How data moves through the machine

From the moment data enters to the moment a document is filed away, it follows one path. Inputs are collected, processed, generated, and stored.

sources UI API webhook ① INPUT CollectionForms Forms · CSV Shopify · Sheets ② PROCESS LogicPipeline Pipelines validate · route ③ GENERATE DocConversion engines · Typst → PDF ④ STORE MinIO repository queryable metadata search · archive DATA ENTERS → IS PROCESSED → IS COMPILED → IS FILED
FIG 7.1 — END-TO-END DATA FLOW

In plain words

Data arrives from forms, CSV, Shopify, or Google Sheets (① input). It is validated and routed through the logic pipeline (② process). The pipeline hands it to the generation engines, which compile it against a layout and theme into a PDF (③ generate). The finished document and its metadata are saved to the MinIO repository, where they become searchable and ready for automation (④ store).

SHT 08 · API-FIRST
Everything the UI can do, code can do too

Wraft is built API-first. Every action available in the interface can be triggered programmatically — making it a powerful engine for automation, not just an editor.

WEB UI humans click Next.js app WRAFT API REST · WebSocket JWT auth · RBAC OpenAPI spec AUTOMATION CRM · ERP · scripts webhooks · API keys ONE API · TWO FACES — HUMANS AND MACHINES SHARE THE SAME DOOR
FIG 8.1 — THE API IS THE SINGLE ENTRY POINT

What this unlocks

Proposal automation

Sales teams fill structured fields (pricing, client, deliverables) via a form or CRM integration, and Wraft compiles a perfectly branded proposal PDF — instantly.

Contract lifecycle (CLM)

Draft from predefined variants, pass through custom review states, sign with digital signature providers, and archive — all triggerable by external systems.

API-to-PDF

A pipeline that turns raw backend data into compliant, styled PDFs — ideal for invoices, receipts, and reports generated with zero human intervention.

Document signing

Integrated digital signing workflows produce legally binding agreements, with the signed artifact and its metadata stored centrally in the repository.

SHT 09 · REFERENCE
Parts list — the full tech stack

A quick-reference bill of materials. Every component the machine is built from, grouped by where it lives.

LayerTechnologyRole
BackendPhoenix 1.7 · Elixir 1.14 · Erlang 26API server, contexts, WebSocket channels
ORM / DBEcto · PostgreSQL 16Structured data, schemas, migrations
AuthGuardian (JWT)Token authentication, flexible pipelines
File uploadsWaffleUploads to S3 / MinIO
Object storageMinIO (S3-compatible)Documents, assets, generated PDFs
Background jobsObanBuilds, imports, scheduled work
SearchTypesense (ExTypesense)Full-text search over repository
Collab editingYjs · y_ex (CRDT)Real-time collaborative document editing
Layout engineTypst · LaTeXDocument structure & rendering
AIJido · instructor_exLLM agents, extraction, suggestions
API specOpenApiSpex · Swagger UIAPI documentation at /spec
FrontendNext.js 15 · React 19 · App RouterMain web application
UIBase UI · Tailwind CSS · CVAHeadless components + tokens (@wraft/ui)
MonorepoTurborepo · pnpm workspacesapps/ + packages/ structure
WebsiteAstroPublic landing page
data / flow backend / API caution / problem break / reject
Run locally: backend on localhost:4000 (mix phx.server), frontend on localhost:3000 (pnpm dev), MinIO console on :9001. API spec & Swagger at /spec/openapi and /spec/swaggerui.