# vercel/satori

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vercel-satori).**

13,028 stars · 333 forks · TypeScript · mpl-2.0

## Links

- GitHub: https://github.com/vercel/satori
- Homepage: https://og-playground.vercel.app
- awesome-repositories: https://awesome-repositories.com/repository/vercel-satori.md

## Topics

`css` `image` `image-generation` `image-generator` `jsx` `opengraph-images` `satori` `svg` `vercel`

## Description

Satori is a library that converts HTML and CSS markup into rasterized images. It functions as a server-side rendering engine designed to transform web layouts into visual assets at runtime, ensuring consistent representation across different platforms and social media sharing services.

The engine distinguishes itself by utilizing a cross-platform flexbox implementation to calculate element positions and dimensions, mirroring the behavior of modern web browsers without requiring a full browser engine. It processes document structures through a virtual tree traversal and employs a specialized parser to translate style properties into layout constraints. To maintain performance, the library performs font subsetting to extract only necessary glyphs and renders shapes and text onto a bitmap surface.

This tool supports automated content marketing workflows by programmatically generating dynamic social media previews. It includes capabilities for caching generated images to minimize redundant processing and reduce infrastructure load when serving assets through a content delivery network.

## Tags

### User Interface & Experience

- [HTML-to-Image Converters](https://awesome-repositories.com/f/user-interface-experience/html-content-processing/html-content-processing/html-to-image-converters.md) — Transforms HTML and CSS markup into rasterized images for dynamic social media previews and content generation.
- [Flexbox Layout Engines](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines.md) — Calculates element positions and dimensions using a cross-platform flexbox implementation that mirrors browser behavior.
- [Font Subsetting Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/font-processing/font-subsetting-engines.md) — Optimizes performance by extracting only necessary glyphs from font files during the image generation process.

### Web Development

- [Server-Side Image Generators](https://awesome-repositories.com/f/web-development/server-side-image-generators.md) — A rendering engine that converts web layouts into visual assets at runtime for improved performance and automated content delivery.
- [Canvas Rasterizers](https://awesome-repositories.com/f/web-development/canvas-rasterizers.md) — Converts web-based layouts and styles into pixel-based image data using a dedicated rendering surface.
- [Component Rasterizers](https://awesome-repositories.com/f/web-development/web-component-renderers/component-rasterizers.md) — Renders complex web-based designs into static image formats to ensure consistent visual representation across different platforms.

### Graphics & Multimedia

- [Server-Side Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/server-side-rendering-architectures/server-side-rendering-engines.md) — Generates visual content on the server to ensure consistent previews across different platforms and social media sharing services.

### Networking & Communication

- [Dynamic Social Image Generators](https://awesome-repositories.com/f/networking-communication/social-media-integrations/social-media-meta-tag-generators/dynamic-social-image-generators.md) — Converts HTML and CSS markup into visual image files at runtime to create custom social media previews. ([source](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation))

### Content Management & Publishing

- [Automated Social Media Assets](https://awesome-repositories.com/f/content-management-publishing/content-aggregation-curation/automated-social-media-assets.md) — Creates custom visual assets for web content by converting HTML and CSS markup into image files at runtime.

### DevOps & Infrastructure

- [Asset Caching Strategies](https://awesome-repositories.com/f/devops-infrastructure/asset-caching-strategies.md) — Applies caching headers to computed images to minimize redundant processing and lower infrastructure costs. ([source](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation))

### Software Engineering & Architecture

- [Dynamic Asset Delivery](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/asset-delivery-optimization/dynamic-asset-delivery.md) — Reduces infrastructure load by caching dynamically generated images and serving them through a content delivery network.