Upgrade to v1

After over half year of development, Takumi is finally ready to reach its first stable release!

This means we've locked down the public API and are committed to maintaining backward compatibility for all v1.x releases.

Install

npm i takumi-js@1

What changed?

display defaults to inline

In the early stages, Takumi defaulted display to flex to simplify common layouts. However, to stay as close to the CSS specification as possible and ensure LLMs can produce correct components without guessing, we've changed the default to inline.

Verify your templates and explicitly add display: flex (or the flex Tailwind class) to containers where flexbox layout is intended.

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

Unified Runtime Dectection & Fallback

For better DX, takumi-js now automatically detects the best bindings for your environment Node.js, Workers, etc. That means you no longer need to worry about importing NAPI or WASM bindings.

emoji Option for Dynamic Emojis Loading

To improve the compability with Next.js's ImageResponse API, takumi-js now supports an emoji option that allows you to specify a custom emoji provider.

By default it's set to from-font, which expects you to load an emoji font (e.g. Noto Color Emoji).

Read more in Render Emojis section.

export function GET() {
  return new ImageResponse(<div>It works! 😀</div>, {
    emoji: "twemoji", 
  });
}

Lowercase Image Formats

To be more consistent with the CSS ecosystem and web standards, all image format options in takumi-js/node and takumi-js now use lowercase strings only.

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

More in Changelog!

For a more comprehensive list of changes, please refer to the changelog in releases.