[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-satori":3,"mdc-ipv8k6-key":38,"related-repo-openai-satori":3712,"related-org-openai-satori":3832},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":27,"repoUrl":28,"updatedAt":29,"license":30,"forks":31,"topics":32,"repo":33,"sourceUrl":36,"mdContent":37},"satori","generate dynamic SVG images with Satori","Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,21,24],{"name":13,"slug":14,"type":15},"Vercel","vercel","tag",{"name":17,"slug":18,"type":15},"Next.js","next-js",{"name":20,"slug":4,"type":15},"Satori",{"name":22,"slug":23,"type":15},"SVG","svg",{"name":25,"slug":26,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-04-06T18:40:29.005641",null,465,[],{"repoUrl":28,"stars":27,"forks":31,"topics":34,"description":35},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fvercel\u002Fskills\u002Fsatori","---\nname: satori\ndescription: Expert guidance for Satori — Vercel's library that converts HTML and CSS to SVG, commonly used to generate dynamic OG images for Next.js and other frameworks.\nmetadata:\n  priority: 4\n  docs:\n    - \"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori\"\n    - \"https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fapi-reference\u002Ffile-conventions\u002Fmetadata\u002Fopengraph-image\"\n  sitemap: \"https:\u002F\u002Fnextjs.org\u002Fsitemap.xml\"\n  pathPatterns:\n    - 'app\u002F**\u002Fog\u002F**'\n    - 'app\u002F**\u002Fog.*'\n    - 'app\u002F**\u002Fopengraph-image.*'\n    - 'app\u002F**\u002Ftwitter-image.*'\n    - 'src\u002Fapp\u002F**\u002Fog\u002F**'\n    - 'src\u002Fapp\u002F**\u002Fog.*'\n    - 'src\u002Fapp\u002F**\u002Fopengraph-image.*'\n    - 'src\u002Fapp\u002F**\u002Ftwitter-image.*'\n    - 'pages\u002Fapi\u002Fog.*'\n    - 'pages\u002Fapi\u002Fog\u002F**'\n    - 'src\u002Fpages\u002Fapi\u002Fog.*'\n    - 'src\u002Fpages\u002Fapi\u002Fog\u002F**'\n    - 'apps\u002F*\u002Fapp\u002F**\u002Fog\u002F**'\n    - 'apps\u002F*\u002Fapp\u002F**\u002Fog.*'\n    - 'apps\u002F*\u002Fapp\u002F**\u002Fopengraph-image.*'\n    - 'apps\u002F*\u002Fapp\u002F**\u002Ftwitter-image.*'\n  importPatterns:\n    - 'satori'\n    - 'satori\u002Fwasm'\n    - '@vercel\u002Fog'\n    - 'next\u002Fog'\n  bashPatterns:\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*\\bsatori\\b'\n    - '\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel\u002Fog\\b'\n    - '\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel\u002Fog\\b'\n    - '\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel\u002Fog\\b'\n    - '\\byarn\\s+add\\s+[^\\n]*@vercel\u002Fog\\b'\n---\n\n# Satori — HTML\u002FCSS to SVG for OG Images\n\nYou are an expert in Satori and `@vercel\u002Fog` for generating dynamic Open Graph images.\n\n## Overview\n\n**Satori** converts JSX-like HTML and CSS into SVG. **`@vercel\u002Fog`** wraps Satori with an `ImageResponse` class that renders the SVG to PNG, designed to run in Vercel Edge Functions and other edge runtimes.\n\n## Installation\n\n```bash\n# For Next.js projects (recommended — includes Satori + PNG rendering)\nnpm install @vercel\u002Fog\n\n# Standalone Satori (SVG output only)\nnpm install satori\n```\n\n## Next.js App Router — OG Image Route (Recommended)\n\nNext.js has built-in OG image support via the `ImageResponse` re-exported from `next\u002Fog`:\n\n```tsx\n\u002F\u002F app\u002Fog\u002Froute.tsx  OR  app\u002Fopengraph-image.tsx\nimport { ImageResponse } from 'next\u002Fog'\n\nexport const runtime = 'edge'\n\nexport async function GET(request: Request) {\n  return new ImageResponse(\n    (\n      \u003Cdiv\n        style={{\n          display: 'flex',\n          fontSize: 60,\n          color: 'white',\n          background: 'linear-gradient(to bottom, #1a1a2e, #16213e)',\n          width: '100%',\n          height: '100%',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Hello, OG Image!\n      \u003C\u002Fdiv>\n    ),\n    { width: 1200, height: 630 }\n  )\n}\n```\n\n## Convention-Based OG Images (Next.js 13.3+)\n\nPlace an `opengraph-image.tsx` or `twitter-image.tsx` file in any route segment:\n\n```tsx\n\u002F\u002F app\u002Fblog\u002F[slug]\u002Fopengraph-image.tsx\nimport { ImageResponse } from 'next\u002Fog'\n\nexport const alt = 'Blog post image'\nexport const size = { width: 1200, height: 630 }\nexport const contentType = 'image\u002Fpng'\nexport const runtime = 'edge'\n\nexport default async function Image({ params }: { params: { slug: string } }) {\n  const post = await getPost(params.slug)\n\n  return new ImageResponse(\n    (\n      \u003Cdiv\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: '100%',\n          height: '100%',\n          background: '#000',\n          color: '#fff',\n          fontSize: 48,\n        }}\n      >\n        \u003Cdiv>{post.title}\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    ),\n    { ...size }\n  )\n}\n```\n\nNext.js auto-generates the `\u003Cmeta property=\"og:image\">` tag for these files.\n\n## Standalone Satori (SVG Only)\n\n```ts\nimport satori from 'satori'\nimport { readFileSync } from 'fs'\n\nconst svg = await satori(\n  \u003Cdiv style={{ display: 'flex', color: 'black', fontSize: 40 }}>\n    Hello from Satori\n  \u003C\u002Fdiv>,\n  {\n    width: 1200,\n    height: 630,\n    fonts: [\n      {\n        name: 'Inter',\n        data: readFileSync('.\u002Ffonts\u002FInter-Regular.ttf'),\n        weight: 400,\n        style: 'normal',\n      },\n    ],\n  }\n)\n```\n\n## CSS Support and Limitations\n\nSatori uses a subset of CSS with Flexbox layout (Yoga engine):\n\n**Supported:**\n- `display: flex` (default — all elements are flex containers)\n- Flexbox properties: `flexDirection`, `alignItems`, `justifyContent`, `flexWrap`, `gap`\n- Box model: `width`, `height`, `padding`, `margin`, `border`, `borderRadius`\n- Typography: `fontSize`, `fontWeight`, `fontFamily`, `lineHeight`, `letterSpacing`, `textAlign`\n- Colors: `color`, `background`, `backgroundColor`, `opacity`\n- Backgrounds: `backgroundImage` (linear\u002Fradial gradients), `backgroundClip`\n- Shadows: `boxShadow`, `textShadow`\n- Transforms: `transform` (basic transforms)\n- Overflow: `overflow: hidden`\n- Position: `absolute`, `relative`\n- White space: `whiteSpace`, `wordBreak`, `textOverflow`\n\n**Not supported:**\n- `display: grid` — use nested flex containers instead\n- CSS animations or transitions\n- `position: fixed` or `sticky`\n- Pseudo-elements (`::before`, `::after`)\n- Media queries\n- CSS variables\n\n## Fonts\n\nFonts must be loaded explicitly — there are no default system fonts:\n\n```tsx\n\u002F\u002F Load font in edge runtime\nconst font = fetch(new URL('.\u002FInter-Bold.ttf', import.meta.url)).then(\n  (res) => res.arrayBuffer()\n)\n\nexport async function GET() {\n  const fontData = await font\n\n  return new ImageResponse(\n    (\u003Cdiv style={{ fontFamily: 'Inter' }}>Hello\u003C\u002Fdiv>),\n    {\n      width: 1200,\n      height: 630,\n      fonts: [{ name: 'Inter', data: fontData, weight: 700, style: 'normal' }],\n    }\n  )\n}\n```\n\nFor Google Fonts, fetch directly from the CDN or bundle the `.ttf` file.\n\n## Dynamic Content from URL Parameters\n\n```tsx\nexport async function GET(request: Request) {\n  const { searchParams } = new URL(request.url)\n  const title = searchParams.get('title') ?? 'Default Title'\n\n  return new ImageResponse(\n    (\u003Cdiv style={{ display: 'flex', fontSize: 60 }}>{title}\u003C\u002Fdiv>),\n    { width: 1200, height: 630 }\n  )\n}\n```\n\n## Images in OG\n\nUse `\u003Cimg>` with absolute URLs:\n\n```tsx\n\u003Cimg\n  src=\"https:\u002F\u002Fexample.com\u002Favatar.png\"\n  width={100}\n  height={100}\n  style={{ borderRadius: '50%' }}\n\u002F>\n```\n\nFor local images, convert to base64 or use absolute deployment URLs.\n\n## Key Patterns\n\n1. **Use `next\u002Fog` in Next.js projects** — it re-exports `ImageResponse` with built-in optimizations\n2. **Always set `runtime = 'edge'`** — Satori and `@vercel\u002Fog` are designed for edge runtimes\n3. **Use `display: 'flex'` everywhere** — Satori defaults to flex layout, no block or grid support\n4. **Load fonts explicitly** — no system fonts are available; bundle `.ttf`\u002F`.woff` files or fetch from CDN\n5. **Standard OG dimensions are 1200×630** — this is the most widely supported size\n6. **Use convention files for automatic `\u003Cmeta>` tags** — `opengraph-image.tsx` and `twitter-image.tsx`\n7. **Inline styles only** — Satori does not support external CSS or CSS-in-JS libraries\n\n## Official Resources\n\n- [Satori GitHub](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori)\n- [Vercel OG Image Generation](https:\u002F\u002Fvercel.com\u002Fdocs\u002Ffunctions\u002Fog-image-generation)\n- [Next.js Metadata — OG Images](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fapi-reference\u002Ffile-conventions\u002Fmetadata\u002Fopengraph-image)\n- [Satori Playground](https:\u002F\u002Fog-playground.vercel.app)\n",{"data":39,"body":76},{"name":4,"description":6,"metadata":40},{"priority":41,"docs":42,"sitemap":45,"pathPatterns":46,"importPatterns":63,"bashPatterns":67},4,[43,44],"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fsatori","https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fapi-reference\u002Ffile-conventions\u002Fmetadata\u002Fopengraph-image","https:\u002F\u002Fnextjs.org\u002Fsitemap.xml",[47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62],"app\u002F**\u002Fog\u002F**","app\u002F**\u002Fog.*","app\u002F**\u002Fopengraph-image.*","app\u002F**\u002Ftwitter-image.*","src\u002Fapp\u002F**\u002Fog\u002F**","src\u002Fapp\u002F**\u002Fog.*","src\u002Fapp\u002F**\u002Fopengraph-image.*","src\u002Fapp\u002F**\u002Ftwitter-image.*","pages\u002Fapi\u002Fog.*","pages\u002Fapi\u002Fog\u002F**","src\u002Fpages\u002Fapi\u002Fog.*","src\u002Fpages\u002Fapi\u002Fog\u002F**","apps\u002F*\u002Fapp\u002F**\u002Fog\u002F**","apps\u002F*\u002Fapp\u002F**\u002Fog.*","apps\u002F*\u002Fapp\u002F**\u002Fopengraph-image.*","apps\u002F*\u002Fapp\u002F**\u002Ftwitter-image.*",[4,64,65,66],"satori\u002Fwasm","@vercel\u002Fog","next\u002Fog",[68,69,70,71,72,73,74,75],"\\bnpm\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*\\bsatori\\b","\\byarn\\s+add\\s+[^\\n]*\\bsatori\\b","\\bnpm\\s+(install|i|add)\\s+[^\\n]*@vercel\u002Fog\\b","\\bpnpm\\s+(install|i|add)\\s+[^\\n]*@vercel\u002Fog\\b","\\bbun\\s+(install|i|add)\\s+[^\\n]*@vercel\u002Fog\\b","\\byarn\\s+add\\s+[^\\n]*@vercel\u002Fog\\b",{"type":77,"children":78},"root",[79,88,102,109,137,143,222,228,247,832,838,859,1631,1644,1650,2102,2108,2113,2121,2405,2413,2477,2483,2488,2993,3006,3012,3350,3356,3369,3504,3509,3515,3657,3663,3706],{"type":80,"tag":81,"props":82,"children":84},"element","h1",{"id":83},"satori-htmlcss-to-svg-for-og-images",[85],{"type":86,"value":87},"text","Satori — HTML\u002FCSS to SVG for OG Images",{"type":80,"tag":89,"props":90,"children":91},"p",{},[92,94,100],{"type":86,"value":93},"You are an expert in Satori and ",{"type":80,"tag":95,"props":96,"children":98},"code",{"className":97},[],[99],{"type":86,"value":65},{"type":86,"value":101}," for generating dynamic Open Graph images.",{"type":80,"tag":103,"props":104,"children":106},"h2",{"id":105},"overview",[107],{"type":86,"value":108},"Overview",{"type":80,"tag":89,"props":110,"children":111},{},[112,117,119,127,129,135],{"type":80,"tag":113,"props":114,"children":115},"strong",{},[116],{"type":86,"value":20},{"type":86,"value":118}," converts JSX-like HTML and CSS into SVG. ",{"type":80,"tag":113,"props":120,"children":121},{},[122],{"type":80,"tag":95,"props":123,"children":125},{"className":124},[],[126],{"type":86,"value":65},{"type":86,"value":128}," wraps Satori with an ",{"type":80,"tag":95,"props":130,"children":132},{"className":131},[],[133],{"type":86,"value":134},"ImageResponse",{"type":86,"value":136}," class that renders the SVG to PNG, designed to run in Vercel Edge Functions and other edge runtimes.",{"type":80,"tag":103,"props":138,"children":140},{"id":139},"installation",[141],{"type":86,"value":142},"Installation",{"type":80,"tag":144,"props":145,"children":150},"pre",{"className":146,"code":147,"language":148,"meta":149,"style":149},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# For Next.js projects (recommended — includes Satori + PNG rendering)\nnpm install @vercel\u002Fog\n\n# Standalone Satori (SVG output only)\nnpm install satori\n","bash","",[151],{"type":80,"tag":95,"props":152,"children":153},{"__ignoreMap":149},[154,166,187,197,205],{"type":80,"tag":155,"props":156,"children":159},"span",{"class":157,"line":158},"line",1,[160],{"type":80,"tag":155,"props":161,"children":163},{"style":162},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[164],{"type":86,"value":165},"# For Next.js projects (recommended — includes Satori + PNG rendering)\n",{"type":80,"tag":155,"props":167,"children":169},{"class":157,"line":168},2,[170,176,182],{"type":80,"tag":155,"props":171,"children":173},{"style":172},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[174],{"type":86,"value":175},"npm",{"type":80,"tag":155,"props":177,"children":179},{"style":178},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[180],{"type":86,"value":181}," install",{"type":80,"tag":155,"props":183,"children":184},{"style":178},[185],{"type":86,"value":186}," @vercel\u002Fog\n",{"type":80,"tag":155,"props":188,"children":190},{"class":157,"line":189},3,[191],{"type":80,"tag":155,"props":192,"children":194},{"emptyLinePlaceholder":193},true,[195],{"type":86,"value":196},"\n",{"type":80,"tag":155,"props":198,"children":199},{"class":157,"line":41},[200],{"type":80,"tag":155,"props":201,"children":202},{"style":162},[203],{"type":86,"value":204},"# Standalone Satori (SVG output only)\n",{"type":80,"tag":155,"props":206,"children":208},{"class":157,"line":207},5,[209,213,217],{"type":80,"tag":155,"props":210,"children":211},{"style":172},[212],{"type":86,"value":175},{"type":80,"tag":155,"props":214,"children":215},{"style":178},[216],{"type":86,"value":181},{"type":80,"tag":155,"props":218,"children":219},{"style":178},[220],{"type":86,"value":221}," satori\n",{"type":80,"tag":103,"props":223,"children":225},{"id":224},"nextjs-app-router-og-image-route-recommended",[226],{"type":86,"value":227},"Next.js App Router — OG Image Route (Recommended)",{"type":80,"tag":89,"props":229,"children":230},{},[231,233,238,240,245],{"type":86,"value":232},"Next.js has built-in OG image support via the ",{"type":80,"tag":95,"props":234,"children":236},{"className":235},[],[237],{"type":86,"value":134},{"type":86,"value":239}," re-exported from ",{"type":80,"tag":95,"props":241,"children":243},{"className":242},[],[244],{"type":86,"value":66},{"type":86,"value":246},":",{"type":80,"tag":144,"props":248,"children":252},{"className":249,"code":250,"language":251,"meta":149,"style":149},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F app\u002Fog\u002Froute.tsx  OR  app\u002Fopengraph-image.tsx\nimport { ImageResponse } from 'next\u002Fog'\n\nexport const runtime = 'edge'\n\nexport async function GET(request: Request) {\n  return new ImageResponse(\n    (\n      \u003Cdiv\n        style={{\n          display: 'flex',\n          fontSize: 60,\n          color: 'white',\n          background: 'linear-gradient(to bottom, #1a1a2e, #16213e)',\n          width: '100%',\n          height: '100%',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Hello, OG Image!\n      \u003C\u002Fdiv>\n    ),\n    { width: 1200, height: 630 }\n  )\n}\n","tsx",[253],{"type":80,"tag":95,"props":254,"children":255},{"__ignoreMap":149},[256,264,309,316,353,360,414,438,447,461,475,507,530,560,590,620,649,679,708,717,726,735,754,767,814,823],{"type":80,"tag":155,"props":257,"children":258},{"class":157,"line":158},[259],{"type":80,"tag":155,"props":260,"children":261},{"style":162},[262],{"type":86,"value":263},"\u002F\u002F app\u002Fog\u002Froute.tsx  OR  app\u002Fopengraph-image.tsx\n",{"type":80,"tag":155,"props":265,"children":266},{"class":157,"line":168},[267,273,279,285,290,295,300,304],{"type":80,"tag":155,"props":268,"children":270},{"style":269},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[271],{"type":86,"value":272},"import",{"type":80,"tag":155,"props":274,"children":276},{"style":275},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[277],{"type":86,"value":278}," {",{"type":80,"tag":155,"props":280,"children":282},{"style":281},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[283],{"type":86,"value":284}," ImageResponse",{"type":80,"tag":155,"props":286,"children":287},{"style":275},[288],{"type":86,"value":289}," }",{"type":80,"tag":155,"props":291,"children":292},{"style":269},[293],{"type":86,"value":294}," from",{"type":80,"tag":155,"props":296,"children":297},{"style":275},[298],{"type":86,"value":299}," '",{"type":80,"tag":155,"props":301,"children":302},{"style":178},[303],{"type":86,"value":66},{"type":80,"tag":155,"props":305,"children":306},{"style":275},[307],{"type":86,"value":308},"'\n",{"type":80,"tag":155,"props":310,"children":311},{"class":157,"line":189},[312],{"type":80,"tag":155,"props":313,"children":314},{"emptyLinePlaceholder":193},[315],{"type":86,"value":196},{"type":80,"tag":155,"props":317,"children":318},{"class":157,"line":41},[319,324,330,335,340,344,349],{"type":80,"tag":155,"props":320,"children":321},{"style":269},[322],{"type":86,"value":323},"export",{"type":80,"tag":155,"props":325,"children":327},{"style":326},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[328],{"type":86,"value":329}," const",{"type":80,"tag":155,"props":331,"children":332},{"style":281},[333],{"type":86,"value":334}," runtime ",{"type":80,"tag":155,"props":336,"children":337},{"style":275},[338],{"type":86,"value":339},"=",{"type":80,"tag":155,"props":341,"children":342},{"style":275},[343],{"type":86,"value":299},{"type":80,"tag":155,"props":345,"children":346},{"style":178},[347],{"type":86,"value":348},"edge",{"type":80,"tag":155,"props":350,"children":351},{"style":275},[352],{"type":86,"value":308},{"type":80,"tag":155,"props":354,"children":355},{"class":157,"line":207},[356],{"type":80,"tag":155,"props":357,"children":358},{"emptyLinePlaceholder":193},[359],{"type":86,"value":196},{"type":80,"tag":155,"props":361,"children":363},{"class":157,"line":362},6,[364,368,373,378,384,389,395,399,404,409],{"type":80,"tag":155,"props":365,"children":366},{"style":269},[367],{"type":86,"value":323},{"type":80,"tag":155,"props":369,"children":370},{"style":326},[371],{"type":86,"value":372}," async",{"type":80,"tag":155,"props":374,"children":375},{"style":326},[376],{"type":86,"value":377}," function",{"type":80,"tag":155,"props":379,"children":381},{"style":380},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[382],{"type":86,"value":383}," GET",{"type":80,"tag":155,"props":385,"children":386},{"style":275},[387],{"type":86,"value":388},"(",{"type":80,"tag":155,"props":390,"children":392},{"style":391},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[393],{"type":86,"value":394},"request",{"type":80,"tag":155,"props":396,"children":397},{"style":275},[398],{"type":86,"value":246},{"type":80,"tag":155,"props":400,"children":401},{"style":172},[402],{"type":86,"value":403}," Request",{"type":80,"tag":155,"props":405,"children":406},{"style":275},[407],{"type":86,"value":408},")",{"type":80,"tag":155,"props":410,"children":411},{"style":275},[412],{"type":86,"value":413}," {\n",{"type":80,"tag":155,"props":415,"children":417},{"class":157,"line":416},7,[418,423,428,432],{"type":80,"tag":155,"props":419,"children":420},{"style":269},[421],{"type":86,"value":422},"  return",{"type":80,"tag":155,"props":424,"children":425},{"style":275},[426],{"type":86,"value":427}," new",{"type":80,"tag":155,"props":429,"children":430},{"style":380},[431],{"type":86,"value":284},{"type":80,"tag":155,"props":433,"children":435},{"style":434},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[436],{"type":86,"value":437},"(\n",{"type":80,"tag":155,"props":439,"children":441},{"class":157,"line":440},8,[442],{"type":80,"tag":155,"props":443,"children":444},{"style":434},[445],{"type":86,"value":446},"    (\n",{"type":80,"tag":155,"props":448,"children":450},{"class":157,"line":449},9,[451,456],{"type":80,"tag":155,"props":452,"children":453},{"style":275},[454],{"type":86,"value":455},"      \u003C",{"type":80,"tag":155,"props":457,"children":458},{"style":434},[459],{"type":86,"value":460},"div\n",{"type":80,"tag":155,"props":462,"children":464},{"class":157,"line":463},10,[465,470],{"type":80,"tag":155,"props":466,"children":467},{"style":326},[468],{"type":86,"value":469},"        style",{"type":80,"tag":155,"props":471,"children":472},{"style":275},[473],{"type":86,"value":474},"={{\n",{"type":80,"tag":155,"props":476,"children":478},{"class":157,"line":477},11,[479,484,488,492,497,502],{"type":80,"tag":155,"props":480,"children":481},{"style":434},[482],{"type":86,"value":483},"          display",{"type":80,"tag":155,"props":485,"children":486},{"style":275},[487],{"type":86,"value":246},{"type":80,"tag":155,"props":489,"children":490},{"style":275},[491],{"type":86,"value":299},{"type":80,"tag":155,"props":493,"children":494},{"style":178},[495],{"type":86,"value":496},"flex",{"type":80,"tag":155,"props":498,"children":499},{"style":275},[500],{"type":86,"value":501},"'",{"type":80,"tag":155,"props":503,"children":504},{"style":275},[505],{"type":86,"value":506},",\n",{"type":80,"tag":155,"props":508,"children":510},{"class":157,"line":509},12,[511,516,520,526],{"type":80,"tag":155,"props":512,"children":513},{"style":434},[514],{"type":86,"value":515},"          fontSize",{"type":80,"tag":155,"props":517,"children":518},{"style":275},[519],{"type":86,"value":246},{"type":80,"tag":155,"props":521,"children":523},{"style":522},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[524],{"type":86,"value":525}," 60",{"type":80,"tag":155,"props":527,"children":528},{"style":275},[529],{"type":86,"value":506},{"type":80,"tag":155,"props":531,"children":533},{"class":157,"line":532},13,[534,539,543,547,552,556],{"type":80,"tag":155,"props":535,"children":536},{"style":434},[537],{"type":86,"value":538},"          color",{"type":80,"tag":155,"props":540,"children":541},{"style":275},[542],{"type":86,"value":246},{"type":80,"tag":155,"props":544,"children":545},{"style":275},[546],{"type":86,"value":299},{"type":80,"tag":155,"props":548,"children":549},{"style":178},[550],{"type":86,"value":551},"white",{"type":80,"tag":155,"props":553,"children":554},{"style":275},[555],{"type":86,"value":501},{"type":80,"tag":155,"props":557,"children":558},{"style":275},[559],{"type":86,"value":506},{"type":80,"tag":155,"props":561,"children":563},{"class":157,"line":562},14,[564,569,573,577,582,586],{"type":80,"tag":155,"props":565,"children":566},{"style":434},[567],{"type":86,"value":568},"          background",{"type":80,"tag":155,"props":570,"children":571},{"style":275},[572],{"type":86,"value":246},{"type":80,"tag":155,"props":574,"children":575},{"style":275},[576],{"type":86,"value":299},{"type":80,"tag":155,"props":578,"children":579},{"style":178},[580],{"type":86,"value":581},"linear-gradient(to bottom, #1a1a2e, #16213e)",{"type":80,"tag":155,"props":583,"children":584},{"style":275},[585],{"type":86,"value":501},{"type":80,"tag":155,"props":587,"children":588},{"style":275},[589],{"type":86,"value":506},{"type":80,"tag":155,"props":591,"children":593},{"class":157,"line":592},15,[594,599,603,607,612,616],{"type":80,"tag":155,"props":595,"children":596},{"style":434},[597],{"type":86,"value":598},"          width",{"type":80,"tag":155,"props":600,"children":601},{"style":275},[602],{"type":86,"value":246},{"type":80,"tag":155,"props":604,"children":605},{"style":275},[606],{"type":86,"value":299},{"type":80,"tag":155,"props":608,"children":609},{"style":178},[610],{"type":86,"value":611},"100%",{"type":80,"tag":155,"props":613,"children":614},{"style":275},[615],{"type":86,"value":501},{"type":80,"tag":155,"props":617,"children":618},{"style":275},[619],{"type":86,"value":506},{"type":80,"tag":155,"props":621,"children":623},{"class":157,"line":622},16,[624,629,633,637,641,645],{"type":80,"tag":155,"props":625,"children":626},{"style":434},[627],{"type":86,"value":628},"          height",{"type":80,"tag":155,"props":630,"children":631},{"style":275},[632],{"type":86,"value":246},{"type":80,"tag":155,"props":634,"children":635},{"style":275},[636],{"type":86,"value":299},{"type":80,"tag":155,"props":638,"children":639},{"style":178},[640],{"type":86,"value":611},{"type":80,"tag":155,"props":642,"children":643},{"style":275},[644],{"type":86,"value":501},{"type":80,"tag":155,"props":646,"children":647},{"style":275},[648],{"type":86,"value":506},{"type":80,"tag":155,"props":650,"children":652},{"class":157,"line":651},17,[653,658,662,666,671,675],{"type":80,"tag":155,"props":654,"children":655},{"style":434},[656],{"type":86,"value":657},"          alignItems",{"type":80,"tag":155,"props":659,"children":660},{"style":275},[661],{"type":86,"value":246},{"type":80,"tag":155,"props":663,"children":664},{"style":275},[665],{"type":86,"value":299},{"type":80,"tag":155,"props":667,"children":668},{"style":178},[669],{"type":86,"value":670},"center",{"type":80,"tag":155,"props":672,"children":673},{"style":275},[674],{"type":86,"value":501},{"type":80,"tag":155,"props":676,"children":677},{"style":275},[678],{"type":86,"value":506},{"type":80,"tag":155,"props":680,"children":682},{"class":157,"line":681},18,[683,688,692,696,700,704],{"type":80,"tag":155,"props":684,"children":685},{"style":434},[686],{"type":86,"value":687},"          justifyContent",{"type":80,"tag":155,"props":689,"children":690},{"style":275},[691],{"type":86,"value":246},{"type":80,"tag":155,"props":693,"children":694},{"style":275},[695],{"type":86,"value":299},{"type":80,"tag":155,"props":697,"children":698},{"style":178},[699],{"type":86,"value":670},{"type":80,"tag":155,"props":701,"children":702},{"style":275},[703],{"type":86,"value":501},{"type":80,"tag":155,"props":705,"children":706},{"style":275},[707],{"type":86,"value":506},{"type":80,"tag":155,"props":709,"children":711},{"class":157,"line":710},19,[712],{"type":80,"tag":155,"props":713,"children":714},{"style":275},[715],{"type":86,"value":716},"        }}\n",{"type":80,"tag":155,"props":718,"children":720},{"class":157,"line":719},20,[721],{"type":80,"tag":155,"props":722,"children":723},{"style":275},[724],{"type":86,"value":725},"      >\n",{"type":80,"tag":155,"props":727,"children":729},{"class":157,"line":728},21,[730],{"type":80,"tag":155,"props":731,"children":732},{"style":281},[733],{"type":86,"value":734},"        Hello, OG Image!\n",{"type":80,"tag":155,"props":736,"children":738},{"class":157,"line":737},22,[739,744,749],{"type":80,"tag":155,"props":740,"children":741},{"style":275},[742],{"type":86,"value":743},"      \u003C\u002F",{"type":80,"tag":155,"props":745,"children":746},{"style":434},[747],{"type":86,"value":748},"div",{"type":80,"tag":155,"props":750,"children":751},{"style":275},[752],{"type":86,"value":753},">\n",{"type":80,"tag":155,"props":755,"children":757},{"class":157,"line":756},23,[758,763],{"type":80,"tag":155,"props":759,"children":760},{"style":434},[761],{"type":86,"value":762},"    )",{"type":80,"tag":155,"props":764,"children":765},{"style":275},[766],{"type":86,"value":506},{"type":80,"tag":155,"props":768,"children":770},{"class":157,"line":769},24,[771,776,781,785,790,795,800,804,809],{"type":80,"tag":155,"props":772,"children":773},{"style":275},[774],{"type":86,"value":775},"    {",{"type":80,"tag":155,"props":777,"children":778},{"style":434},[779],{"type":86,"value":780}," width",{"type":80,"tag":155,"props":782,"children":783},{"style":275},[784],{"type":86,"value":246},{"type":80,"tag":155,"props":786,"children":787},{"style":522},[788],{"type":86,"value":789}," 1200",{"type":80,"tag":155,"props":791,"children":792},{"style":275},[793],{"type":86,"value":794},",",{"type":80,"tag":155,"props":796,"children":797},{"style":434},[798],{"type":86,"value":799}," height",{"type":80,"tag":155,"props":801,"children":802},{"style":275},[803],{"type":86,"value":246},{"type":80,"tag":155,"props":805,"children":806},{"style":522},[807],{"type":86,"value":808}," 630",{"type":80,"tag":155,"props":810,"children":811},{"style":275},[812],{"type":86,"value":813}," }\n",{"type":80,"tag":155,"props":815,"children":817},{"class":157,"line":816},25,[818],{"type":80,"tag":155,"props":819,"children":820},{"style":434},[821],{"type":86,"value":822},"  )\n",{"type":80,"tag":155,"props":824,"children":826},{"class":157,"line":825},26,[827],{"type":80,"tag":155,"props":828,"children":829},{"style":275},[830],{"type":86,"value":831},"}\n",{"type":80,"tag":103,"props":833,"children":835},{"id":834},"convention-based-og-images-nextjs-133",[836],{"type":86,"value":837},"Convention-Based OG Images (Next.js 13.3+)",{"type":80,"tag":89,"props":839,"children":840},{},[841,843,849,851,857],{"type":86,"value":842},"Place an ",{"type":80,"tag":95,"props":844,"children":846},{"className":845},[],[847],{"type":86,"value":848},"opengraph-image.tsx",{"type":86,"value":850}," or ",{"type":80,"tag":95,"props":852,"children":854},{"className":853},[],[855],{"type":86,"value":856},"twitter-image.tsx",{"type":86,"value":858}," file in any route segment:",{"type":80,"tag":144,"props":860,"children":862},{"className":249,"code":861,"language":251,"meta":149,"style":149},"\u002F\u002F app\u002Fblog\u002F[slug]\u002Fopengraph-image.tsx\nimport { ImageResponse } from 'next\u002Fog'\n\nexport const alt = 'Blog post image'\nexport const size = { width: 1200, height: 630 }\nexport const contentType = 'image\u002Fpng'\nexport const runtime = 'edge'\n\nexport default async function Image({ params }: { params: { slug: string } }) {\n  const post = await getPost(params.slug)\n\n  return new ImageResponse(\n    (\n      \u003Cdiv\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: '100%',\n          height: '100%',\n          background: '#000',\n          color: '#fff',\n          fontSize: 48,\n        }}\n      >\n        \u003Cdiv>{post.title}\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    ),\n    { ...size }\n  )\n}\n",[863],{"type":80,"tag":95,"props":864,"children":865},{"__ignoreMap":149},[866,874,909,916,949,1005,1038,1069,1076,1159,1211,1218,1237,1244,1255,1266,1293,1322,1349,1376,1403,1430,1458,1486,1506,1513,1520,1565,1581,1593,1615,1623],{"type":80,"tag":155,"props":867,"children":868},{"class":157,"line":158},[869],{"type":80,"tag":155,"props":870,"children":871},{"style":162},[872],{"type":86,"value":873},"\u002F\u002F app\u002Fblog\u002F[slug]\u002Fopengraph-image.tsx\n",{"type":80,"tag":155,"props":875,"children":876},{"class":157,"line":168},[877,881,885,889,893,897,901,905],{"type":80,"tag":155,"props":878,"children":879},{"style":269},[880],{"type":86,"value":272},{"type":80,"tag":155,"props":882,"children":883},{"style":275},[884],{"type":86,"value":278},{"type":80,"tag":155,"props":886,"children":887},{"style":281},[888],{"type":86,"value":284},{"type":80,"tag":155,"props":890,"children":891},{"style":275},[892],{"type":86,"value":289},{"type":80,"tag":155,"props":894,"children":895},{"style":269},[896],{"type":86,"value":294},{"type":80,"tag":155,"props":898,"children":899},{"style":275},[900],{"type":86,"value":299},{"type":80,"tag":155,"props":902,"children":903},{"style":178},[904],{"type":86,"value":66},{"type":80,"tag":155,"props":906,"children":907},{"style":275},[908],{"type":86,"value":308},{"type":80,"tag":155,"props":910,"children":911},{"class":157,"line":189},[912],{"type":80,"tag":155,"props":913,"children":914},{"emptyLinePlaceholder":193},[915],{"type":86,"value":196},{"type":80,"tag":155,"props":917,"children":918},{"class":157,"line":41},[919,923,927,932,936,940,945],{"type":80,"tag":155,"props":920,"children":921},{"style":269},[922],{"type":86,"value":323},{"type":80,"tag":155,"props":924,"children":925},{"style":326},[926],{"type":86,"value":329},{"type":80,"tag":155,"props":928,"children":929},{"style":281},[930],{"type":86,"value":931}," alt ",{"type":80,"tag":155,"props":933,"children":934},{"style":275},[935],{"type":86,"value":339},{"type":80,"tag":155,"props":937,"children":938},{"style":275},[939],{"type":86,"value":299},{"type":80,"tag":155,"props":941,"children":942},{"style":178},[943],{"type":86,"value":944},"Blog post image",{"type":80,"tag":155,"props":946,"children":947},{"style":275},[948],{"type":86,"value":308},{"type":80,"tag":155,"props":950,"children":951},{"class":157,"line":207},[952,956,960,965,969,973,977,981,985,989,993,997,1001],{"type":80,"tag":155,"props":953,"children":954},{"style":269},[955],{"type":86,"value":323},{"type":80,"tag":155,"props":957,"children":958},{"style":326},[959],{"type":86,"value":329},{"type":80,"tag":155,"props":961,"children":962},{"style":281},[963],{"type":86,"value":964}," size ",{"type":80,"tag":155,"props":966,"children":967},{"style":275},[968],{"type":86,"value":339},{"type":80,"tag":155,"props":970,"children":971},{"style":275},[972],{"type":86,"value":278},{"type":80,"tag":155,"props":974,"children":975},{"style":434},[976],{"type":86,"value":780},{"type":80,"tag":155,"props":978,"children":979},{"style":275},[980],{"type":86,"value":246},{"type":80,"tag":155,"props":982,"children":983},{"style":522},[984],{"type":86,"value":789},{"type":80,"tag":155,"props":986,"children":987},{"style":275},[988],{"type":86,"value":794},{"type":80,"tag":155,"props":990,"children":991},{"style":434},[992],{"type":86,"value":799},{"type":80,"tag":155,"props":994,"children":995},{"style":275},[996],{"type":86,"value":246},{"type":80,"tag":155,"props":998,"children":999},{"style":522},[1000],{"type":86,"value":808},{"type":80,"tag":155,"props":1002,"children":1003},{"style":275},[1004],{"type":86,"value":813},{"type":80,"tag":155,"props":1006,"children":1007},{"class":157,"line":362},[1008,1012,1016,1021,1025,1029,1034],{"type":80,"tag":155,"props":1009,"children":1010},{"style":269},[1011],{"type":86,"value":323},{"type":80,"tag":155,"props":1013,"children":1014},{"style":326},[1015],{"type":86,"value":329},{"type":80,"tag":155,"props":1017,"children":1018},{"style":281},[1019],{"type":86,"value":1020}," contentType ",{"type":80,"tag":155,"props":1022,"children":1023},{"style":275},[1024],{"type":86,"value":339},{"type":80,"tag":155,"props":1026,"children":1027},{"style":275},[1028],{"type":86,"value":299},{"type":80,"tag":155,"props":1030,"children":1031},{"style":178},[1032],{"type":86,"value":1033},"image\u002Fpng",{"type":80,"tag":155,"props":1035,"children":1036},{"style":275},[1037],{"type":86,"value":308},{"type":80,"tag":155,"props":1039,"children":1040},{"class":157,"line":416},[1041,1045,1049,1053,1057,1061,1065],{"type":80,"tag":155,"props":1042,"children":1043},{"style":269},[1044],{"type":86,"value":323},{"type":80,"tag":155,"props":1046,"children":1047},{"style":326},[1048],{"type":86,"value":329},{"type":80,"tag":155,"props":1050,"children":1051},{"style":281},[1052],{"type":86,"value":334},{"type":80,"tag":155,"props":1054,"children":1055},{"style":275},[1056],{"type":86,"value":339},{"type":80,"tag":155,"props":1058,"children":1059},{"style":275},[1060],{"type":86,"value":299},{"type":80,"tag":155,"props":1062,"children":1063},{"style":178},[1064],{"type":86,"value":348},{"type":80,"tag":155,"props":1066,"children":1067},{"style":275},[1068],{"type":86,"value":308},{"type":80,"tag":155,"props":1070,"children":1071},{"class":157,"line":440},[1072],{"type":80,"tag":155,"props":1073,"children":1074},{"emptyLinePlaceholder":193},[1075],{"type":86,"value":196},{"type":80,"tag":155,"props":1077,"children":1078},{"class":157,"line":449},[1079,1083,1088,1092,1096,1101,1106,1111,1116,1120,1124,1128,1132,1137,1141,1146,1150,1155],{"type":80,"tag":155,"props":1080,"children":1081},{"style":269},[1082],{"type":86,"value":323},{"type":80,"tag":155,"props":1084,"children":1085},{"style":269},[1086],{"type":86,"value":1087}," default",{"type":80,"tag":155,"props":1089,"children":1090},{"style":326},[1091],{"type":86,"value":372},{"type":80,"tag":155,"props":1093,"children":1094},{"style":326},[1095],{"type":86,"value":377},{"type":80,"tag":155,"props":1097,"children":1098},{"style":380},[1099],{"type":86,"value":1100}," Image",{"type":80,"tag":155,"props":1102,"children":1103},{"style":275},[1104],{"type":86,"value":1105},"({",{"type":80,"tag":155,"props":1107,"children":1108},{"style":391},[1109],{"type":86,"value":1110}," params",{"type":80,"tag":155,"props":1112,"children":1113},{"style":275},[1114],{"type":86,"value":1115}," }:",{"type":80,"tag":155,"props":1117,"children":1118},{"style":275},[1119],{"type":86,"value":278},{"type":80,"tag":155,"props":1121,"children":1122},{"style":434},[1123],{"type":86,"value":1110},{"type":80,"tag":155,"props":1125,"children":1126},{"style":275},[1127],{"type":86,"value":246},{"type":80,"tag":155,"props":1129,"children":1130},{"style":275},[1131],{"type":86,"value":278},{"type":80,"tag":155,"props":1133,"children":1134},{"style":434},[1135],{"type":86,"value":1136}," slug",{"type":80,"tag":155,"props":1138,"children":1139},{"style":275},[1140],{"type":86,"value":246},{"type":80,"tag":155,"props":1142,"children":1143},{"style":172},[1144],{"type":86,"value":1145}," string",{"type":80,"tag":155,"props":1147,"children":1148},{"style":275},[1149],{"type":86,"value":289},{"type":80,"tag":155,"props":1151,"children":1152},{"style":275},[1153],{"type":86,"value":1154}," })",{"type":80,"tag":155,"props":1156,"children":1157},{"style":275},[1158],{"type":86,"value":413},{"type":80,"tag":155,"props":1160,"children":1161},{"class":157,"line":463},[1162,1167,1172,1177,1182,1187,1191,1196,1201,1206],{"type":80,"tag":155,"props":1163,"children":1164},{"style":326},[1165],{"type":86,"value":1166},"  const",{"type":80,"tag":155,"props":1168,"children":1169},{"style":281},[1170],{"type":86,"value":1171}," post",{"type":80,"tag":155,"props":1173,"children":1174},{"style":275},[1175],{"type":86,"value":1176}," =",{"type":80,"tag":155,"props":1178,"children":1179},{"style":269},[1180],{"type":86,"value":1181}," await",{"type":80,"tag":155,"props":1183,"children":1184},{"style":380},[1185],{"type":86,"value":1186}," getPost",{"type":80,"tag":155,"props":1188,"children":1189},{"style":434},[1190],{"type":86,"value":388},{"type":80,"tag":155,"props":1192,"children":1193},{"style":281},[1194],{"type":86,"value":1195},"params",{"type":80,"tag":155,"props":1197,"children":1198},{"style":275},[1199],{"type":86,"value":1200},".",{"type":80,"tag":155,"props":1202,"children":1203},{"style":281},[1204],{"type":86,"value":1205},"slug",{"type":80,"tag":155,"props":1207,"children":1208},{"style":434},[1209],{"type":86,"value":1210},")\n",{"type":80,"tag":155,"props":1212,"children":1213},{"class":157,"line":477},[1214],{"type":80,"tag":155,"props":1215,"children":1216},{"emptyLinePlaceholder":193},[1217],{"type":86,"value":196},{"type":80,"tag":155,"props":1219,"children":1220},{"class":157,"line":509},[1221,1225,1229,1233],{"type":80,"tag":155,"props":1222,"children":1223},{"style":269},[1224],{"type":86,"value":422},{"type":80,"tag":155,"props":1226,"children":1227},{"style":275},[1228],{"type":86,"value":427},{"type":80,"tag":155,"props":1230,"children":1231},{"style":380},[1232],{"type":86,"value":284},{"type":80,"tag":155,"props":1234,"children":1235},{"style":434},[1236],{"type":86,"value":437},{"type":80,"tag":155,"props":1238,"children":1239},{"class":157,"line":532},[1240],{"type":80,"tag":155,"props":1241,"children":1242},{"style":434},[1243],{"type":86,"value":446},{"type":80,"tag":155,"props":1245,"children":1246},{"class":157,"line":562},[1247,1251],{"type":80,"tag":155,"props":1248,"children":1249},{"style":275},[1250],{"type":86,"value":455},{"type":80,"tag":155,"props":1252,"children":1253},{"style":434},[1254],{"type":86,"value":460},{"type":80,"tag":155,"props":1256,"children":1257},{"class":157,"line":592},[1258,1262],{"type":80,"tag":155,"props":1259,"children":1260},{"style":326},[1261],{"type":86,"value":469},{"type":80,"tag":155,"props":1263,"children":1264},{"style":275},[1265],{"type":86,"value":474},{"type":80,"tag":155,"props":1267,"children":1268},{"class":157,"line":622},[1269,1273,1277,1281,1285,1289],{"type":80,"tag":155,"props":1270,"children":1271},{"style":434},[1272],{"type":86,"value":483},{"type":80,"tag":155,"props":1274,"children":1275},{"style":275},[1276],{"type":86,"value":246},{"type":80,"tag":155,"props":1278,"children":1279},{"style":275},[1280],{"type":86,"value":299},{"type":80,"tag":155,"props":1282,"children":1283},{"style":178},[1284],{"type":86,"value":496},{"type":80,"tag":155,"props":1286,"children":1287},{"style":275},[1288],{"type":86,"value":501},{"type":80,"tag":155,"props":1290,"children":1291},{"style":275},[1292],{"type":86,"value":506},{"type":80,"tag":155,"props":1294,"children":1295},{"class":157,"line":651},[1296,1301,1305,1309,1314,1318],{"type":80,"tag":155,"props":1297,"children":1298},{"style":434},[1299],{"type":86,"value":1300},"          flexDirection",{"type":80,"tag":155,"props":1302,"children":1303},{"style":275},[1304],{"type":86,"value":246},{"type":80,"tag":155,"props":1306,"children":1307},{"style":275},[1308],{"type":86,"value":299},{"type":80,"tag":155,"props":1310,"children":1311},{"style":178},[1312],{"type":86,"value":1313},"column",{"type":80,"tag":155,"props":1315,"children":1316},{"style":275},[1317],{"type":86,"value":501},{"type":80,"tag":155,"props":1319,"children":1320},{"style":275},[1321],{"type":86,"value":506},{"type":80,"tag":155,"props":1323,"children":1324},{"class":157,"line":681},[1325,1329,1333,1337,1341,1345],{"type":80,"tag":155,"props":1326,"children":1327},{"style":434},[1328],{"type":86,"value":657},{"type":80,"tag":155,"props":1330,"children":1331},{"style":275},[1332],{"type":86,"value":246},{"type":80,"tag":155,"props":1334,"children":1335},{"style":275},[1336],{"type":86,"value":299},{"type":80,"tag":155,"props":1338,"children":1339},{"style":178},[1340],{"type":86,"value":670},{"type":80,"tag":155,"props":1342,"children":1343},{"style":275},[1344],{"type":86,"value":501},{"type":80,"tag":155,"props":1346,"children":1347},{"style":275},[1348],{"type":86,"value":506},{"type":80,"tag":155,"props":1350,"children":1351},{"class":157,"line":710},[1352,1356,1360,1364,1368,1372],{"type":80,"tag":155,"props":1353,"children":1354},{"style":434},[1355],{"type":86,"value":687},{"type":80,"tag":155,"props":1357,"children":1358},{"style":275},[1359],{"type":86,"value":246},{"type":80,"tag":155,"props":1361,"children":1362},{"style":275},[1363],{"type":86,"value":299},{"type":80,"tag":155,"props":1365,"children":1366},{"style":178},[1367],{"type":86,"value":670},{"type":80,"tag":155,"props":1369,"children":1370},{"style":275},[1371],{"type":86,"value":501},{"type":80,"tag":155,"props":1373,"children":1374},{"style":275},[1375],{"type":86,"value":506},{"type":80,"tag":155,"props":1377,"children":1378},{"class":157,"line":719},[1379,1383,1387,1391,1395,1399],{"type":80,"tag":155,"props":1380,"children":1381},{"style":434},[1382],{"type":86,"value":598},{"type":80,"tag":155,"props":1384,"children":1385},{"style":275},[1386],{"type":86,"value":246},{"type":80,"tag":155,"props":1388,"children":1389},{"style":275},[1390],{"type":86,"value":299},{"type":80,"tag":155,"props":1392,"children":1393},{"style":178},[1394],{"type":86,"value":611},{"type":80,"tag":155,"props":1396,"children":1397},{"style":275},[1398],{"type":86,"value":501},{"type":80,"tag":155,"props":1400,"children":1401},{"style":275},[1402],{"type":86,"value":506},{"type":80,"tag":155,"props":1404,"children":1405},{"class":157,"line":728},[1406,1410,1414,1418,1422,1426],{"type":80,"tag":155,"props":1407,"children":1408},{"style":434},[1409],{"type":86,"value":628},{"type":80,"tag":155,"props":1411,"children":1412},{"style":275},[1413],{"type":86,"value":246},{"type":80,"tag":155,"props":1415,"children":1416},{"style":275},[1417],{"type":86,"value":299},{"type":80,"tag":155,"props":1419,"children":1420},{"style":178},[1421],{"type":86,"value":611},{"type":80,"tag":155,"props":1423,"children":1424},{"style":275},[1425],{"type":86,"value":501},{"type":80,"tag":155,"props":1427,"children":1428},{"style":275},[1429],{"type":86,"value":506},{"type":80,"tag":155,"props":1431,"children":1432},{"class":157,"line":737},[1433,1437,1441,1445,1450,1454],{"type":80,"tag":155,"props":1434,"children":1435},{"style":434},[1436],{"type":86,"value":568},{"type":80,"tag":155,"props":1438,"children":1439},{"style":275},[1440],{"type":86,"value":246},{"type":80,"tag":155,"props":1442,"children":1443},{"style":275},[1444],{"type":86,"value":299},{"type":80,"tag":155,"props":1446,"children":1447},{"style":178},[1448],{"type":86,"value":1449},"#000",{"type":80,"tag":155,"props":1451,"children":1452},{"style":275},[1453],{"type":86,"value":501},{"type":80,"tag":155,"props":1455,"children":1456},{"style":275},[1457],{"type":86,"value":506},{"type":80,"tag":155,"props":1459,"children":1460},{"class":157,"line":756},[1461,1465,1469,1473,1478,1482],{"type":80,"tag":155,"props":1462,"children":1463},{"style":434},[1464],{"type":86,"value":538},{"type":80,"tag":155,"props":1466,"children":1467},{"style":275},[1468],{"type":86,"value":246},{"type":80,"tag":155,"props":1470,"children":1471},{"style":275},[1472],{"type":86,"value":299},{"type":80,"tag":155,"props":1474,"children":1475},{"style":178},[1476],{"type":86,"value":1477},"#fff",{"type":80,"tag":155,"props":1479,"children":1480},{"style":275},[1481],{"type":86,"value":501},{"type":80,"tag":155,"props":1483,"children":1484},{"style":275},[1485],{"type":86,"value":506},{"type":80,"tag":155,"props":1487,"children":1488},{"class":157,"line":769},[1489,1493,1497,1502],{"type":80,"tag":155,"props":1490,"children":1491},{"style":434},[1492],{"type":86,"value":515},{"type":80,"tag":155,"props":1494,"children":1495},{"style":275},[1496],{"type":86,"value":246},{"type":80,"tag":155,"props":1498,"children":1499},{"style":522},[1500],{"type":86,"value":1501}," 48",{"type":80,"tag":155,"props":1503,"children":1504},{"style":275},[1505],{"type":86,"value":506},{"type":80,"tag":155,"props":1507,"children":1508},{"class":157,"line":816},[1509],{"type":80,"tag":155,"props":1510,"children":1511},{"style":275},[1512],{"type":86,"value":716},{"type":80,"tag":155,"props":1514,"children":1515},{"class":157,"line":825},[1516],{"type":80,"tag":155,"props":1517,"children":1518},{"style":275},[1519],{"type":86,"value":725},{"type":80,"tag":155,"props":1521,"children":1523},{"class":157,"line":1522},27,[1524,1529,1533,1538,1543,1547,1552,1557,1561],{"type":80,"tag":155,"props":1525,"children":1526},{"style":275},[1527],{"type":86,"value":1528},"        \u003C",{"type":80,"tag":155,"props":1530,"children":1531},{"style":434},[1532],{"type":86,"value":748},{"type":80,"tag":155,"props":1534,"children":1535},{"style":275},[1536],{"type":86,"value":1537},">{",{"type":80,"tag":155,"props":1539,"children":1540},{"style":281},[1541],{"type":86,"value":1542},"post",{"type":80,"tag":155,"props":1544,"children":1545},{"style":275},[1546],{"type":86,"value":1200},{"type":80,"tag":155,"props":1548,"children":1549},{"style":281},[1550],{"type":86,"value":1551},"title",{"type":80,"tag":155,"props":1553,"children":1554},{"style":275},[1555],{"type":86,"value":1556},"}\u003C\u002F",{"type":80,"tag":155,"props":1558,"children":1559},{"style":434},[1560],{"type":86,"value":748},{"type":80,"tag":155,"props":1562,"children":1563},{"style":275},[1564],{"type":86,"value":753},{"type":80,"tag":155,"props":1566,"children":1568},{"class":157,"line":1567},28,[1569,1573,1577],{"type":80,"tag":155,"props":1570,"children":1571},{"style":275},[1572],{"type":86,"value":743},{"type":80,"tag":155,"props":1574,"children":1575},{"style":434},[1576],{"type":86,"value":748},{"type":80,"tag":155,"props":1578,"children":1579},{"style":275},[1580],{"type":86,"value":753},{"type":80,"tag":155,"props":1582,"children":1584},{"class":157,"line":1583},29,[1585,1589],{"type":80,"tag":155,"props":1586,"children":1587},{"style":434},[1588],{"type":86,"value":762},{"type":80,"tag":155,"props":1590,"children":1591},{"style":275},[1592],{"type":86,"value":506},{"type":80,"tag":155,"props":1594,"children":1596},{"class":157,"line":1595},30,[1597,1601,1606,1611],{"type":80,"tag":155,"props":1598,"children":1599},{"style":275},[1600],{"type":86,"value":775},{"type":80,"tag":155,"props":1602,"children":1603},{"style":275},[1604],{"type":86,"value":1605}," ...",{"type":80,"tag":155,"props":1607,"children":1608},{"style":281},[1609],{"type":86,"value":1610},"size",{"type":80,"tag":155,"props":1612,"children":1613},{"style":275},[1614],{"type":86,"value":813},{"type":80,"tag":155,"props":1616,"children":1618},{"class":157,"line":1617},31,[1619],{"type":80,"tag":155,"props":1620,"children":1621},{"style":434},[1622],{"type":86,"value":822},{"type":80,"tag":155,"props":1624,"children":1626},{"class":157,"line":1625},32,[1627],{"type":80,"tag":155,"props":1628,"children":1629},{"style":275},[1630],{"type":86,"value":831},{"type":80,"tag":89,"props":1632,"children":1633},{},[1634,1636,1642],{"type":86,"value":1635},"Next.js auto-generates the ",{"type":80,"tag":95,"props":1637,"children":1639},{"className":1638},[],[1640],{"type":86,"value":1641},"\u003Cmeta property=\"og:image\">",{"type":86,"value":1643}," tag for these files.",{"type":80,"tag":103,"props":1645,"children":1647},{"id":1646},"standalone-satori-svg-only",[1648],{"type":86,"value":1649},"Standalone Satori (SVG Only)",{"type":80,"tag":144,"props":1651,"children":1655},{"className":1652,"code":1653,"language":1654,"meta":149,"style":149},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import satori from 'satori'\nimport { readFileSync } from 'fs'\n\nconst svg = await satori(\n  \u003Cdiv style={{ display: 'flex', color: 'black', fontSize: 40 }}>\n    Hello from Satori\n  \u003C\u002Fdiv>,\n  {\n    width: 1200,\n    height: 630,\n    fonts: [\n      {\n        name: 'Inter',\n        data: readFileSync('.\u002Ffonts\u002FInter-Regular.ttf'),\n        weight: 400,\n        style: 'normal',\n      },\n    ],\n  }\n)\n","ts",[1656],{"type":80,"tag":95,"props":1657,"children":1658},{"__ignoreMap":149},[1659,1688,1725,1732,1762,1850,1858,1875,1883,1903,1923,1940,1948,1977,2018,2039,2067,2075,2087,2095],{"type":80,"tag":155,"props":1660,"children":1661},{"class":157,"line":158},[1662,1666,1671,1676,1680,1684],{"type":80,"tag":155,"props":1663,"children":1664},{"style":269},[1665],{"type":86,"value":272},{"type":80,"tag":155,"props":1667,"children":1668},{"style":281},[1669],{"type":86,"value":1670}," satori ",{"type":80,"tag":155,"props":1672,"children":1673},{"style":269},[1674],{"type":86,"value":1675},"from",{"type":80,"tag":155,"props":1677,"children":1678},{"style":275},[1679],{"type":86,"value":299},{"type":80,"tag":155,"props":1681,"children":1682},{"style":178},[1683],{"type":86,"value":4},{"type":80,"tag":155,"props":1685,"children":1686},{"style":275},[1687],{"type":86,"value":308},{"type":80,"tag":155,"props":1689,"children":1690},{"class":157,"line":168},[1691,1695,1699,1704,1708,1712,1716,1721],{"type":80,"tag":155,"props":1692,"children":1693},{"style":269},[1694],{"type":86,"value":272},{"type":80,"tag":155,"props":1696,"children":1697},{"style":275},[1698],{"type":86,"value":278},{"type":80,"tag":155,"props":1700,"children":1701},{"style":281},[1702],{"type":86,"value":1703}," readFileSync",{"type":80,"tag":155,"props":1705,"children":1706},{"style":275},[1707],{"type":86,"value":289},{"type":80,"tag":155,"props":1709,"children":1710},{"style":269},[1711],{"type":86,"value":294},{"type":80,"tag":155,"props":1713,"children":1714},{"style":275},[1715],{"type":86,"value":299},{"type":80,"tag":155,"props":1717,"children":1718},{"style":178},[1719],{"type":86,"value":1720},"fs",{"type":80,"tag":155,"props":1722,"children":1723},{"style":275},[1724],{"type":86,"value":308},{"type":80,"tag":155,"props":1726,"children":1727},{"class":157,"line":189},[1728],{"type":80,"tag":155,"props":1729,"children":1730},{"emptyLinePlaceholder":193},[1731],{"type":86,"value":196},{"type":80,"tag":155,"props":1733,"children":1734},{"class":157,"line":41},[1735,1740,1745,1749,1753,1758],{"type":80,"tag":155,"props":1736,"children":1737},{"style":326},[1738],{"type":86,"value":1739},"const",{"type":80,"tag":155,"props":1741,"children":1742},{"style":281},[1743],{"type":86,"value":1744}," svg ",{"type":80,"tag":155,"props":1746,"children":1747},{"style":275},[1748],{"type":86,"value":339},{"type":80,"tag":155,"props":1750,"children":1751},{"style":269},[1752],{"type":86,"value":1181},{"type":80,"tag":155,"props":1754,"children":1755},{"style":380},[1756],{"type":86,"value":1757}," satori",{"type":80,"tag":155,"props":1759,"children":1760},{"style":281},[1761],{"type":86,"value":437},{"type":80,"tag":155,"props":1763,"children":1764},{"class":157,"line":207},[1765,1770,1775,1780,1785,1789,1793,1797,1801,1805,1810,1814,1818,1823,1827,1831,1836,1840,1845],{"type":80,"tag":155,"props":1766,"children":1767},{"style":275},[1768],{"type":86,"value":1769},"  \u003C",{"type":80,"tag":155,"props":1771,"children":1772},{"style":281},[1773],{"type":86,"value":1774},"div style",{"type":80,"tag":155,"props":1776,"children":1777},{"style":275},[1778],{"type":86,"value":1779},"={{",{"type":80,"tag":155,"props":1781,"children":1782},{"style":172},[1783],{"type":86,"value":1784}," display",{"type":80,"tag":155,"props":1786,"children":1787},{"style":275},[1788],{"type":86,"value":246},{"type":80,"tag":155,"props":1790,"children":1791},{"style":275},[1792],{"type":86,"value":299},{"type":80,"tag":155,"props":1794,"children":1795},{"style":178},[1796],{"type":86,"value":496},{"type":80,"tag":155,"props":1798,"children":1799},{"style":275},[1800],{"type":86,"value":501},{"type":80,"tag":155,"props":1802,"children":1803},{"style":275},[1804],{"type":86,"value":794},{"type":80,"tag":155,"props":1806,"children":1807},{"style":172},[1808],{"type":86,"value":1809}," color",{"type":80,"tag":155,"props":1811,"children":1812},{"style":275},[1813],{"type":86,"value":246},{"type":80,"tag":155,"props":1815,"children":1816},{"style":275},[1817],{"type":86,"value":299},{"type":80,"tag":155,"props":1819,"children":1820},{"style":178},[1821],{"type":86,"value":1822},"black",{"type":80,"tag":155,"props":1824,"children":1825},{"style":275},[1826],{"type":86,"value":501},{"type":80,"tag":155,"props":1828,"children":1829},{"style":275},[1830],{"type":86,"value":794},{"type":80,"tag":155,"props":1832,"children":1833},{"style":172},[1834],{"type":86,"value":1835}," fontSize",{"type":80,"tag":155,"props":1837,"children":1838},{"style":275},[1839],{"type":86,"value":246},{"type":80,"tag":155,"props":1841,"children":1842},{"style":522},[1843],{"type":86,"value":1844}," 40",{"type":80,"tag":155,"props":1846,"children":1847},{"style":275},[1848],{"type":86,"value":1849}," }}>\n",{"type":80,"tag":155,"props":1851,"children":1852},{"class":157,"line":362},[1853],{"type":80,"tag":155,"props":1854,"children":1855},{"style":281},[1856],{"type":86,"value":1857},"    Hello from Satori\n",{"type":80,"tag":155,"props":1859,"children":1860},{"class":157,"line":416},[1861,1866,1870],{"type":80,"tag":155,"props":1862,"children":1863},{"style":275},[1864],{"type":86,"value":1865},"  \u003C\u002F",{"type":80,"tag":155,"props":1867,"children":1868},{"style":281},[1869],{"type":86,"value":748},{"type":80,"tag":155,"props":1871,"children":1872},{"style":275},[1873],{"type":86,"value":1874},">,\n",{"type":80,"tag":155,"props":1876,"children":1877},{"class":157,"line":440},[1878],{"type":80,"tag":155,"props":1879,"children":1880},{"style":275},[1881],{"type":86,"value":1882},"  {\n",{"type":80,"tag":155,"props":1884,"children":1885},{"class":157,"line":449},[1886,1891,1895,1899],{"type":80,"tag":155,"props":1887,"children":1888},{"style":434},[1889],{"type":86,"value":1890},"    width",{"type":80,"tag":155,"props":1892,"children":1893},{"style":275},[1894],{"type":86,"value":246},{"type":80,"tag":155,"props":1896,"children":1897},{"style":522},[1898],{"type":86,"value":789},{"type":80,"tag":155,"props":1900,"children":1901},{"style":275},[1902],{"type":86,"value":506},{"type":80,"tag":155,"props":1904,"children":1905},{"class":157,"line":463},[1906,1911,1915,1919],{"type":80,"tag":155,"props":1907,"children":1908},{"style":434},[1909],{"type":86,"value":1910},"    height",{"type":80,"tag":155,"props":1912,"children":1913},{"style":275},[1914],{"type":86,"value":246},{"type":80,"tag":155,"props":1916,"children":1917},{"style":522},[1918],{"type":86,"value":808},{"type":80,"tag":155,"props":1920,"children":1921},{"style":275},[1922],{"type":86,"value":506},{"type":80,"tag":155,"props":1924,"children":1925},{"class":157,"line":477},[1926,1931,1935],{"type":80,"tag":155,"props":1927,"children":1928},{"style":434},[1929],{"type":86,"value":1930},"    fonts",{"type":80,"tag":155,"props":1932,"children":1933},{"style":275},[1934],{"type":86,"value":246},{"type":80,"tag":155,"props":1936,"children":1937},{"style":281},[1938],{"type":86,"value":1939}," [\n",{"type":80,"tag":155,"props":1941,"children":1942},{"class":157,"line":509},[1943],{"type":80,"tag":155,"props":1944,"children":1945},{"style":275},[1946],{"type":86,"value":1947},"      {\n",{"type":80,"tag":155,"props":1949,"children":1950},{"class":157,"line":532},[1951,1956,1960,1964,1969,1973],{"type":80,"tag":155,"props":1952,"children":1953},{"style":434},[1954],{"type":86,"value":1955},"        name",{"type":80,"tag":155,"props":1957,"children":1958},{"style":275},[1959],{"type":86,"value":246},{"type":80,"tag":155,"props":1961,"children":1962},{"style":275},[1963],{"type":86,"value":299},{"type":80,"tag":155,"props":1965,"children":1966},{"style":178},[1967],{"type":86,"value":1968},"Inter",{"type":80,"tag":155,"props":1970,"children":1971},{"style":275},[1972],{"type":86,"value":501},{"type":80,"tag":155,"props":1974,"children":1975},{"style":275},[1976],{"type":86,"value":506},{"type":80,"tag":155,"props":1978,"children":1979},{"class":157,"line":562},[1980,1985,1989,1993,1997,2001,2006,2010,2014],{"type":80,"tag":155,"props":1981,"children":1982},{"style":434},[1983],{"type":86,"value":1984},"        data",{"type":80,"tag":155,"props":1986,"children":1987},{"style":275},[1988],{"type":86,"value":246},{"type":80,"tag":155,"props":1990,"children":1991},{"style":380},[1992],{"type":86,"value":1703},{"type":80,"tag":155,"props":1994,"children":1995},{"style":281},[1996],{"type":86,"value":388},{"type":80,"tag":155,"props":1998,"children":1999},{"style":275},[2000],{"type":86,"value":501},{"type":80,"tag":155,"props":2002,"children":2003},{"style":178},[2004],{"type":86,"value":2005},".\u002Ffonts\u002FInter-Regular.ttf",{"type":80,"tag":155,"props":2007,"children":2008},{"style":275},[2009],{"type":86,"value":501},{"type":80,"tag":155,"props":2011,"children":2012},{"style":281},[2013],{"type":86,"value":408},{"type":80,"tag":155,"props":2015,"children":2016},{"style":275},[2017],{"type":86,"value":506},{"type":80,"tag":155,"props":2019,"children":2020},{"class":157,"line":592},[2021,2026,2030,2035],{"type":80,"tag":155,"props":2022,"children":2023},{"style":434},[2024],{"type":86,"value":2025},"        weight",{"type":80,"tag":155,"props":2027,"children":2028},{"style":275},[2029],{"type":86,"value":246},{"type":80,"tag":155,"props":2031,"children":2032},{"style":522},[2033],{"type":86,"value":2034}," 400",{"type":80,"tag":155,"props":2036,"children":2037},{"style":275},[2038],{"type":86,"value":506},{"type":80,"tag":155,"props":2040,"children":2041},{"class":157,"line":622},[2042,2046,2050,2054,2059,2063],{"type":80,"tag":155,"props":2043,"children":2044},{"style":434},[2045],{"type":86,"value":469},{"type":80,"tag":155,"props":2047,"children":2048},{"style":275},[2049],{"type":86,"value":246},{"type":80,"tag":155,"props":2051,"children":2052},{"style":275},[2053],{"type":86,"value":299},{"type":80,"tag":155,"props":2055,"children":2056},{"style":178},[2057],{"type":86,"value":2058},"normal",{"type":80,"tag":155,"props":2060,"children":2061},{"style":275},[2062],{"type":86,"value":501},{"type":80,"tag":155,"props":2064,"children":2065},{"style":275},[2066],{"type":86,"value":506},{"type":80,"tag":155,"props":2068,"children":2069},{"class":157,"line":651},[2070],{"type":80,"tag":155,"props":2071,"children":2072},{"style":275},[2073],{"type":86,"value":2074},"      },\n",{"type":80,"tag":155,"props":2076,"children":2077},{"class":157,"line":681},[2078,2083],{"type":80,"tag":155,"props":2079,"children":2080},{"style":281},[2081],{"type":86,"value":2082},"    ]",{"type":80,"tag":155,"props":2084,"children":2085},{"style":275},[2086],{"type":86,"value":506},{"type":80,"tag":155,"props":2088,"children":2089},{"class":157,"line":710},[2090],{"type":80,"tag":155,"props":2091,"children":2092},{"style":275},[2093],{"type":86,"value":2094},"  }\n",{"type":80,"tag":155,"props":2096,"children":2097},{"class":157,"line":719},[2098],{"type":80,"tag":155,"props":2099,"children":2100},{"style":281},[2101],{"type":86,"value":1210},{"type":80,"tag":103,"props":2103,"children":2105},{"id":2104},"css-support-and-limitations",[2106],{"type":86,"value":2107},"CSS Support and Limitations",{"type":80,"tag":89,"props":2109,"children":2110},{},[2111],{"type":86,"value":2112},"Satori uses a subset of CSS with Flexbox layout (Yoga engine):",{"type":80,"tag":89,"props":2114,"children":2115},{},[2116],{"type":80,"tag":113,"props":2117,"children":2118},{},[2119],{"type":86,"value":2120},"Supported:",{"type":80,"tag":2122,"props":2123,"children":2124},"ul",{},[2125,2137,2177,2223,2269,2301,2320,2338,2351,2362,2380],{"type":80,"tag":2126,"props":2127,"children":2128},"li",{},[2129,2135],{"type":80,"tag":95,"props":2130,"children":2132},{"className":2131},[],[2133],{"type":86,"value":2134},"display: flex",{"type":86,"value":2136}," (default — all elements are flex containers)",{"type":80,"tag":2126,"props":2138,"children":2139},{},[2140,2142,2148,2150,2156,2157,2163,2164,2170,2171],{"type":86,"value":2141},"Flexbox properties: ",{"type":80,"tag":95,"props":2143,"children":2145},{"className":2144},[],[2146],{"type":86,"value":2147},"flexDirection",{"type":86,"value":2149},", ",{"type":80,"tag":95,"props":2151,"children":2153},{"className":2152},[],[2154],{"type":86,"value":2155},"alignItems",{"type":86,"value":2149},{"type":80,"tag":95,"props":2158,"children":2160},{"className":2159},[],[2161],{"type":86,"value":2162},"justifyContent",{"type":86,"value":2149},{"type":80,"tag":95,"props":2165,"children":2167},{"className":2166},[],[2168],{"type":86,"value":2169},"flexWrap",{"type":86,"value":2149},{"type":80,"tag":95,"props":2172,"children":2174},{"className":2173},[],[2175],{"type":86,"value":2176},"gap",{"type":80,"tag":2126,"props":2178,"children":2179},{},[2180,2182,2188,2189,2195,2196,2202,2203,2209,2210,2216,2217],{"type":86,"value":2181},"Box model: ",{"type":80,"tag":95,"props":2183,"children":2185},{"className":2184},[],[2186],{"type":86,"value":2187},"width",{"type":86,"value":2149},{"type":80,"tag":95,"props":2190,"children":2192},{"className":2191},[],[2193],{"type":86,"value":2194},"height",{"type":86,"value":2149},{"type":80,"tag":95,"props":2197,"children":2199},{"className":2198},[],[2200],{"type":86,"value":2201},"padding",{"type":86,"value":2149},{"type":80,"tag":95,"props":2204,"children":2206},{"className":2205},[],[2207],{"type":86,"value":2208},"margin",{"type":86,"value":2149},{"type":80,"tag":95,"props":2211,"children":2213},{"className":2212},[],[2214],{"type":86,"value":2215},"border",{"type":86,"value":2149},{"type":80,"tag":95,"props":2218,"children":2220},{"className":2219},[],[2221],{"type":86,"value":2222},"borderRadius",{"type":80,"tag":2126,"props":2224,"children":2225},{},[2226,2228,2234,2235,2241,2242,2248,2249,2255,2256,2262,2263],{"type":86,"value":2227},"Typography: ",{"type":80,"tag":95,"props":2229,"children":2231},{"className":2230},[],[2232],{"type":86,"value":2233},"fontSize",{"type":86,"value":2149},{"type":80,"tag":95,"props":2236,"children":2238},{"className":2237},[],[2239],{"type":86,"value":2240},"fontWeight",{"type":86,"value":2149},{"type":80,"tag":95,"props":2243,"children":2245},{"className":2244},[],[2246],{"type":86,"value":2247},"fontFamily",{"type":86,"value":2149},{"type":80,"tag":95,"props":2250,"children":2252},{"className":2251},[],[2253],{"type":86,"value":2254},"lineHeight",{"type":86,"value":2149},{"type":80,"tag":95,"props":2257,"children":2259},{"className":2258},[],[2260],{"type":86,"value":2261},"letterSpacing",{"type":86,"value":2149},{"type":80,"tag":95,"props":2264,"children":2266},{"className":2265},[],[2267],{"type":86,"value":2268},"textAlign",{"type":80,"tag":2126,"props":2270,"children":2271},{},[2272,2274,2280,2281,2287,2288,2294,2295],{"type":86,"value":2273},"Colors: ",{"type":80,"tag":95,"props":2275,"children":2277},{"className":2276},[],[2278],{"type":86,"value":2279},"color",{"type":86,"value":2149},{"type":80,"tag":95,"props":2282,"children":2284},{"className":2283},[],[2285],{"type":86,"value":2286},"background",{"type":86,"value":2149},{"type":80,"tag":95,"props":2289,"children":2291},{"className":2290},[],[2292],{"type":86,"value":2293},"backgroundColor",{"type":86,"value":2149},{"type":80,"tag":95,"props":2296,"children":2298},{"className":2297},[],[2299],{"type":86,"value":2300},"opacity",{"type":80,"tag":2126,"props":2302,"children":2303},{},[2304,2306,2312,2314],{"type":86,"value":2305},"Backgrounds: ",{"type":80,"tag":95,"props":2307,"children":2309},{"className":2308},[],[2310],{"type":86,"value":2311},"backgroundImage",{"type":86,"value":2313}," (linear\u002Fradial gradients), ",{"type":80,"tag":95,"props":2315,"children":2317},{"className":2316},[],[2318],{"type":86,"value":2319},"backgroundClip",{"type":80,"tag":2126,"props":2321,"children":2322},{},[2323,2325,2331,2332],{"type":86,"value":2324},"Shadows: ",{"type":80,"tag":95,"props":2326,"children":2328},{"className":2327},[],[2329],{"type":86,"value":2330},"boxShadow",{"type":86,"value":2149},{"type":80,"tag":95,"props":2333,"children":2335},{"className":2334},[],[2336],{"type":86,"value":2337},"textShadow",{"type":80,"tag":2126,"props":2339,"children":2340},{},[2341,2343,2349],{"type":86,"value":2342},"Transforms: ",{"type":80,"tag":95,"props":2344,"children":2346},{"className":2345},[],[2347],{"type":86,"value":2348},"transform",{"type":86,"value":2350}," (basic transforms)",{"type":80,"tag":2126,"props":2352,"children":2353},{},[2354,2356],{"type":86,"value":2355},"Overflow: ",{"type":80,"tag":95,"props":2357,"children":2359},{"className":2358},[],[2360],{"type":86,"value":2361},"overflow: hidden",{"type":80,"tag":2126,"props":2363,"children":2364},{},[2365,2367,2373,2374],{"type":86,"value":2366},"Position: ",{"type":80,"tag":95,"props":2368,"children":2370},{"className":2369},[],[2371],{"type":86,"value":2372},"absolute",{"type":86,"value":2149},{"type":80,"tag":95,"props":2375,"children":2377},{"className":2376},[],[2378],{"type":86,"value":2379},"relative",{"type":80,"tag":2126,"props":2381,"children":2382},{},[2383,2385,2391,2392,2398,2399],{"type":86,"value":2384},"White space: ",{"type":80,"tag":95,"props":2386,"children":2388},{"className":2387},[],[2389],{"type":86,"value":2390},"whiteSpace",{"type":86,"value":2149},{"type":80,"tag":95,"props":2393,"children":2395},{"className":2394},[],[2396],{"type":86,"value":2397},"wordBreak",{"type":86,"value":2149},{"type":80,"tag":95,"props":2400,"children":2402},{"className":2401},[],[2403],{"type":86,"value":2404},"textOverflow",{"type":80,"tag":89,"props":2406,"children":2407},{},[2408],{"type":80,"tag":113,"props":2409,"children":2410},{},[2411],{"type":86,"value":2412},"Not supported:",{"type":80,"tag":2122,"props":2414,"children":2415},{},[2416,2427,2432,2448,2467,2472],{"type":80,"tag":2126,"props":2417,"children":2418},{},[2419,2425],{"type":80,"tag":95,"props":2420,"children":2422},{"className":2421},[],[2423],{"type":86,"value":2424},"display: grid",{"type":86,"value":2426}," — use nested flex containers instead",{"type":80,"tag":2126,"props":2428,"children":2429},{},[2430],{"type":86,"value":2431},"CSS animations or transitions",{"type":80,"tag":2126,"props":2433,"children":2434},{},[2435,2441,2442],{"type":80,"tag":95,"props":2436,"children":2438},{"className":2437},[],[2439],{"type":86,"value":2440},"position: fixed",{"type":86,"value":850},{"type":80,"tag":95,"props":2443,"children":2445},{"className":2444},[],[2446],{"type":86,"value":2447},"sticky",{"type":80,"tag":2126,"props":2449,"children":2450},{},[2451,2453,2459,2460,2466],{"type":86,"value":2452},"Pseudo-elements (",{"type":80,"tag":95,"props":2454,"children":2456},{"className":2455},[],[2457],{"type":86,"value":2458},"::before",{"type":86,"value":2149},{"type":80,"tag":95,"props":2461,"children":2463},{"className":2462},[],[2464],{"type":86,"value":2465},"::after",{"type":86,"value":408},{"type":80,"tag":2126,"props":2468,"children":2469},{},[2470],{"type":86,"value":2471},"Media queries",{"type":80,"tag":2126,"props":2473,"children":2474},{},[2475],{"type":86,"value":2476},"CSS variables",{"type":80,"tag":103,"props":2478,"children":2480},{"id":2479},"fonts",[2481],{"type":86,"value":2482},"Fonts",{"type":80,"tag":89,"props":2484,"children":2485},{},[2486],{"type":86,"value":2487},"Fonts must be loaded explicitly — there are no default system fonts:",{"type":80,"tag":144,"props":2489,"children":2491},{"className":249,"code":2490,"language":251,"meta":149,"style":149},"\u002F\u002F Load font in edge runtime\nconst font = fetch(new URL('.\u002FInter-Bold.ttf', import.meta.url)).then(\n  (res) => res.arrayBuffer()\n)\n\nexport async function GET() {\n  const fontData = await font\n\n  return new ImageResponse(\n    (\u003Cdiv style={{ fontFamily: 'Inter' }}>Hello\u003C\u002Fdiv>),\n    {\n      width: 1200,\n      height: 630,\n      fonts: [{ name: 'Inter', data: fontData, weight: 700, style: 'normal' }],\n    }\n  )\n}\n",[2492],{"type":80,"tag":95,"props":2493,"children":2494},{"__ignoreMap":149},[2495,2503,2595,2636,2643,2650,2678,2703,2710,2729,2808,2816,2836,2856,2971,2979,2986],{"type":80,"tag":155,"props":2496,"children":2497},{"class":157,"line":158},[2498],{"type":80,"tag":155,"props":2499,"children":2500},{"style":162},[2501],{"type":86,"value":2502},"\u002F\u002F Load font in edge runtime\n",{"type":80,"tag":155,"props":2504,"children":2505},{"class":157,"line":168},[2506,2510,2515,2519,2524,2528,2533,2538,2542,2546,2551,2555,2559,2564,2568,2573,2577,2582,2586,2591],{"type":80,"tag":155,"props":2507,"children":2508},{"style":326},[2509],{"type":86,"value":1739},{"type":80,"tag":155,"props":2511,"children":2512},{"style":281},[2513],{"type":86,"value":2514}," font ",{"type":80,"tag":155,"props":2516,"children":2517},{"style":275},[2518],{"type":86,"value":339},{"type":80,"tag":155,"props":2520,"children":2521},{"style":380},[2522],{"type":86,"value":2523}," fetch",{"type":80,"tag":155,"props":2525,"children":2526},{"style":281},[2527],{"type":86,"value":388},{"type":80,"tag":155,"props":2529,"children":2530},{"style":275},[2531],{"type":86,"value":2532},"new",{"type":80,"tag":155,"props":2534,"children":2535},{"style":380},[2536],{"type":86,"value":2537}," URL",{"type":80,"tag":155,"props":2539,"children":2540},{"style":281},[2541],{"type":86,"value":388},{"type":80,"tag":155,"props":2543,"children":2544},{"style":275},[2545],{"type":86,"value":501},{"type":80,"tag":155,"props":2547,"children":2548},{"style":178},[2549],{"type":86,"value":2550},".\u002FInter-Bold.ttf",{"type":80,"tag":155,"props":2552,"children":2553},{"style":275},[2554],{"type":86,"value":501},{"type":80,"tag":155,"props":2556,"children":2557},{"style":275},[2558],{"type":86,"value":794},{"type":80,"tag":155,"props":2560,"children":2561},{"style":269},[2562],{"type":86,"value":2563}," import",{"type":80,"tag":155,"props":2565,"children":2566},{"style":275},[2567],{"type":86,"value":1200},{"type":80,"tag":155,"props":2569,"children":2570},{"style":281},[2571],{"type":86,"value":2572},"meta",{"type":80,"tag":155,"props":2574,"children":2575},{"style":275},[2576],{"type":86,"value":1200},{"type":80,"tag":155,"props":2578,"children":2579},{"style":281},[2580],{"type":86,"value":2581},"url))",{"type":80,"tag":155,"props":2583,"children":2584},{"style":275},[2585],{"type":86,"value":1200},{"type":80,"tag":155,"props":2587,"children":2588},{"style":380},[2589],{"type":86,"value":2590},"then",{"type":80,"tag":155,"props":2592,"children":2593},{"style":281},[2594],{"type":86,"value":437},{"type":80,"tag":155,"props":2596,"children":2597},{"class":157,"line":189},[2598,2603,2608,2612,2617,2622,2626,2631],{"type":80,"tag":155,"props":2599,"children":2600},{"style":275},[2601],{"type":86,"value":2602},"  (",{"type":80,"tag":155,"props":2604,"children":2605},{"style":391},[2606],{"type":86,"value":2607},"res",{"type":80,"tag":155,"props":2609,"children":2610},{"style":275},[2611],{"type":86,"value":408},{"type":80,"tag":155,"props":2613,"children":2614},{"style":326},[2615],{"type":86,"value":2616}," =>",{"type":80,"tag":155,"props":2618,"children":2619},{"style":281},[2620],{"type":86,"value":2621}," res",{"type":80,"tag":155,"props":2623,"children":2624},{"style":275},[2625],{"type":86,"value":1200},{"type":80,"tag":155,"props":2627,"children":2628},{"style":380},[2629],{"type":86,"value":2630},"arrayBuffer",{"type":80,"tag":155,"props":2632,"children":2633},{"style":281},[2634],{"type":86,"value":2635},"()\n",{"type":80,"tag":155,"props":2637,"children":2638},{"class":157,"line":41},[2639],{"type":80,"tag":155,"props":2640,"children":2641},{"style":281},[2642],{"type":86,"value":1210},{"type":80,"tag":155,"props":2644,"children":2645},{"class":157,"line":207},[2646],{"type":80,"tag":155,"props":2647,"children":2648},{"emptyLinePlaceholder":193},[2649],{"type":86,"value":196},{"type":80,"tag":155,"props":2651,"children":2652},{"class":157,"line":362},[2653,2657,2661,2665,2669,2674],{"type":80,"tag":155,"props":2654,"children":2655},{"style":269},[2656],{"type":86,"value":323},{"type":80,"tag":155,"props":2658,"children":2659},{"style":326},[2660],{"type":86,"value":372},{"type":80,"tag":155,"props":2662,"children":2663},{"style":326},[2664],{"type":86,"value":377},{"type":80,"tag":155,"props":2666,"children":2667},{"style":380},[2668],{"type":86,"value":383},{"type":80,"tag":155,"props":2670,"children":2671},{"style":275},[2672],{"type":86,"value":2673},"()",{"type":80,"tag":155,"props":2675,"children":2676},{"style":275},[2677],{"type":86,"value":413},{"type":80,"tag":155,"props":2679,"children":2680},{"class":157,"line":416},[2681,2685,2690,2694,2698],{"type":80,"tag":155,"props":2682,"children":2683},{"style":326},[2684],{"type":86,"value":1166},{"type":80,"tag":155,"props":2686,"children":2687},{"style":281},[2688],{"type":86,"value":2689}," fontData",{"type":80,"tag":155,"props":2691,"children":2692},{"style":275},[2693],{"type":86,"value":1176},{"type":80,"tag":155,"props":2695,"children":2696},{"style":269},[2697],{"type":86,"value":1181},{"type":80,"tag":155,"props":2699,"children":2700},{"style":281},[2701],{"type":86,"value":2702}," font\n",{"type":80,"tag":155,"props":2704,"children":2705},{"class":157,"line":440},[2706],{"type":80,"tag":155,"props":2707,"children":2708},{"emptyLinePlaceholder":193},[2709],{"type":86,"value":196},{"type":80,"tag":155,"props":2711,"children":2712},{"class":157,"line":449},[2713,2717,2721,2725],{"type":80,"tag":155,"props":2714,"children":2715},{"style":269},[2716],{"type":86,"value":422},{"type":80,"tag":155,"props":2718,"children":2719},{"style":275},[2720],{"type":86,"value":427},{"type":80,"tag":155,"props":2722,"children":2723},{"style":380},[2724],{"type":86,"value":284},{"type":80,"tag":155,"props":2726,"children":2727},{"style":434},[2728],{"type":86,"value":437},{"type":80,"tag":155,"props":2730,"children":2731},{"class":157,"line":463},[2732,2737,2742,2746,2751,2755,2760,2764,2768,2772,2776,2781,2786,2791,2795,2800,2804],{"type":80,"tag":155,"props":2733,"children":2734},{"style":434},[2735],{"type":86,"value":2736},"    (",{"type":80,"tag":155,"props":2738,"children":2739},{"style":275},[2740],{"type":86,"value":2741},"\u003C",{"type":80,"tag":155,"props":2743,"children":2744},{"style":434},[2745],{"type":86,"value":748},{"type":80,"tag":155,"props":2747,"children":2748},{"style":326},[2749],{"type":86,"value":2750}," style",{"type":80,"tag":155,"props":2752,"children":2753},{"style":275},[2754],{"type":86,"value":1779},{"type":80,"tag":155,"props":2756,"children":2757},{"style":434},[2758],{"type":86,"value":2759}," fontFamily",{"type":80,"tag":155,"props":2761,"children":2762},{"style":275},[2763],{"type":86,"value":246},{"type":80,"tag":155,"props":2765,"children":2766},{"style":275},[2767],{"type":86,"value":299},{"type":80,"tag":155,"props":2769,"children":2770},{"style":178},[2771],{"type":86,"value":1968},{"type":80,"tag":155,"props":2773,"children":2774},{"style":275},[2775],{"type":86,"value":501},{"type":80,"tag":155,"props":2777,"children":2778},{"style":275},[2779],{"type":86,"value":2780}," }}>",{"type":80,"tag":155,"props":2782,"children":2783},{"style":281},[2784],{"type":86,"value":2785},"Hello",{"type":80,"tag":155,"props":2787,"children":2788},{"style":275},[2789],{"type":86,"value":2790},"\u003C\u002F",{"type":80,"tag":155,"props":2792,"children":2793},{"style":434},[2794],{"type":86,"value":748},{"type":80,"tag":155,"props":2796,"children":2797},{"style":275},[2798],{"type":86,"value":2799},">",{"type":80,"tag":155,"props":2801,"children":2802},{"style":434},[2803],{"type":86,"value":408},{"type":80,"tag":155,"props":2805,"children":2806},{"style":275},[2807],{"type":86,"value":506},{"type":80,"tag":155,"props":2809,"children":2810},{"class":157,"line":477},[2811],{"type":80,"tag":155,"props":2812,"children":2813},{"style":275},[2814],{"type":86,"value":2815},"    {\n",{"type":80,"tag":155,"props":2817,"children":2818},{"class":157,"line":509},[2819,2824,2828,2832],{"type":80,"tag":155,"props":2820,"children":2821},{"style":434},[2822],{"type":86,"value":2823},"      width",{"type":80,"tag":155,"props":2825,"children":2826},{"style":275},[2827],{"type":86,"value":246},{"type":80,"tag":155,"props":2829,"children":2830},{"style":522},[2831],{"type":86,"value":789},{"type":80,"tag":155,"props":2833,"children":2834},{"style":275},[2835],{"type":86,"value":506},{"type":80,"tag":155,"props":2837,"children":2838},{"class":157,"line":532},[2839,2844,2848,2852],{"type":80,"tag":155,"props":2840,"children":2841},{"style":434},[2842],{"type":86,"value":2843},"      height",{"type":80,"tag":155,"props":2845,"children":2846},{"style":275},[2847],{"type":86,"value":246},{"type":80,"tag":155,"props":2849,"children":2850},{"style":522},[2851],{"type":86,"value":808},{"type":80,"tag":155,"props":2853,"children":2854},{"style":275},[2855],{"type":86,"value":506},{"type":80,"tag":155,"props":2857,"children":2858},{"class":157,"line":562},[2859,2864,2868,2873,2878,2883,2887,2891,2895,2899,2903,2908,2912,2916,2920,2925,2929,2934,2938,2942,2946,2950,2954,2958,2962,2967],{"type":80,"tag":155,"props":2860,"children":2861},{"style":434},[2862],{"type":86,"value":2863},"      fonts",{"type":80,"tag":155,"props":2865,"children":2866},{"style":275},[2867],{"type":86,"value":246},{"type":80,"tag":155,"props":2869,"children":2870},{"style":434},[2871],{"type":86,"value":2872}," [",{"type":80,"tag":155,"props":2874,"children":2875},{"style":275},[2876],{"type":86,"value":2877},"{",{"type":80,"tag":155,"props":2879,"children":2880},{"style":434},[2881],{"type":86,"value":2882}," name",{"type":80,"tag":155,"props":2884,"children":2885},{"style":275},[2886],{"type":86,"value":246},{"type":80,"tag":155,"props":2888,"children":2889},{"style":275},[2890],{"type":86,"value":299},{"type":80,"tag":155,"props":2892,"children":2893},{"style":178},[2894],{"type":86,"value":1968},{"type":80,"tag":155,"props":2896,"children":2897},{"style":275},[2898],{"type":86,"value":501},{"type":80,"tag":155,"props":2900,"children":2901},{"style":275},[2902],{"type":86,"value":794},{"type":80,"tag":155,"props":2904,"children":2905},{"style":434},[2906],{"type":86,"value":2907}," data",{"type":80,"tag":155,"props":2909,"children":2910},{"style":275},[2911],{"type":86,"value":246},{"type":80,"tag":155,"props":2913,"children":2914},{"style":281},[2915],{"type":86,"value":2689},{"type":80,"tag":155,"props":2917,"children":2918},{"style":275},[2919],{"type":86,"value":794},{"type":80,"tag":155,"props":2921,"children":2922},{"style":434},[2923],{"type":86,"value":2924}," weight",{"type":80,"tag":155,"props":2926,"children":2927},{"style":275},[2928],{"type":86,"value":246},{"type":80,"tag":155,"props":2930,"children":2931},{"style":522},[2932],{"type":86,"value":2933}," 700",{"type":80,"tag":155,"props":2935,"children":2936},{"style":275},[2937],{"type":86,"value":794},{"type":80,"tag":155,"props":2939,"children":2940},{"style":434},[2941],{"type":86,"value":2750},{"type":80,"tag":155,"props":2943,"children":2944},{"style":275},[2945],{"type":86,"value":246},{"type":80,"tag":155,"props":2947,"children":2948},{"style":275},[2949],{"type":86,"value":299},{"type":80,"tag":155,"props":2951,"children":2952},{"style":178},[2953],{"type":86,"value":2058},{"type":80,"tag":155,"props":2955,"children":2956},{"style":275},[2957],{"type":86,"value":501},{"type":80,"tag":155,"props":2959,"children":2960},{"style":275},[2961],{"type":86,"value":289},{"type":80,"tag":155,"props":2963,"children":2964},{"style":434},[2965],{"type":86,"value":2966},"]",{"type":80,"tag":155,"props":2968,"children":2969},{"style":275},[2970],{"type":86,"value":506},{"type":80,"tag":155,"props":2972,"children":2973},{"class":157,"line":592},[2974],{"type":80,"tag":155,"props":2975,"children":2976},{"style":275},[2977],{"type":86,"value":2978},"    }\n",{"type":80,"tag":155,"props":2980,"children":2981},{"class":157,"line":622},[2982],{"type":80,"tag":155,"props":2983,"children":2984},{"style":434},[2985],{"type":86,"value":822},{"type":80,"tag":155,"props":2987,"children":2988},{"class":157,"line":651},[2989],{"type":80,"tag":155,"props":2990,"children":2991},{"style":275},[2992],{"type":86,"value":831},{"type":80,"tag":89,"props":2994,"children":2995},{},[2996,2998,3004],{"type":86,"value":2997},"For Google Fonts, fetch directly from the CDN or bundle the ",{"type":80,"tag":95,"props":2999,"children":3001},{"className":3000},[],[3002],{"type":86,"value":3003},".ttf",{"type":86,"value":3005}," file.",{"type":80,"tag":103,"props":3007,"children":3009},{"id":3008},"dynamic-content-from-url-parameters",[3010],{"type":86,"value":3011},"Dynamic Content from URL Parameters",{"type":80,"tag":144,"props":3013,"children":3015},{"className":249,"code":3014,"language":251,"meta":149,"style":149},"export async function GET(request: Request) {\n  const { searchParams } = new URL(request.url)\n  const title = searchParams.get('title') ?? 'Default Title'\n\n  return new ImageResponse(\n    (\u003Cdiv style={{ display: 'flex', fontSize: 60 }}>{title}\u003C\u002Fdiv>),\n    { width: 1200, height: 630 }\n  )\n}\n",[3016],{"type":80,"tag":95,"props":3017,"children":3018},{"__ignoreMap":149},[3019,3062,3115,3183,3190,3209,3297,3336,3343],{"type":80,"tag":155,"props":3020,"children":3021},{"class":157,"line":158},[3022,3026,3030,3034,3038,3042,3046,3050,3054,3058],{"type":80,"tag":155,"props":3023,"children":3024},{"style":269},[3025],{"type":86,"value":323},{"type":80,"tag":155,"props":3027,"children":3028},{"style":326},[3029],{"type":86,"value":372},{"type":80,"tag":155,"props":3031,"children":3032},{"style":326},[3033],{"type":86,"value":377},{"type":80,"tag":155,"props":3035,"children":3036},{"style":380},[3037],{"type":86,"value":383},{"type":80,"tag":155,"props":3039,"children":3040},{"style":275},[3041],{"type":86,"value":388},{"type":80,"tag":155,"props":3043,"children":3044},{"style":391},[3045],{"type":86,"value":394},{"type":80,"tag":155,"props":3047,"children":3048},{"style":275},[3049],{"type":86,"value":246},{"type":80,"tag":155,"props":3051,"children":3052},{"style":172},[3053],{"type":86,"value":403},{"type":80,"tag":155,"props":3055,"children":3056},{"style":275},[3057],{"type":86,"value":408},{"type":80,"tag":155,"props":3059,"children":3060},{"style":275},[3061],{"type":86,"value":413},{"type":80,"tag":155,"props":3063,"children":3064},{"class":157,"line":168},[3065,3069,3073,3078,3082,3086,3090,3094,3098,3102,3106,3111],{"type":80,"tag":155,"props":3066,"children":3067},{"style":326},[3068],{"type":86,"value":1166},{"type":80,"tag":155,"props":3070,"children":3071},{"style":275},[3072],{"type":86,"value":278},{"type":80,"tag":155,"props":3074,"children":3075},{"style":281},[3076],{"type":86,"value":3077}," searchParams",{"type":80,"tag":155,"props":3079,"children":3080},{"style":275},[3081],{"type":86,"value":289},{"type":80,"tag":155,"props":3083,"children":3084},{"style":275},[3085],{"type":86,"value":1176},{"type":80,"tag":155,"props":3087,"children":3088},{"style":275},[3089],{"type":86,"value":427},{"type":80,"tag":155,"props":3091,"children":3092},{"style":380},[3093],{"type":86,"value":2537},{"type":80,"tag":155,"props":3095,"children":3096},{"style":434},[3097],{"type":86,"value":388},{"type":80,"tag":155,"props":3099,"children":3100},{"style":281},[3101],{"type":86,"value":394},{"type":80,"tag":155,"props":3103,"children":3104},{"style":275},[3105],{"type":86,"value":1200},{"type":80,"tag":155,"props":3107,"children":3108},{"style":281},[3109],{"type":86,"value":3110},"url",{"type":80,"tag":155,"props":3112,"children":3113},{"style":434},[3114],{"type":86,"value":1210},{"type":80,"tag":155,"props":3116,"children":3117},{"class":157,"line":189},[3118,3122,3127,3131,3135,3139,3144,3148,3152,3156,3160,3165,3170,3174,3179],{"type":80,"tag":155,"props":3119,"children":3120},{"style":326},[3121],{"type":86,"value":1166},{"type":80,"tag":155,"props":3123,"children":3124},{"style":281},[3125],{"type":86,"value":3126}," title",{"type":80,"tag":155,"props":3128,"children":3129},{"style":275},[3130],{"type":86,"value":1176},{"type":80,"tag":155,"props":3132,"children":3133},{"style":281},[3134],{"type":86,"value":3077},{"type":80,"tag":155,"props":3136,"children":3137},{"style":275},[3138],{"type":86,"value":1200},{"type":80,"tag":155,"props":3140,"children":3141},{"style":380},[3142],{"type":86,"value":3143},"get",{"type":80,"tag":155,"props":3145,"children":3146},{"style":434},[3147],{"type":86,"value":388},{"type":80,"tag":155,"props":3149,"children":3150},{"style":275},[3151],{"type":86,"value":501},{"type":80,"tag":155,"props":3153,"children":3154},{"style":178},[3155],{"type":86,"value":1551},{"type":80,"tag":155,"props":3157,"children":3158},{"style":275},[3159],{"type":86,"value":501},{"type":80,"tag":155,"props":3161,"children":3162},{"style":434},[3163],{"type":86,"value":3164},") ",{"type":80,"tag":155,"props":3166,"children":3167},{"style":275},[3168],{"type":86,"value":3169},"??",{"type":80,"tag":155,"props":3171,"children":3172},{"style":275},[3173],{"type":86,"value":299},{"type":80,"tag":155,"props":3175,"children":3176},{"style":178},[3177],{"type":86,"value":3178},"Default Title",{"type":80,"tag":155,"props":3180,"children":3181},{"style":275},[3182],{"type":86,"value":308},{"type":80,"tag":155,"props":3184,"children":3185},{"class":157,"line":41},[3186],{"type":80,"tag":155,"props":3187,"children":3188},{"emptyLinePlaceholder":193},[3189],{"type":86,"value":196},{"type":80,"tag":155,"props":3191,"children":3192},{"class":157,"line":207},[3193,3197,3201,3205],{"type":80,"tag":155,"props":3194,"children":3195},{"style":269},[3196],{"type":86,"value":422},{"type":80,"tag":155,"props":3198,"children":3199},{"style":275},[3200],{"type":86,"value":427},{"type":80,"tag":155,"props":3202,"children":3203},{"style":380},[3204],{"type":86,"value":284},{"type":80,"tag":155,"props":3206,"children":3207},{"style":434},[3208],{"type":86,"value":437},{"type":80,"tag":155,"props":3210,"children":3211},{"class":157,"line":362},[3212,3216,3220,3224,3228,3232,3236,3240,3244,3248,3252,3256,3260,3264,3268,3273,3277,3281,3285,3289,3293],{"type":80,"tag":155,"props":3213,"children":3214},{"style":434},[3215],{"type":86,"value":2736},{"type":80,"tag":155,"props":3217,"children":3218},{"style":275},[3219],{"type":86,"value":2741},{"type":80,"tag":155,"props":3221,"children":3222},{"style":434},[3223],{"type":86,"value":748},{"type":80,"tag":155,"props":3225,"children":3226},{"style":326},[3227],{"type":86,"value":2750},{"type":80,"tag":155,"props":3229,"children":3230},{"style":275},[3231],{"type":86,"value":1779},{"type":80,"tag":155,"props":3233,"children":3234},{"style":434},[3235],{"type":86,"value":1784},{"type":80,"tag":155,"props":3237,"children":3238},{"style":275},[3239],{"type":86,"value":246},{"type":80,"tag":155,"props":3241,"children":3242},{"style":275},[3243],{"type":86,"value":299},{"type":80,"tag":155,"props":3245,"children":3246},{"style":178},[3247],{"type":86,"value":496},{"type":80,"tag":155,"props":3249,"children":3250},{"style":275},[3251],{"type":86,"value":501},{"type":80,"tag":155,"props":3253,"children":3254},{"style":275},[3255],{"type":86,"value":794},{"type":80,"tag":155,"props":3257,"children":3258},{"style":434},[3259],{"type":86,"value":1835},{"type":80,"tag":155,"props":3261,"children":3262},{"style":275},[3263],{"type":86,"value":246},{"type":80,"tag":155,"props":3265,"children":3266},{"style":522},[3267],{"type":86,"value":525},{"type":80,"tag":155,"props":3269,"children":3270},{"style":275},[3271],{"type":86,"value":3272}," }}>{",{"type":80,"tag":155,"props":3274,"children":3275},{"style":281},[3276],{"type":86,"value":1551},{"type":80,"tag":155,"props":3278,"children":3279},{"style":275},[3280],{"type":86,"value":1556},{"type":80,"tag":155,"props":3282,"children":3283},{"style":434},[3284],{"type":86,"value":748},{"type":80,"tag":155,"props":3286,"children":3287},{"style":275},[3288],{"type":86,"value":2799},{"type":80,"tag":155,"props":3290,"children":3291},{"style":434},[3292],{"type":86,"value":408},{"type":80,"tag":155,"props":3294,"children":3295},{"style":275},[3296],{"type":86,"value":506},{"type":80,"tag":155,"props":3298,"children":3299},{"class":157,"line":416},[3300,3304,3308,3312,3316,3320,3324,3328,3332],{"type":80,"tag":155,"props":3301,"children":3302},{"style":275},[3303],{"type":86,"value":775},{"type":80,"tag":155,"props":3305,"children":3306},{"style":434},[3307],{"type":86,"value":780},{"type":80,"tag":155,"props":3309,"children":3310},{"style":275},[3311],{"type":86,"value":246},{"type":80,"tag":155,"props":3313,"children":3314},{"style":522},[3315],{"type":86,"value":789},{"type":80,"tag":155,"props":3317,"children":3318},{"style":275},[3319],{"type":86,"value":794},{"type":80,"tag":155,"props":3321,"children":3322},{"style":434},[3323],{"type":86,"value":799},{"type":80,"tag":155,"props":3325,"children":3326},{"style":275},[3327],{"type":86,"value":246},{"type":80,"tag":155,"props":3329,"children":3330},{"style":522},[3331],{"type":86,"value":808},{"type":80,"tag":155,"props":3333,"children":3334},{"style":275},[3335],{"type":86,"value":813},{"type":80,"tag":155,"props":3337,"children":3338},{"class":157,"line":440},[3339],{"type":80,"tag":155,"props":3340,"children":3341},{"style":434},[3342],{"type":86,"value":822},{"type":80,"tag":155,"props":3344,"children":3345},{"class":157,"line":449},[3346],{"type":80,"tag":155,"props":3347,"children":3348},{"style":275},[3349],{"type":86,"value":831},{"type":80,"tag":103,"props":3351,"children":3353},{"id":3352},"images-in-og",[3354],{"type":86,"value":3355},"Images in OG",{"type":80,"tag":89,"props":3357,"children":3358},{},[3359,3361,3367],{"type":86,"value":3360},"Use ",{"type":80,"tag":95,"props":3362,"children":3364},{"className":3363},[],[3365],{"type":86,"value":3366},"\u003Cimg>",{"type":86,"value":3368}," with absolute URLs:",{"type":80,"tag":144,"props":3370,"children":3372},{"className":249,"code":3371,"language":251,"meta":149,"style":149},"\u003Cimg\n  src=\"https:\u002F\u002Fexample.com\u002Favatar.png\"\n  width={100}\n  height={100}\n  style={{ borderRadius: '50%' }}\n\u002F>\n",[3373],{"type":80,"tag":95,"props":3374,"children":3375},{"__ignoreMap":149},[3376,3388,3415,3437,3457,3496],{"type":80,"tag":155,"props":3377,"children":3378},{"class":157,"line":158},[3379,3383],{"type":80,"tag":155,"props":3380,"children":3381},{"style":275},[3382],{"type":86,"value":2741},{"type":80,"tag":155,"props":3384,"children":3385},{"style":434},[3386],{"type":86,"value":3387},"img\n",{"type":80,"tag":155,"props":3389,"children":3390},{"class":157,"line":168},[3391,3396,3400,3405,3410],{"type":80,"tag":155,"props":3392,"children":3393},{"style":326},[3394],{"type":86,"value":3395},"  src",{"type":80,"tag":155,"props":3397,"children":3398},{"style":275},[3399],{"type":86,"value":339},{"type":80,"tag":155,"props":3401,"children":3402},{"style":275},[3403],{"type":86,"value":3404},"\"",{"type":80,"tag":155,"props":3406,"children":3407},{"style":178},[3408],{"type":86,"value":3409},"https:\u002F\u002Fexample.com\u002Favatar.png",{"type":80,"tag":155,"props":3411,"children":3412},{"style":275},[3413],{"type":86,"value":3414},"\"\n",{"type":80,"tag":155,"props":3416,"children":3417},{"class":157,"line":189},[3418,3423,3428,3433],{"type":80,"tag":155,"props":3419,"children":3420},{"style":326},[3421],{"type":86,"value":3422},"  width",{"type":80,"tag":155,"props":3424,"children":3425},{"style":275},[3426],{"type":86,"value":3427},"={",{"type":80,"tag":155,"props":3429,"children":3430},{"style":522},[3431],{"type":86,"value":3432},"100",{"type":80,"tag":155,"props":3434,"children":3435},{"style":275},[3436],{"type":86,"value":831},{"type":80,"tag":155,"props":3438,"children":3439},{"class":157,"line":41},[3440,3445,3449,3453],{"type":80,"tag":155,"props":3441,"children":3442},{"style":326},[3443],{"type":86,"value":3444},"  height",{"type":80,"tag":155,"props":3446,"children":3447},{"style":275},[3448],{"type":86,"value":3427},{"type":80,"tag":155,"props":3450,"children":3451},{"style":522},[3452],{"type":86,"value":3432},{"type":80,"tag":155,"props":3454,"children":3455},{"style":275},[3456],{"type":86,"value":831},{"type":80,"tag":155,"props":3458,"children":3459},{"class":157,"line":207},[3460,3465,3469,3474,3478,3482,3487,3491],{"type":80,"tag":155,"props":3461,"children":3462},{"style":326},[3463],{"type":86,"value":3464},"  style",{"type":80,"tag":155,"props":3466,"children":3467},{"style":275},[3468],{"type":86,"value":1779},{"type":80,"tag":155,"props":3470,"children":3471},{"style":434},[3472],{"type":86,"value":3473}," borderRadius",{"type":80,"tag":155,"props":3475,"children":3476},{"style":275},[3477],{"type":86,"value":246},{"type":80,"tag":155,"props":3479,"children":3480},{"style":275},[3481],{"type":86,"value":299},{"type":80,"tag":155,"props":3483,"children":3484},{"style":178},[3485],{"type":86,"value":3486},"50%",{"type":80,"tag":155,"props":3488,"children":3489},{"style":275},[3490],{"type":86,"value":501},{"type":80,"tag":155,"props":3492,"children":3493},{"style":275},[3494],{"type":86,"value":3495}," }}\n",{"type":80,"tag":155,"props":3497,"children":3498},{"class":157,"line":362},[3499],{"type":80,"tag":155,"props":3500,"children":3501},{"style":275},[3502],{"type":86,"value":3503},"\u002F>\n",{"type":80,"tag":89,"props":3505,"children":3506},{},[3507],{"type":86,"value":3508},"For local images, convert to base64 or use absolute deployment URLs.",{"type":80,"tag":103,"props":3510,"children":3512},{"id":3511},"key-patterns",[3513],{"type":86,"value":3514},"Key Patterns",{"type":80,"tag":3516,"props":3517,"children":3518},"ol",{},[3519,3542,3565,3582,3607,3617,3647],{"type":80,"tag":2126,"props":3520,"children":3521},{},[3522,3533,3535,3540],{"type":80,"tag":113,"props":3523,"children":3524},{},[3525,3526,3531],{"type":86,"value":3360},{"type":80,"tag":95,"props":3527,"children":3529},{"className":3528},[],[3530],{"type":86,"value":66},{"type":86,"value":3532}," in Next.js projects",{"type":86,"value":3534}," — it re-exports ",{"type":80,"tag":95,"props":3536,"children":3538},{"className":3537},[],[3539],{"type":86,"value":134},{"type":86,"value":3541}," with built-in optimizations",{"type":80,"tag":2126,"props":3543,"children":3544},{},[3545,3556,3558,3563],{"type":80,"tag":113,"props":3546,"children":3547},{},[3548,3550],{"type":86,"value":3549},"Always set ",{"type":80,"tag":95,"props":3551,"children":3553},{"className":3552},[],[3554],{"type":86,"value":3555},"runtime = 'edge'",{"type":86,"value":3557}," — Satori and ",{"type":80,"tag":95,"props":3559,"children":3561},{"className":3560},[],[3562],{"type":86,"value":65},{"type":86,"value":3564}," are designed for edge runtimes",{"type":80,"tag":2126,"props":3566,"children":3567},{},[3568,3580],{"type":80,"tag":113,"props":3569,"children":3570},{},[3571,3572,3578],{"type":86,"value":3360},{"type":80,"tag":95,"props":3573,"children":3575},{"className":3574},[],[3576],{"type":86,"value":3577},"display: 'flex'",{"type":86,"value":3579}," everywhere",{"type":86,"value":3581}," — Satori defaults to flex layout, no block or grid support",{"type":80,"tag":2126,"props":3583,"children":3584},{},[3585,3590,3592,3597,3599,3605],{"type":80,"tag":113,"props":3586,"children":3587},{},[3588],{"type":86,"value":3589},"Load fonts explicitly",{"type":86,"value":3591}," — no system fonts are available; bundle ",{"type":80,"tag":95,"props":3593,"children":3595},{"className":3594},[],[3596],{"type":86,"value":3003},{"type":86,"value":3598},"\u002F",{"type":80,"tag":95,"props":3600,"children":3602},{"className":3601},[],[3603],{"type":86,"value":3604},".woff",{"type":86,"value":3606}," files or fetch from CDN",{"type":80,"tag":2126,"props":3608,"children":3609},{},[3610,3615],{"type":80,"tag":113,"props":3611,"children":3612},{},[3613],{"type":86,"value":3614},"Standard OG dimensions are 1200×630",{"type":86,"value":3616}," — this is the most widely supported size",{"type":80,"tag":2126,"props":3618,"children":3619},{},[3620,3633,3635,3640,3642],{"type":80,"tag":113,"props":3621,"children":3622},{},[3623,3625,3631],{"type":86,"value":3624},"Use convention files for automatic ",{"type":80,"tag":95,"props":3626,"children":3628},{"className":3627},[],[3629],{"type":86,"value":3630},"\u003Cmeta>",{"type":86,"value":3632}," tags",{"type":86,"value":3634}," — ",{"type":80,"tag":95,"props":3636,"children":3638},{"className":3637},[],[3639],{"type":86,"value":848},{"type":86,"value":3641}," and ",{"type":80,"tag":95,"props":3643,"children":3645},{"className":3644},[],[3646],{"type":86,"value":856},{"type":80,"tag":2126,"props":3648,"children":3649},{},[3650,3655],{"type":80,"tag":113,"props":3651,"children":3652},{},[3653],{"type":86,"value":3654},"Inline styles only",{"type":86,"value":3656}," — Satori does not support external CSS or CSS-in-JS libraries",{"type":80,"tag":103,"props":3658,"children":3660},{"id":3659},"official-resources",[3661],{"type":86,"value":3662},"Official Resources",{"type":80,"tag":2122,"props":3664,"children":3665},{},[3666,3677,3687,3696],{"type":80,"tag":2126,"props":3667,"children":3668},{},[3669],{"type":80,"tag":3670,"props":3671,"children":3674},"a",{"href":43,"rel":3672},[3673],"nofollow",[3675],{"type":86,"value":3676},"Satori GitHub",{"type":80,"tag":2126,"props":3678,"children":3679},{},[3680],{"type":80,"tag":3670,"props":3681,"children":3684},{"href":3682,"rel":3683},"https:\u002F\u002Fvercel.com\u002Fdocs\u002Ffunctions\u002Fog-image-generation",[3673],[3685],{"type":86,"value":3686},"Vercel OG Image Generation",{"type":80,"tag":2126,"props":3688,"children":3689},{},[3690],{"type":80,"tag":3670,"props":3691,"children":3693},{"href":44,"rel":3692},[3673],[3694],{"type":86,"value":3695},"Next.js Metadata — OG Images",{"type":80,"tag":2126,"props":3697,"children":3698},{},[3699],{"type":80,"tag":3670,"props":3700,"children":3703},{"href":3701,"rel":3702},"https:\u002F\u002Fog-playground.vercel.app",[3673],[3704],{"type":86,"value":3705},"Satori Playground",{"type":80,"tag":3707,"props":3708,"children":3709},"style",{},[3710],{"type":86,"value":3711},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3713,"total":3831},[3714,3733,3749,3761,3781,3799,3819],{"slug":3715,"name":3715,"fn":3716,"description":3717,"org":3718,"tags":3719,"stars":27,"repoUrl":28,"updatedAt":3732},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3720,3723,3726,3729],{"name":3721,"slug":3722,"type":15},"Accessibility","accessibility",{"name":3724,"slug":3725,"type":15},"Charts","charts",{"name":3727,"slug":3728,"type":15},"Data Visualization","data-visualization",{"name":3730,"slug":3731,"type":15},"Design","design","2026-06-30T19:00:57.102",{"slug":3734,"name":3734,"fn":3735,"description":3736,"org":3737,"tags":3738,"stars":27,"repoUrl":28,"updatedAt":3748},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3739,3742,3745],{"name":3740,"slug":3741,"type":15},"Agents","agents",{"name":3743,"slug":3744,"type":15},"Browser Automation","browser-automation",{"name":3746,"slug":3747,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":3750,"name":3750,"fn":3751,"description":3752,"org":3753,"tags":3754,"stars":27,"repoUrl":28,"updatedAt":3760},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3755,3756,3759],{"name":3743,"slug":3744,"type":15},{"name":3757,"slug":3758,"type":15},"Local Development","local-development",{"name":3746,"slug":3747,"type":15},"2026-04-06T18:41:17.526867",{"slug":3762,"name":3762,"fn":3763,"description":3764,"org":3765,"tags":3766,"stars":27,"repoUrl":28,"updatedAt":3780},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3767,3768,3771,3774,3777],{"name":3740,"slug":3741,"type":15},{"name":3769,"slug":3770,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":3772,"slug":3773,"type":15},"SDK","sdk",{"name":3775,"slug":3776,"type":15},"Serverless","serverless",{"name":3778,"slug":3779,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":3782,"name":3782,"fn":3783,"description":3784,"org":3785,"tags":3786,"stars":27,"repoUrl":28,"updatedAt":3798},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3787,3788,3791,3794,3797],{"name":25,"slug":26,"type":15},{"name":3789,"slug":3790,"type":15},"React","react",{"name":3792,"slug":3793,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":3795,"slug":3796,"type":15},"UI Components","ui-components",{"name":13,"slug":14,"type":15},"2026-04-06T18:40:59.619419",{"slug":3800,"name":3800,"fn":3801,"description":3802,"org":3803,"tags":3804,"stars":27,"repoUrl":28,"updatedAt":3818},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3805,3808,3811,3814,3817],{"name":3806,"slug":3807,"type":15},"AI Infrastructure","ai-infrastructure",{"name":3809,"slug":3810,"type":15},"Cost Optimization","cost-optimization",{"name":3812,"slug":3813,"type":15},"LLM","llm",{"name":3815,"slug":3816,"type":15},"Performance","performance",{"name":13,"slug":14,"type":15},"2026-04-06T18:40:44.377464",{"slug":3820,"name":3820,"fn":3821,"description":3822,"org":3823,"tags":3824,"stars":27,"repoUrl":28,"updatedAt":3830},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3825,3826,3829],{"name":3809,"slug":3810,"type":15},{"name":3827,"slug":3828,"type":15},"Database","database",{"name":3812,"slug":3813,"type":15},"2026-04-06T18:41:08.513425",600,{"items":3833,"total":4030},[3834,3855,3878,3895,3911,3928,3947,3959,3973,3987,3999,4014],{"slug":3835,"name":3835,"fn":3836,"description":3837,"org":3838,"tags":3839,"stars":3852,"repoUrl":3853,"updatedAt":3854},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3840,3843,3846,3849],{"name":3841,"slug":3842,"type":15},"Documents","documents",{"name":3844,"slug":3845,"type":15},"Healthcare","healthcare",{"name":3847,"slug":3848,"type":15},"Insurance","insurance",{"name":3850,"slug":3851,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":3856,"name":3856,"fn":3857,"description":3858,"org":3859,"tags":3860,"stars":3875,"repoUrl":3876,"updatedAt":3877},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3861,3864,3866,3869,3872],{"name":3862,"slug":3863,"type":15},".NET","dotnet",{"name":3865,"slug":3856,"type":15},"ASP.NET Core",{"name":3867,"slug":3868,"type":15},"Blazor","blazor",{"name":3870,"slug":3871,"type":15},"C#","csharp",{"name":3873,"slug":3874,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":3879,"name":3879,"fn":3880,"description":3881,"org":3882,"tags":3883,"stars":3875,"repoUrl":3876,"updatedAt":3894},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3884,3887,3890,3893],{"name":3885,"slug":3886,"type":15},"Apps SDK","apps-sdk",{"name":3888,"slug":3889,"type":15},"ChatGPT","chatgpt",{"name":3891,"slug":3892,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":3896,"name":3896,"fn":3897,"description":3898,"org":3899,"tags":3900,"stars":3875,"repoUrl":3876,"updatedAt":3910},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3901,3904,3907],{"name":3902,"slug":3903,"type":15},"API Development","api-development",{"name":3905,"slug":3906,"type":15},"CLI","cli",{"name":3908,"slug":3909,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":3912,"name":3912,"fn":3913,"description":3914,"org":3915,"tags":3916,"stars":3875,"repoUrl":3876,"updatedAt":3927},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3917,3920,3923,3924],{"name":3918,"slug":3919,"type":15},"Cloudflare","cloudflare",{"name":3921,"slug":3922,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":3769,"slug":3770,"type":15},{"name":3925,"slug":3926,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":3929,"name":3929,"fn":3930,"description":3931,"org":3932,"tags":3933,"stars":3875,"repoUrl":3876,"updatedAt":3946},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3934,3937,3940,3943],{"name":3935,"slug":3936,"type":15},"Productivity","productivity",{"name":3938,"slug":3939,"type":15},"Project Management","project-management",{"name":3941,"slug":3942,"type":15},"Strategy","strategy",{"name":3944,"slug":3945,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":3948,"name":3948,"fn":3949,"description":3950,"org":3951,"tags":3952,"stars":3875,"repoUrl":3876,"updatedAt":3958},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3953,3954,3956,3957],{"name":3730,"slug":3731,"type":15},{"name":3955,"slug":3948,"type":15},"Figma",{"name":25,"slug":26,"type":15},{"name":3891,"slug":3892,"type":15},"2026-04-12T05:06:47.939943",{"slug":3960,"name":3960,"fn":3961,"description":3962,"org":3963,"tags":3964,"stars":3875,"repoUrl":3876,"updatedAt":3972},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3965,3966,3969,3970,3971],{"name":3730,"slug":3731,"type":15},{"name":3967,"slug":3968,"type":15},"Design System","design-system",{"name":3955,"slug":3948,"type":15},{"name":25,"slug":26,"type":15},{"name":3795,"slug":3796,"type":15},"2026-05-10T05:59:52.971881",{"slug":3974,"name":3974,"fn":3975,"description":3976,"org":3977,"tags":3978,"stars":3875,"repoUrl":3876,"updatedAt":3986},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3979,3980,3981,3984,3985],{"name":3730,"slug":3731,"type":15},{"name":3967,"slug":3968,"type":15},{"name":3982,"slug":3983,"type":15},"Documentation","documentation",{"name":3955,"slug":3948,"type":15},{"name":25,"slug":26,"type":15},"2026-05-16T06:07:47.821474",{"slug":3988,"name":3988,"fn":3989,"description":3990,"org":3991,"tags":3992,"stars":3875,"repoUrl":3876,"updatedAt":3998},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[3993,3994,3995,3996,3997],{"name":3730,"slug":3731,"type":15},{"name":3955,"slug":3948,"type":15},{"name":25,"slug":26,"type":15},{"name":3795,"slug":3796,"type":15},{"name":3873,"slug":3874,"type":15},"2026-05-16T06:07:40.583615",{"slug":4000,"name":4000,"fn":4001,"description":4002,"org":4003,"tags":4004,"stars":3875,"repoUrl":3876,"updatedAt":4013},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4005,4008,4009,4012],{"name":4006,"slug":4007,"type":15},"Animation","animation",{"name":3908,"slug":3909,"type":15},{"name":4010,"slug":4011,"type":15},"Creative","creative",{"name":3730,"slug":3731,"type":15},"2026-05-02T05:31:48.48485",{"slug":4015,"name":4015,"fn":4016,"description":4017,"org":4018,"tags":4019,"stars":3875,"repoUrl":3876,"updatedAt":4029},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[4020,4021,4022,4025,4028],{"name":4010,"slug":4011,"type":15},{"name":3730,"slug":3731,"type":15},{"name":4023,"slug":4024,"type":15},"Image Generation","image-generation",{"name":4026,"slug":4027,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]