og_image

Generate Open Graph images from Lustre elements.

Works on both Erlang and JavaScript (Node, Deno, Bun) targets.

Built on Takumi (NIF for Erlang, WASM for JavaScript).

Installation

gleam add og_image

Precompiled binaries are included for:

macOS (Apple Silicon and Intel)
Linux (x86_64 and arm64)

Usage

import lustre/attribute
import lustre/element/html
import og_image

pub fn generate_og_image() {
  let el = html.div(
    [attribute.styles([
      #("display", "flex"),
      #("flex-direction", "column"),
      #("justify-content", "center"),
      #("align-items", "center"),
      #("width", "100%"),
      #("height", "100%"),
      #("background-color", "#1a1a2e"),
    ])],
    [
      html.h1(
        [attribute.styles([#("color", "white"), #("font-size", "48px")])],
        [html.text("My Blog Post")],
      ),
    ],
  )

  case og_image.render(el, og_image.defaults()) {
    Ok(png_bytes) -> {
      // Save or serve the PNG bytes
      png_bytes
    }
    Error(err) -> {
      // Handle error
      panic
    }
  }
}

Configuration

The default configuration produces 1200x630 PNG images (standard OG image dimensions):

og_image.defaults()
// => Config(width: 1200, height: 630, format: Png, fonts: [])

Customize dimensions and format:

import og_image.{Config, Jpeg, WebP, Font, Normal, Italic}

// JPEG with 80% quality
let config = Config(..og_image.defaults(), format: Jpeg(80))

// WebP with custom dimensions
let config = Config(
  width: 1200,
  height: 630,
  format: WebP(80),
  fonts: [],
)

// With custom fonts
let config = Config(
  width: 1200,
  height: 630,
  format: Png,
  fonts: [
    Font("Inter", "/path/to/Inter.ttf", 400, Normal),
    Font("Inter", "/path/to/Inter-Italic.ttf", 400, Italic),
  ],
)

Supported Elements

HTML Element	Takumi Type	Notes
div, section, header, footer, nav, main, aside, article	Container	Flexbox layout
p, span, h1-h6, strong, em, a, label, code, pre	Text	Text rendering
img	Image	Supports URLs and data URIs
svg	Image	Inline SVG elements are auto-converted to images

Supported Styles

All CSS flexbox properties are supported, along with:

background-color, background (gradients)
color, font-size, font-family, font-weight
padding, margin, border, border-radius
width, height, min-width, max-width, min-height, max-height
gap, row-gap, column-gap
box-shadow, opacity

Bundled Fonts

The library includes Geist fonts (Sans and Mono) which are used by default. These fonts are licensed under the SIL Open Font License.

Development

# Build NIF from source (requires Rust)
make build

# Run tests
make test

# Clean build artifacts
make clean

License

Apache-2.0