Satori means awakening

As Wikipedia told me,

Satori means the experience of awakening ("enlightenment") or apprehension of the true nature of reality.

And the documentation listed that Satori is,

An enlightened library to convert HTML and CSS to SVG.

I’ve used Satori in many personal projects including generating flashcards, Uno playing cards and even an alternative to tweet.pics, on which I am still working. The project itself is a marvel to my eye. I mean, generating a scalable SVG image from pure HTML/CSS, really JSX, is commendable and requires a lot of engineering. Being a small React Library author, I understand the pain of maintaining one.

Now, let me walk you through the mighty Satori.

Satori: The Bad Parts

I’ve made a list of bad parts of Satori and I’ll tell them first so you have the courage to use it like a hero.

• Remember you’ll always need a font file to render SVG and choose TTF, OTF or WOFF. No matter whether you’re on the client side or server side.
• Satori supports JSX and React-element-like objects. So, if you’re like me and don’t want to undergo the pain of setting up Webpack or Rollup, pick it. Satori doesn’t rely on React essentially, just the transformation to convert JSX into React objects.

Satori: The Good Parts

Satori is still under development, so expect anomalies to happen. Satori requires Node or any JS runtime to work, however, it can also be ported on the client side using WASM. We’ll start with Node and later try out WASM alternatives. Also, I’ve Windows so every command will be intended for the command prompt.

To begin, make an empty folder and initialize it with npm.

mkdir try-satori && cd try-satori
npm init -y

Add satori to the project.

npm i satori

You can choose any font from fonts.google.com, (anything besides Poppins, leave that please) and then you need to download the family. Furthermore, extract the fonts and navigate to the folder containing WOFF or TTF files, pick any font and copy the file into the try-satori folder. At this point, your folder structure would look like,

try-satori/
├── node_modules/
├── font_name.ttf
├── package-lock.json
└── package.json

Also, make a slight change in your package.json. This setting enables us to use ESM.

{
  "type": "module",
  "main": "index.js",
  "scripts": {
    "dev": "node index.js",
	 },
}

1. “type”: “module” helps with ESM and enables the use of import statements rather than the require syntax from commonJS.
2. Add a script “dev”: “node index.js” This will establish an alias for running the main script.

Preparations are done. Let’s cook an SVG.