https://github.com/natemoo-re/satori-html

An HTML adapter for Vercel's Satori
https://github.com/natemoo-re/satori-html

Last synced: 5 days ago
JSON representation

An HTML adapter for Vercel's Satori

• Host: GitHub
• URL: https://github.com/natemoo-re/satori-html
• Owner: natemoo-re
• Created: 2022-10-11T10:00:15.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-14T21:04:01.000Z (10 months ago)
• Last Synced: 2024-05-01T23:20:31.701Z (6 months ago)
• Language: TypeScript
• Size: 232 KB
• Stars: 252
• Watchers: 3
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• my-awesome-astro - satori-html - Create og images using html strings and [satori](https://github.com/vercel/satori) (What Do I Use... / If I want to create open graph images?)

README

        
# Satori HTML

Generate a [satori](https://github.com/vercel/satori)-friendly VDOM from a string of HTML.

## What is this?

[Satori](https://github.com/vercel/satori) is an amazing library for generating SVG strings from pure HTML and CSS.

Unfortunately, it is built on top of React's JSX and [expects "React-elements-like objects"](https://github.com/vercel/satori#use-without-jsx). This library (`satori-html`) bridges that gap, generating the necessary VDOM object from a string of HTML.

> **Note**

> Satori supports a limited subset of HTML and CSS features, due to its special use case. Please use inline styles rather than class-based styling!

## Example

### API

`satori-html` exports an `html` helper, which transforms HTML strings into an object that is compatible with `satori`.

```js

import satori from "satori";

import { html } from "satori-html";

const markup = html`
hello, world
`;

// See https://github.com/vercel/satori#documentation

const svg = await satori(markup, {

  width: 600,

  height: 400,

  fonts: [],

});

```


The `html` utility can be used as a tagged template literal or as a function.

```js

// Tagged Template Literal

const tagged = html`
hello, world
`;

// Function

const fn = html('
hello, world
');

```