Migrate Satori / next/og to Takumi
Upgrade instructions. Replace Satori layout limitations with Takumi advanced features.
Feature Differences
| Feature |
Satori |
Takumi |
| Primary Output |
SVG only (needs resvg wrapper) |
PNG, JPEG, WebP, SVG, GIF, APNG |
| CSS Layout |
Flexbox only |
Flexbox, CSS Grid, block, inline, float |
| Advanced CSS |
✗ |
Grid, pseudo-elements, backdrop-filter, clip-path, text-fit, offset-path |
| Fonts |
Manual Buffer array |
System fonts, URLs, local paths, Buffers |
| Tailwind |
Limited / wrapper needed |
Native Tailwind v4 (tw/class, arbitrary values) |
Code Changes
Next.js ImageResponse
Before:
import { ImageResponse } from "next/og";
// ... returns new ImageResponse(...)
After:
import { ImageResponse } from "takumi-js/response";
// ... returns new ImageResponse(...)
Direct Rendering
Before:
import satori from "satori";
import { Resvg } from "@resvg/resvg-js";
const svg = await satori(element, { width, height, fonts: [{ name: "A", data: buf }] });
const png = new Resvg(svg).render().asPng();
After:
import { render } from "takumi-js";
const png = await render(element, {
width,
height,
fonts: [{ name: "A", url: "https://url.woff2" }],
});
Upgrades to Apply
- CSS Grid: Convert complex flex layouts to
tw="grid grid-cols-12 gap-4".
- CSS Variables & Custom Selectors: Embedded
<style> rules, :is(), :where(), ::before, ::after work natively.
- Auto Font Handling: Drop manual loading scripts. Rely on system fonts or CDN URLs.
- Advanced Visuals: Use
backdrop-filter, clip-path, and blend modes directly in styling.
1---2name: migrate-from-satori3description: Guides and automated instructions for migrating from Vercel's Satori, next/og, or @vercel/og to Takumi.4---56# Migrate Satori / next/og to Takumi78Upgrade instructions. Replace Satori layout limitations with Takumi advanced features.910## Feature Differences1112| Feature | Satori | Takumi |13| -------------- | -------------------------------- | ------------------------------------------------------------------------ |14| Primary Output | SVG only (needs `resvg` wrapper) | PNG, JPEG, WebP, SVG, GIF, APNG |15| CSS Layout | Flexbox only | Flexbox, CSS Grid, block, inline, float |16| Advanced CSS | ✗ | Grid, pseudo-elements, backdrop-filter, clip-path, text-fit, offset-path |17| Fonts | Manual Buffer array | System fonts, URLs, local paths, Buffers |18| Tailwind | Limited / wrapper needed | Native Tailwind v4 (`tw`/`class`, arbitrary values) |1920## Code Changes2122### Next.js ImageResponse2324Before:2526```tsx27import { ImageResponse } from "next/og";28// ... returns new ImageResponse(...)29```3031After:3233```tsx34import { ImageResponse } from "takumi-js/response";35// ... returns new ImageResponse(...)36```3738### Direct Rendering3940Before:4142```typescript43import satori from "satori";44import { Resvg } from "@resvg/resvg-js";45const svg = await satori(element, { width, height, fonts: [{ name: "A", data: buf }] });46const png = new Resvg(svg).render().asPng();47```4849After:5051```typescript52import { render } from "takumi-js";53const png = await render(element, {54 width,55 height,56 fonts: [{ name: "A", url: "https://url.woff2" }],57});58```5960## Upgrades to Apply6162- **CSS Grid**: Convert complex flex layouts to `tw="grid grid-cols-12 gap-4"`.63- **CSS Variables & Custom Selectors**: Embedded `<style>` rules, `:is()`, `:where()`, `::before`, `::after` work natively.64- **Auto Font Handling**: Drop manual loading scripts. Rely on system fonts or CDN URLs.65- **Advanced Visuals**: Use `backdrop-filter`, `clip-path`, and blend modes directly in styling.
kane50613