Convert HTML and CSS into SVG images with the Satori library.
npx skills add https://github.com/vercel-labs/vercel-plugin --skill satori
Please help me install this Agent Skill. Skill: satori Source: https://github.com/vercel-labs/vercel-plugin/tree/main/skills/satori Command: npx skills add https://github.com/vercel-labs/vercel-plugin --skill satori
This Skill simplifies the creation of dynamic Open Graph (OG) images, commonly used for social media previews, by converting HTML and CSS into SVG format.
Use the satori skill to generate an OG image with the title 'Welcome to My Blog'.
High-intent search queries and answers about installing and using this skill.
Yes, Satori integrates seamlessly with Next.js App Router and convention-based image routes. This integration allows you to automatically generate metadata and serve dynamic OG images using serverless edge functions.
When generating SVG images from HTML with Satori, you need to handle explicit font loading. Because SVG rendering requires specific font data, you must explicitly load and provide the fonts to ensure the dynamic OG image text renders correctly.
To generate dynamic OG images from HTML and CSS, you can use Satori to convert your markup and styles into SVG format. This approach allows you to render personalized social media previews dynamically for blog posts or product pages.
Satori supports dynamic content rendering, allowing you to pass dynamic data into your HTML templates. This capability makes it ideal for creating unique Open Graph images for user profiles, product pages, or blog posts.
NagyViktConvert JSX-based HTML and CSS into SVG or PNG images for Open Graph metadata.
vercelConvert HTML/CSS into SVG Open Graph images for Next.js edge runtimes.
george11642Execute SQL, apply migrations, and deploy edge functions via Supabase MCP tools.
junwonpConvert JSX-like HTML and CSS into SVG for Open Graph images.
