This content originally appeared on Bits and Pieces - Medium and was authored by Guillaume Renard
What if I told you… you could build images with React straight from the browser? Just write HTML and CSS, and you’re done 🤯
My intro is a direct pun to this tweet:
Lee Robinson on Twitter: "What if I told you... you could build OG images with React?Just write HTML and CSS, even @tailwindcss, and you're done 🤯 https://t.co/PQikVrxaJK pic.twitter.com/iyYSkrezY0 / Twitter"
What if I told you... you could build OG images with React?Just write HTML and CSS, even @tailwindcss, and you're done 🤯 https://t.co/PQikVrxaJK pic.twitter.com/iyYSkrezY0
Open Graph (OG) Image Generation
Vercel has just released OG Image Generation, which allows you to easily generate Open Graph (OG) images. If you’re not familiar with them, OG images are the small cards shown when someone shares your page on social media for instance. Eg:
OG Image Generation runs on Vercel Edge Functions, so it’s server side and it is subject to fees based on usage (see Pricing — Vercel). But if you’re willing to generate dynamic card images for your site, it is definitely your best option.
Now, what if we slightly deviated it from its original purpose? We could generate a static image from our site and download it as PNG. For example, we could take some user input, format it nicely with HTML + CSS, then let the user download the result as an image.
Or what if we just didn’t want to use Vercel Edge Functions and have the whole thing run on client side?
Image generation… in the browser
Well, Vercel has got us covered! OG Image Generation is built on top of Satori, a library used to generate SVG from HTML and CSS. Satori uses React, which means that you can pass JSX to it, and expect to receive a SVG string as output 🙌
Now with that at hands, all is left is to do is to save the SVG as an image. But how do you achieve that?
Turns out, Canvas have a toDataURL method which you can use to build a data URL containing a representation of the image as PNG or JPEG. You can then put this URL in a link to download the file.
But hold on! Why am I talking about Canvas when all we have is an SVG? Well, if SVGs don’t have such toDataURL API, they can still be loaded as images. And images can be drawn onto Canvas 💡!
Once you put everything together, you get this (click the Download button below the text):
The code
I’ve put the content of the element used to generate the image inside the Card component. This way, you can independently display it in the app, or pass it to Satori for download. It’s plain HTML with CSS, but we could have rendered other components too, provided that they used elements and styles from the supported subset.
The content of our Card component is adapted from the ‘Vercel’ example from the Vercel OG Image Playground:
When the user clicks the ‘Download’ button, we call satori with the Card component, plus a few options, such as the width and height of the output, and the fonts used in the component. And since our app uses Roboto from Google Fonts, we first need to load it using the snippet given in Using a Custom Font — Vercel Docs.
Once we have the SVG, we can then call downloadSvgAsPng, which initiates the download by simulating a click on a link, where the URL is set to the result of svgAsPngURL:
svgAsPngURL is a function that takes the SVG, loads it to an image, draws the image to a canvas, and return the data URL for its PNG representation:
So, off you go! You can now rebuild Canva inside your browser 😅!
Build apps with reusable components like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- How We Build Micro Frontends
- How we Build a Component Design System
- The Bit Blog
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Build Images with React using Vercel’s Hot New Library: Satori was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Guillaume Renard
Guillaume Renard | Sciencx (2022-10-18T10:11:23+00:00) Build Images with React using Vercel’s Hot New Library: Satori. Retrieved from https://www.scien.cx/2022/10/18/build-images-with-react-using-vercels-hot-new-library-satori/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.