# Migrate From Puppeteer
> Guides and automated instructions for migrating from Puppeteer, Playwright, or node-html-to-image to Takumi.
- Skill: `kane50613/migrate-from-puppeteer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kane50613/migrate-from-puppeteer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kane50613/migrate-from-puppeteer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kane50613 (https://skillmd.com/u/kane50613)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kane50613/migrate-from-puppeteer
---
# Migrate Puppeteer / Playwright to Takumi
Replace resource-heavy headless browser screenshots with native Takumi rendering.
## Key Advantages
- **Resources**: 300MB+ RAM vs single function call.
- **Cold Starts**: Milliseconds vs seconds.
- **Edge Support**: Runs in Cloudflare Workers/Edge (WASM). Puppeteer cannot.
- **Packaging**: No Chromium binary size issues in serverless.
## Code Changes
### Static Image Generation
Before (Puppeteer):
```typescript
import puppeteer from "puppeteer";
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630 });
await page.setContent(`Hello
`);
const buffer = await page.screenshot({ type: "png" });
await browser.close();
```
After (Takumi):
```typescript
import { render } from "takumi-js";
const buffer = await render(
Hello
,
{ width: 1200, height: 630 }
);
```
### Animation (GIF / WebP)
Before:
Capturing multiple page frames in a loop and encoding manually.
After:
```typescript
import { renderAnimation } from "takumi-js";
const buffer = await renderAnimation({
width: 400,
height: 400,
fps: 30,
format: "webp",
scenes: [
{
durationMs: 1000,
node: ,
},
],
});
```
## Migration Constraints
- **No Client JS**: Takumi does not execute `