edbnedbn/ui
ComponentsTablesChartsPDFsStandards
GitHub stars
Explorer
    • Overview
    • Usage
    • Invoice
    • Credit note
    • Account statement
    • Quote
    • Proposal
    • Statement of work
    • Purchase order
    • Delivery note
    • Letterhead
    • Executive report
    • Financial report
    • Annual report
    • Document layout
    • Company identity
    • Typography
    • Key value
    • Panel
    • Table
    • Totals
    • Metrics
    • Vector chart
    • Image
    • Signature
    • Watermark
    • License and fonts

Usage

Install a document and a renderer. The registry adds editable Typst files, data types, a typed example, and the licensed fonts under your library alias.

Terminal
3 lines
1
2
3
npx shadcn@4.19.0 add https://ui.edbn.me/r/pdf-invoice.json
npx shadcn@4.19.0 add https://ui.edbn.me/r/pdf-node.json
npm install --save-exact @myriaddreamin/typst-ts-node-compiler@0.7.0

Render with Node

render.ts
17 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { writeFile } from "node:fs/promises";
import { createPdfRenderer } from "@/lib/pdf/node";
import { data } from "@/lib/pdf/examples/invoice";

const renderer = createPdfRenderer();
try {
  const result = await renderer.render({
    template: "invoice",
    data,
    brand: { name: "Northstar Studio" },
    paper: "a4",
    locale: "en-US",
  });
  await writeFile("invoice.pdf", result.bytes);
} finally {
  renderer.dispose();
}

The Node adapter reads the installed Typst files. Run TypeScript with node --import tsx, or compile the helpers and copy the worker and Typst files next to your output.

Render in the browser

Terminal
2 lines
1
2
npx shadcn@4.19.0 add https://ui.edbn.me/r/pdf-browser.json
npm install --save-exact @myriaddreamin/typst.ts@0.7.0 @myriaddreamin/typst-ts-web-compiler@0.7.0
render.ts
8 lines
1
2
3
4
5
6
7
8
import { createPdfRenderer } from "@/lib/pdf/browser";
import { data } from "@/lib/pdf/examples/invoice";

const renderer = createPdfRenderer({
  wasmUrl: "/pdf-runtime/typst-0.7.0.wasm",
});
const result = await renderer.render({ template: "invoice", data });
// result.bytes is the PDF. Call renderer.dispose() during cleanup.

Keep both packages pinned at 0.7.0. Copy typst_ts_web_compiler_bg.wasm from the compiler package into your public assets and pass its URL. Next.js and Vite bundle the default worker; other setups can supply a worker factory.

Data

Amounts are safe integers in minor units with an ISO currency code. Your application supplies every amount, including tax and totals; the library only formats them. Dates are ISO calendar dates and are written out for the chosen locale. dueOn also accepts text such as “On receipt”.

Branding

Set brand.name, and add a logo with brand.logo and brand.logoAlt using local PNG, JPEG, or self-contained SVG bytes passed through assets. brand.accent takes a six-digit hex color. To use your own typeface, pass TTF or OTF bytes to the renderer’s fonts option and set the brand font families.

Export profiles

Both adapters produce standard tagged PDFs. PDF/UA-1 and PDF/A-2b are available in Node through the profile option and are validated with veraPDF.