JSX to PNG via Satori and resvg-js

generate-image.js

const htm = require('htm');
const { default: satori } = require('satori');
const { Resvg } = require('@resvg/resvg-js')
const { promises } = require('node:fs');
const { join } = require('node:path')

const html = htm.bind(function jsxToObject(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children?.length === 1 ? children[0] : children,
    }
  };
});

const openSansFilePath = join(
  __dirname,
  './open-sans/static/OpenSans/OpenSans-Regular.ttf'
);

(async () => {
  const openSansBuffer = await promises.readFile(openSansFilePath); // can be cached

  const t = performance.now();
  const svg = await satori(
    html`<div style=${{ color: 'black', fontFamily: 'Open Sans' }}>The Quick Brown Fox Jumped Over The Lazy Dog</div>`,
    {
      width: 600,
      height: 400,
      fonts: [
        {
          name: 'Open Sans',
          data: openSansBuffer,
          weight: 400,
          style: 'normal',
        },
      ],
    },
  );

  const resvg = new Resvg(svg, {
    background: 'rgba(238, 235, 230, .9)',
    fitTo: {
      mode: 'width',
      value: 600,
    },
    font: {
      fontFiles: [openSansFilePath], // Load custom fonts.
      loadSystemFonts: false, // It will be faster to disable loading system fonts.
      defaultFontFamily: 'Open Sans',
    },
    // imageRendering: 1,
    // shapeRendering: 2,
    // logLevel: 'debug', // Default Value: error
  });
  const pngData = resvg.render();
  const pngBuffer = pngData.asPng();

  await promises.writeFile(join(__dirname, './output.png'), pngBuffer);
  
  console.info('Output PNG Size  :', `${pngData.width} x ${pngData.height}`);
  console.info('Original SVG Size:', `${resvg.width} x ${resvg.height}`);
  console.info('✨ Done in', performance.now() - t, 'ms');
})();