# Takumi

Takumi renders JSX, HTML, and node trees into images, SVG, and PDF from Rust, without a headless
browser. It ships as a Rust crate, a native Node addon, and a WebAssembly module, so the same
template runs on Node, Bun, Deno, Cloudflare Workers, and in the browser.

## When to use Takumi

Use Takumi for these jobs:

- Generate an Open Graph or social card image for a page, a post, or a product.
- Render a receipt, ticket, certificate, badge, or invoice as PNG, WebP, AVIF, JPEG, or SVG.
- Produce a paged PDF (invoice, report, statement) from the same JSX you already render to HTML.
- Replace Puppeteer or Playwright screenshots that exist only to turn markup into an image.
- Replace Satori when you need real image decoding, PDF output, or CSS it does not implement.
- Render thousands of images in a build step, or one per request inside a serverless function.

Takumi does not scrape live websites or run JavaScript in a page. It lays out and paints the
markup you give it.

## How to call it

- Node, Bun, Deno: `npm install takumi-js`, then `renderAsync(node, options)`.
- Next.js, Nuxt, SvelteKit, Astro, Nitro, TanStack Start: see /docs/integration.
- Cloudflare Workers and the browser: use the WebAssembly build, `@takumi-rs/wasm`.
- Rust: the `takumi` crate, documented at https://docs.rs/takumi.
- PDF output: `takumi-pdf`, documented at /docs/pdf.

## Machine-readable entry points

- https://takumi.kane.tw/llms.txt: this file, plus an outline of every documentation page.
- https://takumi.kane.tw/llms-full.txt: all of the documentation in one Markdown file.
- https://takumi.kane.tw/openapi.json: every endpoint this site serves, as OpenAPI 3.1.
- https://takumi.kane.tw/r/registry.json: installable templates for the shadcn CLI.
- https://takumi.kane.tw/sitemap.xml: every page URL.
- Any documentation URL returns Markdown when the request sends `Accept: text/markdown`. The same
  content is also available by appending `.md` to the path.
- https://takumi.kane.tw/about, /contact, /privacy: who maintains Takumi, how to reach them, what the site
  collects.

# Docs

- Documentation for Takumi

  - ** For LLMs **
  - [llms.txt](https://takumi.kane.tw/llms.txt)
  - [llms-full.txt](https://takumi.kane.tw/llms-full.txt)

  - ** Get started **
  - [Introduction](/docs): A Rust engine that renders JSX, HTML, and node trees into images. No headless browser.
  - Integration
    - [Integration](/docs/integration): Use Takumi in your framework.
    - [Next.js](/docs/integration/nextjs): Use Takumi to render your React components on the server.
    - [Fumapress](/docs/integration/fumapress): Open Graph images for every page with the Fumapress Takumi plugin.
    - [Nuxt](/docs/integration/nuxt): Use Takumi through Nuxt OG Image in Nuxt apps.
    - [SvelteKit](/docs/integration/sveltekit): Use Takumi to render your Svelte components on the server.
    - [TanStack Start](/docs/integration/tanstack-start): Use Takumi to render your React components on the server.
    - [Nitro](/docs/integration/nitro): Render OG images from a Nitro server route.
    - [Astro](/docs/integration/astro): Generate Open Graph images for every page at build time.
  - [Comparison to satori](/docs/comparison-to-satori): How Takumi differs from satori and next/og, and how to migrate a template.

  - ** Guides **
  - [Styling](/docs/styling): How CSS reaches a node, what the stylesheet engine supports, and the Tailwind paths.
  - [Tables](/docs/tables): What the table displays support, where they drift from browsers, and how to keep columns close to Chrome.
  - [Typography & Fonts](/docs/typography-and-fonts): Load fonts, route scripts across them, and style text.
  - [Images & emoji](/docs/load-images): Load and cache images, and render emoji.
  - [Output Formats](/docs/output-formats): Choose a raster format, set the pixel density, or emit vector SVG.
  - [Keyframe Animation](/docs/keyframe-animation): Animate scenes with CSS keyframes and render them as GIFs, WebP, APNG, or video frames.
  - [Visual Effects](/docs/visual-effects): Aurora meshes, neon CRT, chrome type, halftone, and dithering with plain CSS.
  - [Performance & Optimization](/docs/performance-and-optimization): Best practices for building high-performance rendering pipelines with Takumi.
  - Upgrade
    - [Upgrade to v2](/docs/upgrade/v2): Walks through the breaking changes in v2 and how to upgrade from v1.
    - [Upgrade to v1](/docs/upgrade/v1): Walks through what's new in v1 and how to upgrade from v0.

  - ** Reference **
  - [Reference](/docs/reference): List of everything in Takumi.
  - [ImageResponse](/docs/image-response): Serve rendered images over HTTP with a next/og-compatible Response.
  - [Helpers](/docs/helpers): Build inputs and load images without the renderer.
  - [The measure() API](/docs/measure-api): Measure the node layout without rendering it.
  - [Troubleshooting](/docs/troubleshooting): Every error Takumi prints, what to do about it, and why it happens.

  - ** Showcase **
  - [Templates](/docs/templates): A collection of ready-to-use templates for Takumi.