satori
og-image
satori | og-image | |
---|---|---|
36 | 19 | |
10,146 | 3,977 | |
2.0% | - | |
7.0 | 3.6 | |
about 2 months ago | over 1 year ago | |
TypeScript | TypeScript | |
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.
satori
-
Creating an OG image using React and Netlify Edge Functions
View on GitHub
-
Show HN: Dropflow, a CSS layout engine for node or <canvas>
I've used satori [0] on the backend with TypeScript/Deno to render JSX as an SVG (which is then rendered to a PNG).
Satori is meant for rendering Open Graph images (e.g. the little images that come up when you post a link on Twitter/Slack/Facebook), but I found that it works well for rendering arbitrary images. It supports a subset of modern CSS, including flexbox.
My use case is posting match reports for League of Legends into a Discord text channel, e.g. person X just played a match, here are their stats.
It's quite nice because there are almost zero server-side native dependencies (the one exception is the library to convert svg -> png requires some native libraries).
Here's what a match report looks like: [1]
Here's an example of what the JSX looks like: [2]
[0]: https://github.com/vercel/satori
[1]: https://github.com/shepherdjerred/glitter/blob/main/assets/p...
[2]: https://github.com/shepherdjerred/glitter/blob/main/packages...
-
Learn SVG with 25 examples – How to code images in HTML
Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything.
This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1]
[0]: https://github.com/vercel/satori
[1]: https://github.com/shepherdjerred/glitter-boys
-
Open-graph image generation with Astro
Install the @vercel/og package. This library is designed to convert React code into PNG images. It is built on Satori, a library that converts HTML and CSS into SVGs.
-
All you need to know about metadata in next.js 13 by Anik Routh
Examples are available in the Vercel OG Playground.
-
Making Dynamic Website Thumbnail
In this version, we no longer use Puppeteer to capture HTML and return images. Instead, we utilize the @vercel/og library, which employs Satori as its core engine. Satori is a library that converts HTML and CSS into SVG.
-
Generate Dynamic Open Graph and Twitter Images in Next.js
This is made possible thanks to the Dynamic Open Graph Image Generation feature introduced with Next.js version 13.3, and the new Metadata API. In summary, it involves generating images using code (in our case, TSX, HTML, and CSS) with the help of the libraries @vercel/og (already integrated in the App router) and Satori. Satori converts HTML and CSS to SVG, and then resvg-js converts the SVG to a PNG image. All of this in just a few milliseconds!
-
How to generate dynamic OG image using new NextJs with App directory
Here you are returning an ImageResponse instead of the Response, alternatively you can also extend the request and response web api using 'NextRequest' and 'NextRespone', to do that you can import them using import { NextResponse, NextRequest } from 'next/server';, though for this example it is not required. Now if you refresh your browser you will get an image generated by your 'route.js' at request time. Well we are almost done. You can render whatever dynamic data in your image you want and customize your image using og playground, you can even generate 'SVG' on request as the og image. For this example we will fetch a random number from random.org api, then we will use that number as an id and fetch an image from Lorem Picsum, with the same image url we will fetch the description for the image from the Alt Image Generator and generate an image on request with the image that we fetched and the description we have fetched and use it in a design to create the og image. Kind of like that.
-
x-satori --- using Vue file to generate Open Graph SVG or PNG by satori
Use Vue files to generate SVG images by Satori. The image can be generated by running ESM script or CLI.
-
Printing Django view with chart.js graphs, in a PDF
I'm not familiar with it but looks like it's made with nodejs, node uses the same js engine used by chrome, node renders the template and converts it to plain html/css and then they use this library to convert it to png but in the library github page it says that they don't support everything so it's kinda similar to xhtml2pdf or weasyprint
og-image
-
Generate dynamic OG images with Next.js and vercel edge functions
Now here's the thing since these are part of the meta tags, and The image shown in the tags are ... well! images, making them dynamic is a bit tricky. generating images isn't a menial task that just every web server can do ... it's resource intensive, time-consuming and all the other nightmares. and making it part of your dynamic web app is another ball game altogether. So what's new? well, @vercel/og is, this library lets you build image content from HTML/React that too insanely fast, like really fast . and you can pair this with any edge network like AWS Lambda on the edge, Cloudflare workers, etc to make it even faster.
- Show HN: Satori – Convert HTML and CSS to SVG in Milliseconds
-
How does github-readme-stats work?
It’s not embedding. When you paste that image url a serverless function running a headless browser requests say a next app which loads up a page based on the params in the url. Then we take a snapshot and image data is sent back as response to you hence the image appears. You can check out this: with NextJS and puppeteer
- Open Graph Image as a Service
-
Open Graph As A Service
The other day I was looking through a repo and stumbled across someone using Vercel’s open graph image generator (https://og-image.vercel.app/), something I had no idea existed. I was able to set it up and replace my own implementation of something similar on my blog in an evening. My implementation involved generating images at build time with Gatsby, why I ever thought that was a good idea is beyond me.
-
Dynamic Open Graph images with Next.js
But what if the content of the page is not visual at all, and no photo really suits the contents of the page? And what if we have a lot of these pages, with dynamically generated content? Luckily we are not limited to photography, we can use text! The prime example of this is how GitHub generates previews for issue URLs: they generate an image containing enough info such that users know what they will click on. These images are generated on-demand, as storing an image for every GitHub pull request or issue would be unfeasable. Another example is Vercel, which even open sourced their Open Graph Image as a Service that they occasionally use on blog posts or announcements.
-
Seamless Open Graph images generation library for Next.js
Hi, it is basically a embedded, better and easier (API-wise) version of https://github.com/vercel/og-image
-
How do I change the image that Google shows for my website?
Vercel has a really good simple generator if you don’t want to spend time on graphic design: https://og-image.vercel.app
-
I am working on an open graph image generator, and would like some feedback!
After some research, I found out that Vercel made an app (https://og-image.vercel.app/) that was really good, but did not quite fit what I was looking for, so I largely cloned the idea (but with my own code).
-
I made a tool to automatically serve images to use as OpenGraph images (social preview images). Does anyone want this??
Nice work. But I am using my custom fork of https://github.com/vercel/og-image.
What are some alternatives?
Tailwind CSS - A utility-first CSS framework for rapid UI development.
Google Fonts - Font files available from Google Fonts, and a public issue tracker for all things Google Fonts
html2canvas - Screenshots with JavaScript
next-api-og-image - :bowtie: Easy way to generate open-graph images dynamically in HTML or React using Next.js API Routes. Suitable for serverless environment.
tremor - React components to build charts and dashboards
vscode-vercel - WIP: Keep an eye on ▲ Vercel deployments without ever leaving Visual Studio Code.
canvas2svg - Translates HTML5 Canvas draw commands to SVG
stylegan2-pytorch - Simplest working implementation of Stylegan2, state of the art generative adversarial network, in Pytorch. Enabling everyone to experience disentanglement
SVG-to-PDFKit - Insert SVG into a PDF document created with PDFKit
puppeteer-demo - How to use Puppeteer to take webpage screenshots and generate dynamic Open Graph images for social sharing
yoga - Yoga is an embeddable layout engine targeting web standards.
Next.js - The React Framework