Grafex turns JSX components into images. Write your composition in TSX with full CSS support, run one command, and get a pixel-perfect PNG or JPEG back. There’s no browser to open, no server to run — just code in, image out.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.
Quickstart
Install Grafex and export your first image in under 5 minutes.
Composition Config
Set dimensions, output format, scale, CSS, and more via the config export.
CLI Reference
Every flag for
grafex export, grafex dev, and grafex init.Library API
Use
render() and renderAll() programmatically in your Node.js scripts.How it works
Grafex runs your TSX composition through a four-stage pipeline:Transpile
esbuild bundles your
.tsx file, injecting Grafex’s custom JSX runtime (h and Fragment) automatically — no React import needed.Execute
The bundled code runs in Node.js. JSX elements build a virtual tree that is serialized to an HTML string.
Render
The HTML is loaded into a headless WebKit (or Chromium) browser via Playwright. Full CSS — including Tailwind, custom fonts, and
background-image — works as-is.Key capabilities
Variants
Produce multiple outputs (OG image, Twitter card, square thumbnail) from one composition file.
CSS & Tailwind
Load any
.css file — plain stylesheets, Tailwind output, Sass — via config.css.Local Images
Reference
./logo.png directly in <img> or CSS url(). Grafex embeds them automatically.Live Dev Server
grafex dev watches your file and updates the browser preview within ~100ms on every save.High-DPI Output
Set
scale: 2 for retina-quality exports — same layout, double the pixel density.CI Integration
Run headless in GitHub Actions and other CI environments with a one-time browser install step.