resvg-js
next-banner
resvg-js | next-banner | |
---|---|---|
3 | 1 | |
1,414 | 45 | |
- | - | |
8.3 | 10.0 | |
21 days ago | over 1 year ago | |
TypeScript | JavaScript | |
Mozilla Public License 2.0 | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
resvg-js
-
Dynamic OG image with SvelteKit and Satori
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.
-
Vercel OG Image Generation: Fast, dynamic social card images at the Edge
There are already a lot of choices to convert SVGs to PNGs, what Vercel uses is https://github.com/yisibl/resvg-js. And Sharp is another good option.
- resvg-js 2.0: A High-Performance SVG Renderer and Toolkit
next-banner
-
Vercel OG Image Generation: Fast, dynamic social card images at the Edge
Sure. This is what I did first. https://github.com/alvarlagerlof/next-banner. Its using one puppeteer process at build, for static sites. Made for Next.js.
However I was working on another version, which just reads html files for metadata instead. Not really shareable and working, built it's using vite to build a few different frameworks. https://github.com/alvarlagerlof/ogimage
What are some alternatives?
nodejs-snowflake - Generate time sortable 64 bits unique ids for distributed systems (inspired from twitter snowflake)
Donasi-52 - web donasi smada 52
rust-wasm-on-lambda-edge - Rust/WASM on AWS Lambda@Edge (CloudFront)
satori - Enlightened library to convert HTML and CSS to SVG
vtracer - Raster to Vector Graphics Converter
ogimage
next-netlify-starter - A one-click starter project for Next and Netlify, moved to https://github.com/netlify-templates/next-netlify-starter
sveltekit-og - Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit
react-awesome-slider - React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
wasm-learning - Building Rust functions for Node.js to take advantage of Rust's performance, WebAssembly's security and portability, and JavaScript's ease-of-use. Demo code and recipes.