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.

The grafex init command is the fastest way to get a new project ready for writing compositions. Run it once after installing Grafex and it creates two files in your current directory: a tsconfig.json pre-configured with the JSX settings Grafex requires, and a composition.tsx starter file you can edit immediately. If either file already exists it is silently skipped, so the command is always safe to re-run.

​
Usage

npx grafex init

​
Flags

​
--help
boolean
Print the help text and exit. Short form: -h.

​
What gets created

Running grafex init in a fresh directory produces the following terminal output: 
Created tsconfig.json
Created composition.tsx
If either file is already present, the corresponding line reads Skipped <filename> (already exists) instead.

​
tsconfig.json

Grafex uses its own JSX factory (h) and fragment factory (Fragment) — both are injected at transpile time so you never need to import them. The generated tsconfig.json wires up those settings: 
{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}
These three compilerOptions are the only ones Grafex requires. You can add any other TypeScript options alongside them — strict, paths, baseUrl, etc. — without affecting how Grafex transpiles your compositions.

​
composition.tsx

The starter composition is a 1200 × 630 gradient card — the standard Open Graph image size — so you can run grafex export straight away and see a real output: 
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>
  );
}

​
Full workflow after init

1

Install Grafex

npm install grafex
2

Scaffold the starter files

npx grafex init
3

Preview your composition live

npx grafex dev -f composition.tsx
Open http://localhost:3000 to see the live preview. Edit composition.tsx and the browser updates automatically.
4

Export to an image file

npx grafex export -f composition.tsx -o composition.png
You can also configure the JSX settings manually in an existing tsconfig.json instead of running grafex init. The three required options are jsx: "react", jsxFactory: "h", and jsxFragmentFactory: "Fragment".

​
Global flags

The following flags are available on the top-level grafex command, before any subcommand: 
grafex --version    # Print the installed Grafex version and exit
grafex --help       # Print top-level help text and exit

Build docs developers (and LLMs) love

Get started for freeTalk to us