koishi

⬇️ Install

koishi depends on the npm packages @comamoca/komeiji and satori. Install them first.

Node.js

npm install @comamoca/komeiji satori

Bun

bun add @comamoca/komeiji satori

Deno

deno add npm:@comamoca/komeiji npm:satori

Then add koishi to your Gleam project:

gleam add koishi

🖼️ Usage

From a Lustre element tree

import gleam/io
import gleam/javascript/promise
import koishi
import koishi/lustre
import lustre/attribute
import lustre/element/html

pub fn main() -> promise.Promise(Nil) {
  // Load your font file as a BitArray. satori accepts
  // TTF, OTF, and WOFF — WOFF2 is not supported.
  let font_bytes = read_font_bytes()
  let font = koishi.Font("Inter", font_bytes, 400, koishi.NormalStyle)
  let options =
    koishi.Options(width: 1200, height: 630, fonts: [font], debug: False)

  let og_image =
    html.div([attribute.style("display", "flex")], [
      html.h1([], [html.text("Hello from koishi!")]),
    ])

  lustre.to_svg(og_image, options)
  |> promise.map(fn(result) {
    case result {
      Ok(svg) -> io.println(svg)
      Error(koishi.SatoriError(message)) -> io.println("Error: " <> message)
    }
    Nil
  })
}

From a plain HTML string

koishi.to_svg("<div style=\"display:flex;\">Hello</div>", options)

Requirements: Node.js ≥ 20.19 (Bun and Deno also supported). satori accepts TTF/OTF/WOFF fonts — WOFF2 is not supported.

Further documentation can be found at https://hexdocs.pm/koishi.

⛏️ Development

npm ci       # install npm deps (komeiji, satori, test font fixture)
gleam test   # runs on the JavaScript target

A runnable sample that renders an OG image from a Lustre tree and writes og-image.svg lives in the standalone example/ package:

cd example
gleam run

📜 License

MIT

💕 Special Thanks

• komeiji
• satori