Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/andresilva-cc/grafex/llms.txt

Use this file to discover all available pages before exploring further.

This guide walks you through the fastest path from a blank directory to a rendered PNG. You will install Grafex, scaffold the required files with a single command, and run your first export. The whole process takes less than two minutes.
1
Install Grafex
2
Install the grafex package from npm. The postinstall script will automatically download a headless WebKit browser binary — no extra steps needed.
3
npm install grafex
4
Node.js >= 20.0.0 is required. On Linux, WebKit also needs system dependencies — run npx playwright install-deps webkit before installing if you are on a Linux machine or CI runner.
5
Scaffold the starter files
6
Run grafex init to create two files in your current directory: a tsconfig.json pre-configured with the correct JSX compiler options, and a composition.tsx starter file with a working example.
7
npx grafex init
8
You will see output like:
9
Created tsconfig.json
Created composition.tsx
10
If either file already exists it is skipped without error, so it is safe to run init in an existing project.
11
The generated tsconfig.json contains:
12
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}
13
And the generated composition.tsx starter file contains:
14
import type { CompositionConfig } from 'grafex';

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

export default function Composition() {
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'white',
        fontSize: '64px',
        fontWeight: 'bold',
        fontFamily: 'system-ui, sans-serif',
      }}
    >
      Hello, Grafex!
    </div>
  );
}
15
The config export sets the canvas size to 1200×630 pixels — the standard Open Graph image dimension. The default-export function is your composition: a regular JSX component that returns the layout you want rendered.
16
Export the image
17
Run the export command, pointing it at the composition file and specifying an output path:
18
npx grafex export -f composition.tsx -o output.png
19
Grafex will transpile the file, render it in a headless WebKit page, take a screenshot, and write output.png to disk. Open the file to see a 1200×630 PNG with a purple gradient and “Hello, Grafex!” centred in white text.
20
Pass --scale 2 to produce a retina-density image. A 1200×630 composition at --scale 2 outputs a 2400×1260 PNG with the same layout but double the pixel density — ideal for high-DPI displays.

​
Try the live dev server

Once your composition is working, you can start a live preview that re-renders within ~100ms every time you save changes: 
npx grafex dev -f composition.tsx
Open http://localhost:3000 in your browser. Any time you edit and save composition.tsx, the preview updates automatically. Press Ctrl+C to stop the server.

​
What’s next

TypeScript Setup

Understand the custom JSX runtime and how to configure TypeScript manually if you did not use grafex init.

CLI Reference

Explore all flags for the export, dev, and init commands.

Build docs developers (and LLMs) love

Get started for freeTalk to us