Our great sponsors
-
-
open-react-template
A free React / Next.js landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by
-
SurveyJS
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.
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!
Although still an experimental feature of Satori, it’s possible to use Tailwind CSS classes to style the image’s content. We’re big fans of the Css frameworks, as shown by our Tailwind templates, so we had to give it a try!
Related posts
- Create a Carousel with Progress Indicators using Tailwind and Next.js
- Create a Carousel with Progress Indicators using Tailwind and Alpine.js
- Creating a Tooltip-like Testimonial with Tailwind and Alpine.js
- Making a Text Scramble Animation with JavaScript
- Create a Gradient Text Reveal on Scroll with Tailwind CSS and JS