Create OG images for your blog with Next.js

• satori

  36 10,227 7.0 TypeScript

  Enlightened library to convert HTML and CSS to SVG

  

Generating OG images is made possible by the @vercel/og library, itself relying on satori (also made by Vercel). This package allows you to create an image from HTML and CSS code (using JSX). @vercel/og adds a layer to make it easier to use, for instance by loading a default font so you don’t have to.

• vercel

  487 12,234 9.8 TypeScript

  Develop. Preview. Ship.

  

At the same time I released the new design for this blog using Next.js, Vercel announced a new library to generate OpenGraph (OG) images. You know, these images you can see when posting some links on Twitter.

• 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.

  

• go-unsplash

  849 73 1.8 Go

  Go Client for the Unsplash API

(To run the example, go get an image on Unsplash and put it in public/cover.jpg.)

• Tailwind CSS

  1,287 78,889 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

Knowing these constraints, we can still do a lot. A feature I love: you can use TailwindCSS classes natively, using the tw prop on elements (instead of className). If you prefer, you can use the classic style prop to specify CSS properties.

Suggest a related project