- Category
- Developer Tools
- Rank
- No. 2196Tools index
Previous survey · No. 2184 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- wevm
- GitHub
- 39 stars
- Latest release
- hono-og@0.0.29
- Date
About
Fork of @vercel/og to generate Open Graph images with Hono JSX. Lightweight image generation for Hono apps.
What it does
Hono OG turns a JSX layout into an HTTP response containing SVG or PNG image data. It converts Hono elements into React-shaped nodes, renders SVG with Satori, and uses WebAssembly-backed Resvg for PNG output.
Why it's ranked here
The design is focused and practical: route handlers can return image responses directly, while headers, status values, dimensions, fonts, emoji sources, and output format remain configurable. Dedicated Vercel and worker adapters broaden its usefulness without complicating the basic interface.
What's good
Rendering streams through the standard response model, so it fits naturally into Hono routes. PNG and SVG share one layout pipeline. Production responses receive long-lived immutable cache headers by default, while debug mode disables caching. Tests cover both formats and the bounded asset cache.
Tradeoffs
Default rendering loads Noto Sans through a remote font source, and emoji rendering can fetch assets from external CDNs. PNG output initializes WebAssembly before rendering. The PNG test confirms that bytes exist but does not verify their visual correctness, while only SVG receives snapshot comparison.
How to use it well
Choose it for Hono endpoints that generate social cards or other fixed-size images from JSX. Supply fonts and explicit dimensions when predictable output matters, then use debug mode during iteration. It does not provide a design editor or an arbitrary bitmap-processing workflow.
Technical notes+
src/response.ts builds a ReadableStream-backed Response, initializes WASM, calls elementToSvg, optionally passes SVG through svgToPng, and selects src/exports/vercel.ts when VERCEL_URL exists. src/utils/elementToSvg.ts uses satori/wasm with 1200 by 630 defaults, Noto Sans, and dynamic emoji assets. src/utils/svgToPng.ts uses @resvg/resvg-wasm with a default output width of 630. src/utils/toReactNode.ts recursively converts Hono JSX children, fragments, and components into React-like nodes. src/exports/worker.ts adapts workers-og. src/response.test.tsx covers PNG byte production and an SVG snapshot; src/utils/lru.test.ts verifies bounded eviction.
Observed
- Primary language
- TypeScript, including TSX tests and examples
- Install surface
- JavaScript package imported as hono-og
- Interface
- Library returning standard HTTP Response objects with PNG or SVG bodies
- Rendering stack
- Satori WebAssembly for SVG and Resvg WebAssembly for PNG
- Platform adapters
- Dedicated integrations for Vercel OG and workers-og
- Repository structure
- Tests and benchmarks are colocated with source files and use Vitest
Read from README.md, package.json, src/index.ts, src/response.ts, src/response.test.tsx, src/response.bench.tsx, src/utils/lru.ts, src/utils/emoji.ts, src/exports/vercel.ts, src/exports/worker.ts, src/utils/lru.test.ts, src/utils/svgToPng.ts, src/utils/toReactNode.ts, src/utils/elementToSvg.ts, src/exports/vercel.test.tsx.
What it can do
Generate Open Graph images
Hono JSX components and styling → Open Graph image files
Create social media preview images
Text content and layout specifications → Social media-optimized image previews
Render JSX components to images
Hono JSX component definitions → Static image files
Generate lightweight images for web applications
Image generation parameters and content → Optimized web images
Create dynamic meta images
Dynamic content and template configurations → Customized meta tag images
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.