Open Source

Images as Code.

Write JSX compositions with full CSS support. Export to PNG. No browser window, no server, no ceremony.

npm install grafex

card.tsx

import type { CompositionConfig } from 'grafex';

export const config: CompositionConfig = {
  width: 1200,
  height: 630,
};

export default function Card() {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        background: 'linear-gradient(135deg, #667eea, #764ba2)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontSize: '64px',
        fontWeight: 'bold',
        fontFamily: 'system-ui, sans-serif',
      }}
    >
      Hello, Grafex!
    </div>
  );
}

Hello, Grafex!

output.png

Why Grafex?

Full CSS. Real browser engine. Zero configuration. The image composition tool you actually wanted.

Full CSS Support

Flexbox, Grid, gradients, shadows, custom fonts — real CSS rendered by a real browser engine. Not a subset. Not reimplemented. The real thing.

Fast Renders

5-50ms warm renders. Sub-second cold starts. WebKit launches once and stays ready.

AI-Friendly

Compositions are plain JSX functions. Any LLM can write them, modify them, and reason about them.

No Browser Window

WebKit runs headlessly behind the scenes. No Puppeteer scripts. No browser lifecycle management. Just import, render, done.

Compositions Are Just Functions

A composition is a TSX file that exports a function and a config. Accept props, use components, style with CSS — all the patterns you already know.

og-card.tsx

export const config = {
  width: 600,
  height: 400,
};

export default function OgCard() {
  return (
    <div style={{
      width: '100%',
      height: '100%',
      background: 'linear-gradient(145deg, #0f172a, #1e293b)',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      padding: '52px',
      fontFamily: 'system-ui, sans-serif',
      position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <div style={{
          background: 'rgba(163,230,53,0.15)',
          border: '1px solid rgba(163,230,53,0.3)',
          borderRadius: '6px',
          padding: '4px 12px',
          color: '#A3E635',
          fontSize: '12px',
          fontWeight: '600',
          textTransform: 'uppercase',
        }}>
          Tutorial
        </div>
        <span style={{ color: '#475569', fontSize: '13px' }}>5 min read</span>
      </div>

      <div>
        <div style={{ color: '#F1F5F9', fontSize: '36px', fontWeight: '700' }}>
          Building Modern APIs
        </div>
        <div style={{ color: '#94A3B8', fontSize: '16px', marginTop: '16px' }}>
          Best practices for REST and GraphQL in 2026
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <div style={{
          width: '36px', height: '36px', borderRadius: '50%',
          background: 'linear-gradient(135deg, #F472B6, #38BDF8)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'white', fontSize: '14px', fontWeight: '700',
        }}>JS</div>
        <div>
          <div style={{ color: '#E2E8F0', fontSize: '14px' }}>Jane Smith</div>
          <div style={{ color: '#64748B', fontSize: '12px' }}>March 15, 2026</div>
        </div>
      </div>
    </div>
  );
}

Generated OG card showing 'Building Modern APIs'

og-card.png

bash

npx grafex export -f og-card.tsx -o og-card.png

See more examples →

What You Can Build

Open Graph Images

Dynamic social previews for every page, generated at build time.

Social Media Cards

Branded cards for Twitter, LinkedIn, and Instagram — from one template.

Email & Web Banners

Programmatic banner generation with consistent branding across campaigns.

Certificates

Event certificates and awards with dynamic names, dates, and details.

Video Thumbnails

YouTube and podcast covers generated from a single template.

Diagrams & Charts

Architecture diagrams and data visualizations, version-controlled as code.

Get Started in 3 Steps

Install

One package. WebKit is downloaded automatically.

bash

npm install grafex

Write a composition

Create a TSX file. Export a component and a config.

card.tsx

import type { CompositionConfig } from 'grafex';

export const config: CompositionConfig = { width: 1200, height: 630 };

export default function Card() {
  return (
    <div style={{
      background: 'linear-gradient(135deg, #667eea, #764ba2)',
      display: 'flex', alignItems: 'center',
      fontSize: '64px', color: 'white',
    }}>
      Hello, Grafex!
    </div>
  );
}

Export

Run one command. Get a PNG.

bash

npx grafex export -f card.tsx -o card.png

Start Making Images.

npm install grafex

Get Started View on GitHub