-
-
-
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.
-
-
Another approach is it to create a background image and insert the texts and the metadata with a canvas library like node-canvas. This approach is very well described in this Learn With Jason episode. But with a canvas library we have to specify on which coordinates we want to render our texts and it does not wrap automatically if it becomes to long.
If all these solutions have problems with wrapping texts or require us to build the image with an external tool, why could we just use HTML+CSS to define our image? This is possible! We can create our card with HTML+SVG+CSS, open a browser and create a screenshot of the result. I've used this approach in the past and it worked well. The problem is that the process is very slow. This example creates the cards during the build. Creating the cards during the build requires external caching, because it slows down the build extremely. Also generating cards with this approach in a serverless function is often not possible, because it requires a browser within the function which breaks the size limit of those functions.
@vercel/og promises a new way of generating social media cards, which does not have the downsides of the other approaches. The library uses Satori under the hood. Satori describes itself as follows:
After I worked my way around the size limitation of the edge function, the deployment was successful but the og endpoint responded with an error 500. The error in the vercel log did not help at all. So I started to look at the code and began to comment out parts of the code. Fortunately it didn't take very long to find out that the image of the post was the problem. It looked like there is another size limitation. The image was loaded from Unsplash and about 7mb in size. Luckily Unsplash has an api to resize the image, so we can fetch the image in exactly the size we need.
With an SVG we can define our image as code, which is pretty neat. But SVG is not able to wrap texts. We can use opentype.js to calculate the width of our texts and to wrap it manually. Finally we have to convert the SVG to a PNG, because the most of social media platforms do not support SVG. This approach could work, but requires a lot of code and it is very complicated.
We use og tags which are accepted by most of the social media sites. Except Twitter where I've had strange results if I only used og tags. So I've added the Twitter tags besides the og tags.