{"id":13459615,"url":"https://github.com/vercel/satori","last_synced_at":"2026-03-05T14:06:10.532Z","repository":{"id":61197990,"uuid":"452769633","full_name":"vercel/satori","owner":"vercel","description":"Enlightened library to convert HTML and CSS to SVG","archived":false,"fork":false,"pushed_at":"2025-03-27T18:25:40.000Z","size":5130,"stargazers_count":11725,"open_issues_count":110,"forks_count":272,"subscribers_count":78,"default_branch":"main","last_synced_at":"2025-05-05T20:45:45.878Z","etag":null,"topics":["css","image","image-generation","image-generator","jsx","opengraph-images","satori","svg","vercel"],"latest_commit_sha":null,"homepage":"https://og-playground.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vercel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-27T17:01:04.000Z","updated_at":"2025-05-05T16:35:33.000Z","dependencies_parsed_at":"2024-11-06T05:59:13.502Z","dependency_job_id":"9df7927a-231b-46a1-b936-7490cde27508","html_url":"https://github.com/vercel/satori","commit_stats":{"total_commits":357,"total_committers":51,"mean_commits":7.0,"dds":0.4061624649859944,"last_synced_commit":"57a89ea6b1a4fdf3c273b4f6d4f384fa02cacc5c"},"previous_names":[],"tags_count":67,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fsatori","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fsatori/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fsatori/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vercel%2Fsatori/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vercel","download_url":"https://codeload.github.com/vercel/satori/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253929321,"owners_count":21985801,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","image","image-generation","image-generator","jsx","opengraph-images","satori","svg","vercel"],"created_at":"2024-07-31T10:00:22.799Z","updated_at":"2026-03-05T14:06:10.518Z","avatar_url":"https://github.com/vercel.png","language":"TypeScript","readme":"![Satori](.github/card.png)\n\n**Satori**: Enlightened library to convert HTML and CSS to SVG.\n\n\u003e **Note**\n\u003e\n\u003e To use Satori in your project to generate PNG images like Open Graph images and social cards, check out our [announcement](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images) and [Vercel’s Open Graph Image Generation →](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)\n\u003e\n\u003e To use it in Next.js, take a look at the [Next.js Open Graph Image Generation template →](https://vercel.com/templates/next.js/og-image-generation)\n\n## Overview\n\nSatori supports the JSX syntax, which makes it very straightforward to use. Here’s an overview of the basic usage:\n\n```jsx\n// api.jsx\nimport satori from 'satori'\n\nconst svg = await satori(\n  \u003cdiv style={{ color: 'black' }}\u003ehello, world\u003c/div\u003e,\n  {\n    width: 600,\n    height: 400,\n    fonts: [\n      {\n        name: 'Roboto',\n        // Use `fs` (Node.js only) or `fetch` to read the font as Buffer/ArrayBuffer and provide `data` here.\n        data: robotoArrayBuffer,\n        weight: 400,\n        style: 'normal',\n      },\n    ],\n  },\n)\n```\n\nSatori will render the element into a 600×400 SVG, and return the SVG string:\n\n```js\n'\u003csvg ...\u003e\u003cpath d=\"...\" fill=\"black\"\u003e\u003c/path\u003e\u003c/svg\u003e'\n```\n\nUnder the hood, it handles layout calculation, font, typography and more, to generate a SVG that matches the exact same HTML and CSS in a browser.\n\n\u003cbr/\u003e\n\n## Documentation\n\n### JSX\n\nSatori only accepts JSX elements that are pure and stateless. You can use a subset of HTML\nelements (see section below), or custom React components, but React APIs such as `useState`, `useEffect`, `dangerouslySetInnerHTML` are not supported.\n\n#### Use without JSX\n\nIf you don't have JSX transpiler enabled, you can simply pass [React-elements-like objects](https://reactjs.org/docs/introducing-jsx.html) that have `type`, `props.children` and `props.style` (and other properties too) directly:\n\n```js\nawait satori(\n  {\n    type: 'div',\n    props: {\n      children: 'hello, world',\n      style: { color: 'black' },\n    },\n  },\n  options\n)\n```\n\n### HTML Elements\n\nSatori supports a limited subset of HTML and CSS features, due to its special use cases. In general, only these static and visible elements and properties that are implemented.\n\nFor example, the `\u003cinput\u003e` HTML element, the `cursor` CSS property are not in consideration. And you can't use `\u003cstyle\u003e` tags or external resources via `\u003clink\u003e` or `\u003cscript\u003e`.\n\nAlso, Satori does not guarantee that the SVG will 100% match the browser-rendered HTML output since Satori implements its own layout engine based on the [SVG 1.1 spec](https://www.w3.org/TR/SVG11).\n\nYou can find the list of supported HTML elements and their preset styles [here](https://github.com/vercel/satori/blob/main/src/handler/presets.ts).\n\n#### Images\n\nYou can use `\u003cimg\u003e` to embed images. However, `width`, and `height` attributes are recommended to set:\n\n```jsx\nawait satori(\n  \u003cimg src=\"https://picsum.photos/200/300\" width={200} height={300} /\u003e,\n  options\n)\n```\n\nWhen using `background-image`, the image will be stretched to fit the element by default if you don't specify the size.\n\nIf you want to render the generated SVG to another image format such as PNG, it would be better to use base64 encoded image data (or buffer) directly as `props.src` so no extra I/O is needed in Satori:\n\n```jsx\nawait satori(\n  \u003cimg src=\"data:image/png;base64,...\" width={200} height={300} /\u003e,\n  // Or src={arrayBuffer}, src={buffer}\n  options\n)\n```\n\n### CSS\n\nSatori uses the same Flexbox [layout engine](https://yogalayout.com) as React Native, and it’s **not** a complete CSS implementation. However, it supports a subset of the spec that covers most common CSS features:\n\n\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n  \u003cth\u003eProperty\u003c/th\u003e\n  \u003cth\u003eProperty Expanded\u003c/th\u003e\n  \u003cth\u003eSupported Values\u003c/th\u003e\n  \u003cth\u003eExample\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003cb\u003eCSS Variables\u003c/b\u003e\u003c/td\u003e\n\u003ctd\u003eSupported, including \u003ccode\u003e--var-name\u003c/code\u003e declaration and \u003ccode\u003evar(--var-name)\u003c/code\u003e usage with fallback values\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=rVLRTsIwFP2V5hIzTbY4wBjTIC9oos-a8MJLt95tha4lXQfOZf9uOxwRlTeeentO7zntuW0h1RyBwoyL3UoRUtlG4mPb-pqQIIpsgSVGqZbaBJQEnJlNImsMwsOJAkVeWEeM4_hqAPeC2-IXxkW1laxxaCbxY0B9_SQMplZo5TjnU5dqYJkUuXq1WFaeQmXRDNS6rqzImoV2oPL-p3TC0k1udK34wt_c8aMsy46urutNfCIl08kPaPn9lvs47tGuW6m5L3w4x2RIn4VT3DFzfZLPTeBa5i8opQ7JUhvJZ7eu8x-Jv7lqw1TuUr2E-lmJaBKSUTaNx_H4vNqwQgh668dSAW2hHynQBxcNHGYO9M5vOCZ1DjRjssIQsNRr8d5s_Zey-37ndHy4z2WCHKg1NXYhWJa4E4W333tz6L4A\"\u003eExample\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003edisplay\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003eflex\u003c/code\u003e, \u003ccode\u003econtents\u003c/code\u003e, \u003ccode\u003enone\u003c/code\u003e, default to \u003ccode\u003eflex\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eposition\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003erelative\u003c/code\u003e, \u003ccode\u003estatic\u003c/code\u003e and \u003ccode\u003eabsolute\u003c/code\u003e, default to \u003ccode\u003erelative\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003ecolor\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"5\"\u003e\u003ccode\u003emargin\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emarginTop\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emarginRight\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emarginBottom\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emarginLeft\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"5\"\u003ePosition\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etop\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eright\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ebottom\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eleft\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"3\"\u003eSize\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ewidth\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eheight\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"5\"\u003eMin \u0026 max size\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eminWidth\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported except for \u003ccode\u003emin-content\u003c/code\u003e, \u003ccode\u003emax-content\u003c/code\u003e and \u003ccode\u003efit-content\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eminHeight\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported except for \u003ccode\u003emin-content\u003c/code\u003e, \u003ccode\u003emax-content\u003c/code\u003e and \u003ccode\u003efit-content\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emaxWidth\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported except for \u003ccode\u003emin-content\u003c/code\u003e, \u003ccode\u003emax-content\u003c/code\u003e and \u003ccode\u003efit-content\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emaxHeight\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported except for \u003ccode\u003emin-content\u003c/code\u003e, \u003ccode\u003emax-content\u003c/code\u003e and \u003ccode\u003efit-content\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"5\"\u003e\u003ccode\u003eborder\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eWidth (\u003ccode\u003eborderWidth\u003c/code\u003e, \u003ccode\u003eborderTopWidth\u003c/code\u003e, ...)\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eStyle (\u003ccode\u003eborderStyle\u003c/code\u003e, \u003ccode\u003eborderTopStyle\u003c/code\u003e, ...)\u003c/td\u003e\u003ctd\u003e\u003ccode\u003esolid\u003c/code\u003e and \u003ccode\u003edashed\u003c/code\u003e, default to \u003ccode\u003esolid\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eColor (\u003ccode\u003eborderColor\u003c/code\u003e, \u003ccode\u003eborderTopColor\u003c/code\u003e, ...)\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\n  Shorthand (\u003ccode\u003eborder\u003c/code\u003e, \u003ccode\u003eborderTop\u003c/code\u003e, ...)\u003c/td\u003e\u003ctd\u003eSupported, i.e. \u003ccode\u003e1px solid gray\u003c/code\u003e\u003cbr/\u003e\n\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"6\"\u003e\u003ccode\u003eborderRadius\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eborderTopLeftRadius\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eborderTopRightRadius\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eborderBottomLeftRadius\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eborderBottomRightRadius\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eShorthand\u003c/td\u003e\u003ctd\u003eSupported, i.e. \u003ccode\u003e5px\u003c/code\u003e, \u003ccode\u003e50% / 5px\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"11\"\u003eFlex\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eflexDirection\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ecolumn\u003c/code\u003e, \u003ccode\u003erow\u003c/code\u003e, \u003ccode\u003erow-reverse\u003c/code\u003e, \u003ccode\u003ecolumn-reverse\u003c/code\u003e, default to \u003ccode\u003erow\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eflexWrap\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ewrap\u003c/code\u003e, \u003ccode\u003enowrap\u003c/code\u003e, \u003ccode\u003ewrap-reverse\u003c/code\u003e, default to \u003ccode\u003ewrap\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eflexGrow\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eflexShrink\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eflexBasis\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported except for \u003ccode\u003eauto\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ealignItems\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003estretch\u003c/code\u003e, \u003ccode\u003ecenter\u003c/code\u003e, \u003ccode\u003eflex-start\u003c/code\u003e, \u003ccode\u003eflex-end\u003c/code\u003e, \u003ccode\u003ebaseline\u003c/code\u003e, \u003ccode\u003enormal\u003c/code\u003e, default to \u003ccode\u003estretch\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ealignContent\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ealignSelf\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ejustifyContent\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003egap\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"5\"\u003eFont\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003efontFamily\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003efontSize\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003efontWeight\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003efontStyle\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"13\"\u003eText\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etabSize\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etextAlign\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003estart\u003c/code\u003e, \u003ccode\u003eend\u003c/code\u003e, \u003ccode\u003eleft\u003c/code\u003e, \u003ccode\u003eright\u003c/code\u003e, \u003ccode\u003ecenter\u003c/code\u003e, \u003ccode\u003ejustify\u003c/code\u003e, default to \u003ccode\u003estart\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etextIndent\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported, including negative values (hanging indent)\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etextTransform\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003enone\u003c/code\u003e, \u003ccode\u003elowercase\u003c/code\u003e, \u003ccode\u003euppercase\u003c/code\u003e, \u003ccode\u003ecapitalize\u003c/code\u003e, defaults to \u003ccode\u003enone\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etextOverflow\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003eclip\u003c/code\u003e, \u003ccode\u003eellipsis\u003c/code\u003e, defaults to \u003ccode\u003eclip\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etextDecoration\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupport line types \u003ccode\u003eunderline\u003c/code\u003e and \u003ccode\u003eline-through\u003c/code\u003e, and styles \u003ccode\u003edotted\u003c/code\u003e, \u003ccode\u003edashed\u003c/code\u003e, \u003ccode\u003edouble\u003c/code\u003e, \u003ccode\u003esolid\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=pVPLTsMwEPwVaytUkAKkPCRklV4oXwDHXhx7YxtcO3Ic2hLl37GTtEKIQynywTvjndGstG6BO4FAYS70x8oSUoedwce2TTUhCrVUgZLpLM_PptlAbrQI6gcndF0ZtotsaXC7Z1O91B550M7GN-5Ms7b714oJoa2kZJaPTMH4u_SuseLJGeejYlKW5cHN2fCiP5GS25uRkqxK8gS6bmUXqUiTHMYgAbdhidx5NmawzuI0di9SMb-OzceoYiT0Ro_SAzpan5ovg4qzSdVbfCf-noIIFwIK4lH0bgM8KQ0RrFbRqjDNMNyAT8rUFAbJhHP-_1CDl5cFO8-z_lzdX_ySb39DBq5KTjXQFvoVBfqQ5xkMOwz0LgGBRSOBlszUmAGu3Zt-3VXpA4RNj6JP2rPndYECaPANdhkEVsQOhca4jfNGQPcF\"\u003eExample\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etextShadow\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003elineHeight\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003eletterSpacing\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ewhiteSpace\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003enormal\u003c/code\u003e, \u003ccode\u003epre\u003c/code\u003e, \u003ccode\u003epre-wrap\u003c/code\u003e, \u003ccode\u003epre-line\u003c/code\u003e, \u003ccode\u003enowrap\u003c/code\u003e, defaults to \u003ccode\u003enormal\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ewordBreak\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003enormal\u003c/code\u003e, \u003ccode\u003ebreak-all\u003c/code\u003e, \u003ccode\u003ebreak-word\u003c/code\u003e, \u003ccode\u003ekeep-all\u003c/code\u003e, defaults to \u003ccode\u003enormal\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003etextWrap\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003ewrap\u003c/code\u003e, \u003ccode\u003ebalance\u003c/code\u003e, defaults to \u003ccode\u003ewrap\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"7\"\u003eBackground\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ebackgroundColor\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported, single value\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ebackgroundImage\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003elinear-gradient\u003c/code\u003e, \u003ccode\u003erepeating-linear-gradient\u003c/code\u003e, \u003ccode\u003eradial-gradient\u003c/code\u003e, \u003ccode\u003erepeating-radial-gradient\u003c/code\u003e, \u003ccode\u003eurl\u003c/code\u003e, single value\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ebackgroundPosition\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupport single value\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ebackgroundSize\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupport \u003ccode\u003ecover\u003c/code\u003e, \u003ccode\u003econtain\u003c/code\u003e, \u003ccode\u003eauto\u003c/code\u003e, and two-value sizes i.e. \u003ccode\u003e10px 20%\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=ZZXXjqNIFIZfpeWb2RW9Itik3tmRwAQDJgeDNTfkHEwwYdTvvnhGWq003HDOqZ8fDlX11Y9D2Ebx4ePwNcqf35u3t2Fcq_ifHz9e8dtbFudpNn68wRD0_qsy59GY_b8Q-GGZ9u3UREbcxf4u_tK0f_U_4y-_acx8i3dF2Dajnze_jwu1n74EU1_9Efmj_5G_CmDXpH8H_hBjp_fcoVVjhiQ-ban9Ukw7Y-10j3j9ldtnyttvND6LubMHTABVrO4YJypeXGSdBtuwwCRWANMRpy7W49jmUFvuyU0fnmZeduAiZ6ZZaueUXM0V5VDBNs2OtfX6MimW0iTTBD0JeYbFeSOrpLGR5_iMkrHGYSAGEFJl77xRCsjNDC_MmIHV8KDOdsboszJAXchEZifrokEtSyrT5cUkbkifODIuyKC2oblXy8yAqyt-VLcJr8UhYJc2PGoWrW4dppebvMnexThypKZD-IRPx2dFjjnj3eAxqMU1XLTipNKFhrv-1Te3ZWE41aKHtHUogVtC98ZlniyqI9lkcOS5xQnRSlTV0-tKaHckalSGADnQlda0i12YNG7wcO3J-IrGTiWLXtviZ6tc1LDpTrmyhe5uybE1CSYwMHinsikaLkdSepmcxdufvxhlwGcYZFBUF9yqXt9fIT5MC0L3H99JUi4UOqz4PPHkFsq72zM8WjYnYGqRWukUlGh4gcFkBi7zyiOuA0c-D4-VW-zWoSnBLSFHV2qkeLMWcwGd7jWpWVCi5AgElPbN7TB1vJpQbagUW4USzTgmUwZs5ckWiKtbeoovGVYKVZYplg37_NjrsGiWVdUBSYO2HADFotULPEJ1kl-3_QMDRpkEjjNQJkq5rpYMXk6gMN14z9Nh9lIhURHsoqlSm5QUTb2sFTs1ag4JjyqDx8eRoJY24GdbW3E7mrfC2jYpulOIfsX9q8znWkYJIU1Lpl3RHbd1jvHq2hVJ27w8Hu0DQtHereC9qSlsH2pBzdY8HbMclOVBaxkCNQPbCS280YnTjDj1vRVdXk2GTcHUtcLIC2kuZmc-F0CjT5O0bxLguUZX0-46gocAOemyO9ud16EQRYoEzoUHKbUT2c6Z6iVo8ikGz_c28GlfMMZFXId-3ndkk55Y6pEpLu00ERw5DiE5ibPw6Jg0pxiXMCDPY5Xv0ooyy07SOY2ItUJA0GcAc95NKKS17ERr91XBFBjo7kTiSi-nM-MjY9_WyXH_6BRO6OxOPK9k9bA925tNd9HmcmRzKI6YXmAFWWNmoOixTTtukLU1GRFeZIuaqTM24QNH063N0Ubq86kAJkdSfl7B89Dt0_KkVXVtMRYgb4Wsogggys-O-89XYZGtuDtasBrKY6ZmsIg42314VQNix3wBqQC70a0ODgxY3BbqKvgnxsscyioJTTAUoJHSrXUiwWwtLqtAakcVCILGBrn4C1p0-WKUzlCXhIAKTFUJTXzV9zXLWaU56fX5_OfvsDy3VdvvsJyzfIy_vEY_P783376CO8u_fW8O74e2G_O2GQ4fPw4_wX34IHZwH35h_fBxeiVRHEzp4SPxqyF-P8R1W-TW2r3OhHH-me0-yc5rtg7i6PAx9lP8-X4Y_WBXZHFVtXPbV9Hh818\"\u003eExample\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ebackgroundClip\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003eborder-box\u003c/code\u003e, \u003ccode\u003etext\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003ebackgroundRepeat\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003erepeat\u003c/code\u003e, \u003ccode\u003erepeat-x\u003c/code\u003e, \u003ccode\u003erepeat-y\u003c/code\u003e, \u003ccode\u003eno-repeat\u003c/code\u003e, defaults to \u003ccode\u003erepeat\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"5\"\u003e\u003ccode\u003etransform\u003c/code\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eTranslate (\u003ccode\u003etranslate\u003c/code\u003e, \u003ccode\u003etranslateX\u003c/code\u003e, \u003ccode\u003etranslateY\u003c/code\u003e)\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eRotate\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eScale (\u003ccode\u003escale\u003c/code\u003e, \u003ccode\u003escaleX\u003c/code\u003e, \u003ccode\u003escaleY\u003c/code\u003e)\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eSkew (\u003ccode\u003eskew\u003c/code\u003e, \u003ccode\u003eskewX\u003c/code\u003e, \u003ccode\u003eskewY\u003c/code\u003e)\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003etransformOrigin\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupport one-value and two-value syntax (both relative and absolute values)\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eobjectFit\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=7VVNj5swEP0ro6mqJFJaslJVVVbYQ6X2F_TIBewBvHVsZMwmEeK_75BAAvsl7WUPq-WC5j0P896zNLQonSIUuFxBfAttYgHyxsqgnYXf7rBsQZbaKE8WutWZB_AUGm9hq_Q91OFoKG4HBmCvVSgF3Gw26xEqSRdlmGNK15VJjwIWuaHD4oJnqfxfeNdYxdSXPM8nlPOKPMM31QFqZ7RiIWpxprvudjzXjoq7M7KNWOeJZaB_DfKXA83s2PrYzMs6L0Z_TEzNrI5gN8i46NtyrpeCS70rrhVr8DJOsAyhqkUU8XBJpTPqu3TRz83mwPOiyhYJTntOWuKW-WHYVE3ccs8Mf2pzYmjB2r9OjU59PUu67I5k-Kt7PtfGDFcyt98_0TWDaBrCh05Eunvyn5HMI7Eh1fZdQ-FMXonkhUTeK5Bapoa-Kbd_aybX3bZKbAeQWFyjq_r1XaNo8aQOxS9eUnhWg6LfWKgoawoUeWpqWiPt3J3-d6z6P0HYnyr-Ts7X9GeXkUIRfEPdGkOa8YmSjHF7543C7gE\"\u003eExample\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eobjectPosition\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupports keywords (\u003ccode\u003etop\u003c/code\u003e, \u003ccode\u003ebottom\u003c/code\u003e, \u003ccode\u003eleft\u003c/code\u003e, \u003ccode\u003eright\u003c/code\u003e, \u003ccode\u003ecenter\u003c/code\u003e), percentages (e.g., \u003ccode\u003e25% 75%\u003c/code\u003e), lengths (e.g., \u003ccode\u003e10px 20px\u003c/code\u003e), and mixed values (e.g., \u003ccode\u003eleft 20%\u003c/code\u003e). Defaults to \u003ccode\u003ecenter\u003c/code\u003e (\u003ccode\u003e50% 50%\u003c/code\u003e).\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=7VTBitswEP2VQaUkgbTOQilFxHsotOceevTFlsa2torGyHKTYPzvHSV24rS7Xfayp_XFzHsj6b0nMb1QpFFIsVxBeg995gDKzqlgyMFXOix7ULWx2qODYXXmATyGzjvYavMb2nC0mPYjA7A3OtQS7jab9QTVaKo63GLatI3NjxIWpcXD4oIXufpVeeqcZupdWZYzirxGz_Bdc4CWrNEsRC_O9DDcT339pHg4I9uEdZ5YBuJvlL8caWanpX-beVrnxeinmakbqxM4jDIu-rac66Xg0uyqa8UavEozUYfQtDJJ-HCFNVn9UVHyebM58HlJ46pMzNectKQ98-NhczVpz2tu8H9tzgwtWPv7udG5r0dJKh5Qhe8m8opcyI17vOUHtSa-rNiHLqAfL-82qPgl17SSeVxv2XFfQSHQ7lWz4-j-k9wTwb1Wbq3KLX7QtH8-ukAN-LjtC9O7zpBV5gaAzIm1oCbu2grZi5MPIb_wMBBn3ULGySA0Fl0lZJnbFtcCd_Rgfh6bOHHD_lTxPiXf-7ddgVrI4Dsc1iLkBXfUaC3tyVsthj8\"\u003eExample\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eopacity\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eboxSizing\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eboxShadow\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eoverflow\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ccode\u003evisible\u003c/code\u003e and \u003ccode\u003ehidden\u003c/code\u003e, default to \u003ccode\u003evisible\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003efilter\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003eclipPath\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=XVJNb9wgEP0rI6poW8lJnX6pstpe0h7aQ1UlrXLJBZvBZosZBDgbZ7X_PQMbZze5wPCGmXmPx1Z0pFA04osytzcOIKbZ4tftNscAA5p-SA2szuv6ZFXtwY1RaXiBKRO9lTOj2uLdgub4uwnYJUOOcx3ZaXRLVlrTu58Jx5hT6BKGJbWeYjJ6viAGXZ7_PN3K7n8faHLqgiwFzr_SWj9N5aorc48NvH93BF0_avlU1wXd7W7ctxws0l-KP8j_8FhypP4Y8lIp4_oGzg_YgSKzY6FDau2EC0WAzhr_R5Z39GTnntzrj_UJ1BU34Z3jKi_lVEGd4zerfXEmDlCoA_yLqKCdIdKIQBrSgLChYNUqgpWhx5igo9FLZzBW8Bvv0tk6AjrZWoww0wSJoAsoE4KerD2NianDNbYgvbemk9m8mGdwLbqstEyxXMHNL1F2CTTXTyFPkE6BYbP6wIV81dMGAzeGS_b0tJWZ7y95K6-6YHzi4WTzNU2hdNUylrbtZKyKZ8Wft2wQy112UQnyhZRotqL4IZrP7IfY-yWabI5Q2E69aLS0ESuBI63N39nnv5425cR98r_4MbaoRJPChLtKJNnyjQGtpfKMYvcA\"\u003eExample\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd colspan=\"2\"\u003e\u003ccode\u003elineClamp\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=5VPBbtQwEP2VkRFakNKSshxQBBwoXDhwaEFc9uLYk6xbx2PZk-6G1Up8DR_GlzDOkgr13FtPGb_xvPf8ojkoQxZVo95Zd7cJAJknj-8Ph1IDbNH1W25gdVHXz1fVCdw5y9sHmHU5ej0J2nncL2ipP7mEhh0F6Rny4xCWbtTWutA3cFH_Q1ptbvtEY7CX5CnJxLOu6-7ZKPC1-4kNrF_P0PG4CR9KsZh_aP9_X60nc7tQAXgX8NLrIQrbPTjo1LvwkZhpkJF1HferU69IAcxiAN8zWmgnyDQgUAe8RdhR8naVwQsFZgZDQ9TBYa7gK-75_CYDBt16zDDRCExgEmpG6EbvzzLLy-EHtqBj9M7oElguGjKLocQ0q3iZEPIr1Iahk_kxFQUdLLjA2CcZlKuRdpiEGK7GzGetLn6_6Dt9bZKLLOIkz-8l0DSzdjrPtO3ovM3nc6KvJNJHyHa1ho368-s3vDBihQb5fVayEa-BX27UE093-apKUZxNqeag5v1Szdu6rtRpAVXzphwstmOvmk77jJXCgW7ctymW7eXdfBKesiSfhxatajiNeKwU61ZubNF7mmNUx78\"\u003eExample\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\u003ctd rowspan=\"5\"\u003eMask\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emaskImage\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003elinear-gradient(...)\u003c/code\u003e, \u003ccode\u003eradial-gradient(...)\u003c/code\u003e, \u003ccode\u003eurl(...)\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=pZJfb9MwFMW_imVp2ZDS5s_I1kULSMAkhgRoYlJf-uLYN8ltHTvYDm2o-t2xuxXBXvcQXed3rONj37unXAugJb0V-GulCLFuklDt92FNSAfYdq4k51manp3HT3CLwnUvmEA7SDZ52kjYnWhYf0ID3KFWXuNajr06qUxiq-4d9DZIoByYk7QercNm-qg9VOH8_-XG8x_4G0pymf-Dls9pr9L0mdaMb1qjRyW8x2jkRefcYMskwZ61YOejCrFtN-e6T4ZOOz3LinyRL65v3ubZdTZrari8KkQmbhh_jzuJdWXqWTbP51n0s1oUUdNX66GNuNFD5TP6MkXbKsvTNOK2sqatI9yhqGD60vHPHxq2fMDv67v022NbNA9vTjfqmd3ch0w-p2ECmZy1oXrLC46GSyDMkSI9C19MajlCTJxhPj8zftNfoyXUG3RfX21HkuTYBf-whhhowGMOBBXpXC_DWYfDSr1bqdvET46vNKZ6CH22tNzT44zQMrxDTJ-miJahL1RAPba0bJi0EFPo9RofpyGMoNse_7xRaOZdX4OgpTMjHGLqWO13dCCl3mojBT38AQ\"\u003eExample\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emaskPosition\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupported\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=pVJda9swFP0rQlC3Ayf-6NKmpt5gW2Ed7KOskJe8yNK1fRNZ8iR5iRfy3yelCayFPfXBvtK5h3uP7j07yrUAWtBbgb-XihDrRgnlbhfOhLSATesKcp6l6dl5_ARuULj2BSbQ9pKNHq0lbE9oOH9CA9yhVj7HtRw6dcoyiY26d9DZkALlwJxSq8E6rMeP2oMq9H-erj3-E_9AQS7zf6DFUe1Vmh7RivF1Y_SghK8xGHnROtfbIkmwYw3Y6aCCbNtOue6SvtVOT7JZPs_n1zdv8-w6m9QVXF7NRCZuGH-PW4lVaapJNs2nWfSrnM-iuitXfRNxo_vSa_RhjDZllqdpxG1pTVNFuEVRwvil5Z8_1GzxgN9Xd-m3x2ZWP7w5vahjdn0fNHmdhglkctKE6EtecDRcAmGOzNKz8MWkkgPExBnm9TPjSc8K_dAWjxP3O-q35PA_MRZQrdF9fX1DkiSHRfnZG2KgBo9zIKhI6zr5stl_RAXafr9U75bqNvEe9JHGVPeBammxowe30SJMNKZPfqRF2DAVUA0NLWomLcQUOr3Cx7EPZnabw80XCra46yoQtHBmgH1MHas8owUp9UYbKej-Lw\"\u003eExample\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emaskSize\u003c/code\u003e\u003c/td\u003e\u003ctd\u003eSupport two-value size i.e. \u003ccode\u003e10px 20%\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=pVLfb9MwEP5XLEvLhpQ2P0a3LlpAAiYxJEATk_rSF8e-JNc6drAd2lD1f8duV8H6yoN19ved7j7ffTvKtQBa0HuBv5aKEOtGCeVuF-6EtIBN6wpymaXpxWV8BDcoXHuGCbS9ZKNHawnbExrun9AAd6iV57iWQ6dOLJPYqEcHnQ0UKAfmRK0G67AeP2oPqtD_NV17_Af-hoJc5_9Aixe1N2n6glaMrxujByV8jcHIq9a53hZJgh1rwE4HFWTbdsp1l_StdnqSzfJ5Pr-9e5tnt9mkruD6ZiYyccf4e9xKrEpTTbJpPs2in-V8FtVdueqbiBvdl16jD2O0KbM8TSNuS2uaKsItihLGLy3__KFmiyf8vnpIvz03s_rpzelHHbPrx6DJ6zRMIJOTJkRf8oqj4RIIc2SWXoQTk0oOEBNnmNfPjE96Veg4Gr-ffkvyvztaQLVG9_X_O5EkOWzID90QAzV4nANBRVrXyfNm52oCv98v1buluk-863ykMdV98IilxY4e_EWLMMOYHh1Ii7BTKqAaGlrUTFqIKXR6hc9jH-zrNoeXLxSM8NBVIGjhzAD7mDpW-YwWpNQbbaSg-z8\"\u003eExample\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003e\u003ccode\u003emaskRepeat\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ccode\u003erepeat\u003c/code\u003e, \u003ccode\u003erepeat-x\u003c/code\u003e, \u003ccode\u003erepeat-y\u003c/code\u003e, \u003ccode\u003eno-repeat\u003c/code\u003e, defaults to \u003ccode\u003erepeat\u003c/code\u003e\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://og-playground.vercel.app/?share=nVbpjqNIEn6VkqXVzMg1AhtjQ-3MStwGA-Ywl9U_hssJ5jSHAbf63TdxdfXUzh4_FhllHF8cGZkm4usirKJ48bb4LUrvX8qXl7ab8vj3r19n-uUliVOQdG8vP61Q9G8_vb4LhzTqkr_IorStc3-C0ksejx_SmWbTJg67tCqhLqzyvig_tH6eglLs4qKdVXHZxc2H6tq3XXqZmAoKyzn-v6ovUG6mj_jtBVt_Ejnfs92i6Hdp4IcZaKq-jKCPvsl_jvzOf0sLH8RIXYK_B34bbzevqU0fjQE9CKCi4KOaVsJZAFK0PvMaQ3lwYbPiSNqzgHJV00BFqmk34XaGiEbucHlxslDqMNtRAJpyJkUpM0NTFAcXzqco6ztPUSbggs-8BTgY_AMvwl9UU9Qz_lPvPP0-WaiEz6zinkKoPwLIs9_lkGcATGEO-o6jTUANn3iKeJJ2F-6CJ58PJp8_ICFzA7QeFZqSbqHwBOW1zSeow62UY6HeAxNPzgKZnk18E7jfU2LHzbFMulBY5ZHAgVhYtUGpbGMWTT3HuHuFtZ35wLFRzyRScQ-2EDNEQkuKeaJaDM0GmJSLrNcrzGYQr5uDyFBA20vZ-VqbBuf98BkWRqGZUhXtjeGYEvcIizC5DB9yQU7niRiPpwyXH9QkP8RJdqF9unrEDo56Luig_fXD9yf_3NlVr2GRw3zye5DS01nwtp4j3SNXJ8VU_IH_eD9ygfjifEVTf2-gIVvd5TUO8-CzYC3l8rNWJOo750J-cHBfRKqB6rMf4t2-1mDsPCiN5Bn_uhk15t3umJGT79h9JPCQJ_tP9oSM_YfcP-rGwFrAPViZIUAbiH2v97P-p81BsHcJDc-ZWvGSwfHWkRZUm-8UDuWsMsJM7ITXvl8YYxpVaWIcDFuQMp-lDYZXUyUzNVLX4KYTMBgGNxwFaEUoF84QWe6mXMYz13GVeU91ISF0sPF8oDNpbYtxHVWOmSxRzOXLyHCzEenHcHk5as7liJUdRl2SjhWUE3PZ2gdM43nDPrEUGwnJxHISvL6WuHksd8qjuK66bTDEQyKKHu5qIGNFxvAo5byyizvKZ1y7x28hf-CjZXAw2EGzWn_bP04b2lbtMx3Y0jpXaDNktVtXbPH7o8A3k8q5jhVNxsBWhe0F8jqqYqJnr17XAO9o1UZrAcDRo3tY7Zc5wGhikM4Wilz3YTH1akMOy1XMMGOVEZokexWWlo7HMrJ4mBzVqM7u8aSyN7SWb870cAKdUCqJ6c2z3xr6gV61QqrD22-O_pRosq3iHQHGzFRQ5Yisjo61Tseq0VByWxKmdVrHa9fRk122bBpiUHnDCTG_OR28OudwcW0E4qGozUaOdnHZRLesiUbXkbg1bku7lGdSrNTYBlHqgxtVdr9RjvZyd8xXd4BUYBvou7VvXLoxGkldoSrXdvmzRHnurQiLi9WfDPsgi_dJE5cB4pIZG6gaVm1qkrxQVSUqZU3d0bDMtxfdU3kSiVwJKVrPXy8HaWAJzNBDjq4entTprFOeWL32HNwX1u2dXVfSQJQeeyMecFNHn6ezUUmaO9md4uaKL3twybpTNuQ1QYGym8gitAjRu7DoFaQkWHI7miNzZ2UUsuEE2LlmjNrpp5XTh3mM-eXt_mi2O1kor9tBsfwbxgILhzkJ68PRPh25nlhRkxTTuWQq6dWVpp3BVPWq6ree34P7ivDPAljuwsQbB8fxjnTSn-lsx7sPMdwQe48zB3lI0rI02Vgz2kBmsColkI3M3QuwOSUEzZuCd99fNIykkP0YINFwL6LNUiQmKiAPoo5PqkVFGc1fEaQtxrW6psdO4C5IhRxC1916J3mrxeDerWKcRC_0etLjCiR7IexI2eG0w57VB4S0zd53hq0xZI7sNuqZ2ka4KhmHvBQke2sbO_gn013TtlADlAmPyZEcSqsdVrqFl8IbmAgqnY9pFukjifCFN1mcGPOEFPsIAi-V0rgqfdMZSlIkpEGa4ua3J44SQ4thMqQRr8ujjuxUKgCIq3Iaheg6fbOvF2qN895725IMC-eaTAIA_P77Lx_NvfDbTJw79NvLH3laxn7zK2j8KIUTwM9d9dLMPf71Jcj7-PWla_yyrf0G6n7545P9-3AwTyj1-LJaz8tn90Zcx_48VjRP4tcfSicOsrRTPmXwl6GhvYPlWOQfg4O2V9fnicZ8x0B92OyOLDWIKV2dnbz097B5XMGgMCKICnsK1_MHGk0VczNCzBp-2DG9IDeaKQ4iSwHlJEIsNSrXp49N4Ix9-PjUXGCjiyYcUyb8HhbhfcYpDPmIijDVruPguUYlCjBmho4KMzxUk6Yhpn2-zDDILNeqJ0g_LKDDWDI7v0_dKLMZpJWVyHM45NeqOazgikMfhgJt1KvVzuts66QiOBd5G8D9RuukjgQrFRliCZvOnMvyx0H8ezH_n-P808v_ONQ_Qf_laL99-1L-40v5GwLHXLguXhdVPQ-l7eLt6-I50C7eZpevi_eRd_E2D5GLKA56sHi7-Hkbvy7iorqmp6me5-VueHLQ0Tx5ckUQR4u3runjb6-Lzg8gIonzvBqqJo8W3_4J\"\u003eExample\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd rowspan=\"2\"\u003e\u003ccode\u003eWebkitTextStroke\u003c/code\u003e\n\u003ctd\u003e\u003ccode\u003eWebkitTextStrokeWidth\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003ccode\u003eWebkitTextStrokeColor\u003c/code\u003e\u003c/td\u003e\n\u003ctd\u003eSupported\u003c/td\u003e\n\u003ctd\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/tbody\u003e\n\u003c/table\u003e\n\nNote:\n\n1. Three-dimensional transforms are not supported.\n2. There is no `z-index` support in SVG. Elements that come later in the document will be painted on top.\n3. `calc` isn't supported.\n4. `currentColor` support is only available for the `color` property.\n5. CSS variables (custom properties) are supported, including inheritance, fallback values, and nested variables.\n\n### Language and Typography\n\nAdvanced typography features such as kerning, ligatures and other OpenType features are not currently supported.\n\nRTL languages are not supported either.\n\n#### Fonts\n\nSatori currently supports three font formats: TTF, OTF and WOFF. Note that WOFF2 is not supported at the moment. You must specify the font if any text is rendered with Satori, and pass the font data as ArrayBuffer (web) or Buffer (Node.js):\n\n```js\nawait satori(\n  \u003cdiv style={{ fontFamily: 'Inter' }}\u003eHello\u003c/div\u003e,\n  {\n    width: 600,\n    height: 400,\n    fonts: [\n      {\n        name: 'Inter',\n        data: inter,\n        weight: 400,\n        style: 'normal',\n      },\n      {\n        name: 'Inter',\n        data: interBold,\n        weight: 700,\n        style: 'normal',\n      },\n    ],\n  }\n)\n```\n\nMultiple fonts can be passed to Satori and used in `fontFamily`.\n\n\u003e [!TIP]\n\u003e We recommend you define global fonts instead of creating a new object and pass it to satori for better performance, if your fonts do not change. [Read it for more detail](https://github.com/vercel/satori/issues/590)\n\n\n\n#### Emojis\n\nTo render custom images for specific graphemes, you can use `graphemeImages` option to map the grapheme to an image source:\n\n```jsx\nawait satori(\n  \u003cdiv\u003eNext.js is 🤯!\u003c/div\u003e,\n  {\n    ...,\n    graphemeImages: {\n      '🤯': 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f92f.svg',\n    },\n  }\n)\n```\n\nThe image will be resized to the current font-size (both width and height) as a square.\n\n#### Locales\n\nSatori supports rendering text in different locales. You can specify the supported locales via the `lang` attribute:\n\n```jsx\nawait satori(\n  \u003cdiv lang=\"ja-JP\"\u003e骨\u003c/div\u003e\n)\n```\n\nSame characters can be rendered differently in different locales, you can specify the locale when necessary to force it to render with a specific font and locale. Check out [this example](https://og-playground.vercel.app/?share=nVLdSsMwFH6VcEC86VgdXoyweTMVpyiCA296kzWnbWaalCZ160rfwAcRH8Bn0rcwWVdQEYTdnJzz_ZyEnNNArDkChQkXz5EixNha4rRpfE4IF6aQrKbkOJG4OQ461OfnosTYCq0cF2tZ5apnMxRpZh18EoZHPbgW3Ga_sIJxLlS6Q4sNGbnQU0yKVM0t5sa3R2Wx7KlVZaxI6pl2oPLX_KQTh1-yXEj_6LlnAhLBLXOJYJLMY61MBN_VD2KLlIzGe2jJ4qe01JXiMy116bqsM2Gxc7Stj2edcmIKpohkKp1GsGKD6_sI9hQhn2-vHy_ve-HQK_9ybbPB7O4Q1-LxENfVzX-uydDtgTshAF348RqgDeymB3QchgF04wV66guOyyoFmjBpMADM9Uos6sLvk13vKtfH__FFvkQO1JYVtu0X) to learn more.\n\nSupported locales are exported as the `Locale` enum type.\n\n#### Dynamically Load Emojis and Fonts\n\nSatori supports dynamically loading emoji images (grapheme pictures) and fonts. The `loadAdditionalAsset` function will be called when a text segment is rendered but missing the image or font:\n\n```jsx\nawait satori(\n  \u003cdiv\u003e👋 你好\u003c/div\u003e,\n  {\n    // `code` will be the detected language code, `emoji` if it's an Emoji, or `unknown` if not able to tell.\n    // `segment` will be the content to render.\n    loadAdditionalAsset: async (code: string, segment: string) =\u003e {\n      if (code === 'emoji') {\n        // if segment is an emoji\n        return `data:image/svg+xml;base64,...`\n      }\n\n      // if segment is normal text\n      return loadFontFromSystem(code)\n    }\n  }\n)\n```\n\n### Runtime Support\n\nSatori can be directly used in browser, Node.js (\u003e= 16), and Web Workers. It bundles its underlying WASM dependencies as base64-encoded strings and loads them at runtime.\n\nIf there is a limitation on dynamically loading WASM (e.g. Cloudflare Workers), you can use the Standalone Build which is mentioned below.\n\n#### Standalone Build of Satori\n\nSatori's standalone build doesn't include Yoga's WASM binary by default, and you need to load it manually before using Satori.\n\nFirst, you need to download the `yoga.wasm` binary from [Satori build](https://unpkg.com/satori/) and provide it yourself. Let's use `fetch` to load it directly from the CDN as an example:\n\n```jsx\nimport satori, { init } from 'satori/standalone'\n\nconst res = await fetch('https://unpkg.com/satori/yoga.wasm')\nconst yogaWasm = await res.arrayBuffer()\n\nawait init(yogaWasm)\n\n// Now you can use satori as usual\nconst svg = await satori(...)\n```\n\nOf course, you can also load the `yoga.wasm` file from your local disk via `fs.readFile` in Node.js or other methods.\n\n### Font Embedding\n\nBy default, Satori renders the text as `\u003cpath\u003e` in SVG, instead of `\u003ctext\u003e`. That means it embeds the font path data as inlined information, so succeeding processes (e.g. render the SVG on another platform) don’t need to deal with font files anymore.\n\nYou can turn off this behavior by setting `embedFont` to `false`, and Satori will use `\u003ctext\u003e` instead:\n\n```jsx\nconst svg = await satori(\n  \u003cdiv style={{ color: 'black' }}\u003ehello, world\u003c/div\u003e,\n  {\n    ...,\n    embedFont: false,\n  },\n)\n```\n\n### Pixel Grid Rounding\n\nSet `pointScaleFactor` to control how layout values are rounded to the pixel grid. This parameter is passed directly to [Yoga’s `pointScaleFactor`](https://www.yogalayout.dev/docs/getting-started/configuring-yoga#point-scale-factor) and improves rendering precision on high-DPI displays.\n\n```jsx\nconst svg = await satori(\n  \u003cdiv style={{ color: 'black' }}\u003ehello, world\u003c/div\u003e,\n  {\n    ...,\n    pointScaleFactor: 2,\n  },\n)\n```\n\n### Debug\n\nTo draw the bounding box for debugging, you can pass `debug: true` as an option:\n\n```jsx\nconst svg = await satori(\n  \u003cdiv style={{ color: 'black' }}\u003ehello, world\u003c/div\u003e,\n  {\n    ...,\n    debug: true,\n  },\n)\n```\n\n\u003cbr/\u003e\n\n## Contribute\n\nYou can use the [Vercel OG Image Playground](https://og-playground.vercel.app/) to test and report bugs of Satori.  Please follow our [contribution guidelines](/CONTRIBUTING.md) before opening a Pull Request.\n\n\u003cbr/\u003e\n\n## Author\n\n- Shu Ding ([@shuding](https://twitter.com/shuding))\n\n---\n\n\u003ca aria-label=\"Vercel logo\" href=\"https://vercel.com\"\u003e\n  \u003cimg src=\"https://badgen.net/badge/icon/Made%20by%20Vercel?icon=zeit\u0026label\u0026color=black\u0026labelColor=black\"\u003e\n\u003c/a\u003e\n","funding_links":[],"categories":["TypeScript","Officially for Next.js","Repository","Tools","2D GUI","语言资源库","Useful Tools \u0026 Libraries","OG Image Generation","Uncategorized"],"sub_categories":["Image","HTML Layout","typescript","Developer libraries for building frames","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Fsatori","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvercel%2Fsatori","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvercel%2Fsatori/lists"}