Dynamic OG image with SvelteKit and Satori

• puppeteer

  359 86,832 9.9 TypeScript

  Node.js API for Chrome

  

We all share links/url to our friends and we always see a beautiful image which is OpenGraph(OG) Image. OG images use to be static images and with time we got puppeteer which uses browser to take screenshot of your web page then you serve it from server. Recently, Vercel dropped a bomb @vercel/og with Satori which doesn't need a browser and you can generate Dynamic OG Images on the fly. As we know with every solution, we got some problems to be solved.

• satori

  36 10,146 7.0 TypeScript

  Enlightened library to convert HTML and CSS to SVG

  

We all share links/url to our friends and we always see a beautiful image which is OpenGraph(OG) Image. OG images use to be static images and with time we got puppeteer which uses browser to take screenshot of your web page then you serve it from server. Recently, Vercel dropped a bomb @vercel/og with Satori which doesn't need a browser and you can generate Dynamic OG Images on the fly. As we know with every solution, we got some problems to be solved.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• satori-html

  2 252 0.0 TypeScript

  An HTML adapter for Vercel's Satori

@vercel/og is dependent on Satori. Satori is a new libray that convert HTML and CSS to SVG. Satori only accepts two params those are ReactElement (like JSX) and options. In SvelteKit, we don't have a ReactElement type syntax. Here, we need a html to ReactElement converter and Satori-html is what we need to do that.

• resvg-js

  3 1,414 8.3 TypeScript

  A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.

Note: SVG are not suppose to be served for OG Images (we use png format in OG Images) where we use SVG to PNG coverter Resvg.

• sveltekit-og

  1 174 7.9 TypeScript

  Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit

  

This is a library inspired from @vercel/og and similar to it. I released@ethercorps/sveltekit-og this morning and you can use it with normal html. Here I'm showing you two examples which returns an Image Response.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project