Upgrade to v1

v1 is the first stable release. The public API is locked: v1.x releases stay backward compatible under semver.

Install

npm i takumi-js@1

Breaking changes at a glance

Change	Package	Migration
`display` defaults to `inline`	templates	Add `display: flex` to flex containers
Runtime auto-detection	`takumi-js`	Import from `takumi-js/response`
`emoji` option	`takumi-js`	Opt into `from-font` if needed
Lowercase image formats	`@takumi-rs/core`	`"WebP"` -> `"webp"`
`putPersistentImage()` takes `ImageSource`	`@takumi-rs/core`	Pass `{ src, data }`
Deprecated exports removed	`@takumi-rs/core`	Switch to non-deprecated APIs
`RenderOptions::builder()`	Rust	Replace `RenderOptionsBuilder`
`Viewport` constructor	Rust	Use `Viewport::new(...)`
Removed Rust APIs	Rust	See Removed Rust APIs

Templates

`display` defaults to `inline`

Early Takumi defaulted display to flex. v1 defaults to inline to match the CSS specification and keep LLM-generated components correct.

Add display: flex (or the flex Tailwind class) to every container that needs flexbox.

<div
  style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  }}
>
  {/* Your content here */}
</div>

JavaScript / TypeScript

Unified runtime detection and fallback

takumi-js now detects the right bindings for your environment (Node.js, Workers, and others). You no longer import NAPI (native Node addon) or WASM (WebAssembly) bindings directly.

import { ImageResponse } from "@takumi-rs/image-response"; 
import { ImageResponse } from "takumi-js/response";

`emoji` option for dynamic emoji loading

To match Next.js's ImageResponse API, takumi-js adds an emoji option for a custom emoji provider.

It defaults to twemoji. To source emoji glyphs from a font, set it to from-font and include an emoji font in fonts.

See Images & emoji.

import { ImageResponse } from "takumi-js/response";
import notoEmojiFont from "@fontsource/noto-color-emoji/files/noto-color-emoji-emoji-400-normal.woff2";

export function GET() {
  return new ImageResponse(<div>It works! 😀</div>, {
    emoji: "from-font", 
    fonts: [
      {
        name: "Noto Color Emoji",
        data: notoEmojiFont,
      },
    ],
  });
}

Lowercase image formats

Image format options in @takumi-rs/core now take lowercase strings only.

const image = await renderer.render(node, {
  format: "WebP"
  format: "webp"
});

`putPersistentImage()` takes `ImageSource`

renderer.putPersistentImage() no longer accepts a raw Buffer as the second argument. Pass an ImageSource object instead.

const data = await readFile("foo.png");

await renderer.putPersistentImage("foo.png", data); 
await renderer.putPersistentImage({ src: "foo.png", data });

In 2.x this method is gone. Supply images through the images render option instead.

let options = RenderOptionsBuilder::default().build().unwrap(); 
let options = RenderOptions::builder().build();

`Viewport` constructor parameter change

Viewport no longer implements From<(u32, u32)>. Use the explicit constructor.

let viewport = (800_u32, 600_u32).into(); 
let viewport = Viewport::new((800, 600));

Removed Rust APIs

Removed	Replacement
`parse_svg_str(data)`	`SvgSource::from_str(data)`
`FetchTaskCollection`	`Node::resource_urls` / `Style::resource_urls`, then feed URLs back to the renderer
`SpacePair::from_reversed_pair`	Construct `SpacePair` with values in order
`TakumiError` re-export	`takumi::prelude::Error` (or `takumi_core::error::Error`)
`detailed_css_error` feature	Detailed CSS errors always on; no feature flag

use takumi::TakumiError; 
use takumi::prelude::Error;

Full changelog

For every change, see the releases.