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.

RenderResult is the object returned by both render() and renderAll(). It carries the raw image bytes alongside the metadata that describes exactly how the image was produced — the effective dimensions, the device pixel ratio, and the format. Use this metadata to build correct filenames, log output details, or pass the image dimensions downstream to other systems without re-reading the file. 
import type { RenderResult } from 'grafex'

​
Interface

interface RenderResult {
  buffer: Buffer;
  width: number;
  height: number;
  scale: number;
  format: 'png' | 'jpeg';
}

​
Fields

​
buffer
Buffer
required
A Node.js Buffer containing the raw encoded image bytes — PNG or JPEG depending on the format used. Write it directly to disk with fs.writeFileSync, pipe it into a stream, or pass it to an upload function. No base64 decoding or conversion is needed.
import { writeFileSync } from 'node:fs';

writeFileSync('card.png', result.buffer);
​
width
number
required
The effective render width in logical pixels — the viewport width the composition’s layout was calculated against, before the scale factor is applied. This matches the width value from CompositionConfig, VariantConfig, or the RenderOptions override (whichever had the highest precedence).The physical pixel width of the image is width × scale.
​
height
number
required
The effective render height in logical pixels — the viewport height the composition’s layout was calculated against, before the scale factor is applied.The physical pixel height of the image is height × scale.
​
scale
number
required
The device pixel ratio that was applied during rendering. A scale of 1 means logical and physical pixels are identical. A scale of 2 means every logical pixel maps to a 2×2 block of physical pixels, doubling the resolution in each dimension.Use width * scale and height * scale to compute the actual pixel dimensions of the image in buffer.
​
format
'png' | 'jpeg'
required
The image format that was actually used to encode the buffer. This reflects the resolved format after the merge chain — RenderOptions → VariantConfig → CompositionConfig → default ('png'). Use this value when constructing output filenames to ensure the extension matches the encoding.
writeFileSync(`card.${result.format}`, result.buffer);

​
Usage examples

​
Write to disk and log dimensions

import { render, close } from 'grafex';
import { writeFileSync } from 'node:fs';

const result = await render('./card.tsx', {
  width: 1200,
  height: 630,
  scale: 2,
  format: 'png',
});

// Write the image buffer to disk
writeFileSync(`card.${result.format}`, result.buffer);

// Log the logical and physical dimensions
console.log(`Logical size:  ${result.width} × ${result.height} px`);
console.log(`Physical size: ${result.width * result.scale} × ${result.height * result.scale} px`);
console.log(`Format:        ${result.format}`);
console.log(`Scale:         ${result.scale}x`);

// Output:
// Logical size:  1200 × 630 px
// Physical size: 2400 × 1260 px
// Format:        png
// Scale:         2x

await close();

​
Save all variants with correct filenames

import { renderAll, close } from 'grafex';
import { writeFileSync, mkdirSync } from 'node:fs';

mkdirSync('./dist', { recursive: true });

const all = await renderAll('./card.tsx');

for (const [name, result] of all) {
  const outPath = `./dist/${name}.${result.format}`;
  writeFileSync(outPath, result.buffer);
  console.log(
    `[${name}] ${result.width * result.scale}×${result.height * result.scale} ${result.format.toUpperCase()}`
  );
}

await close();

​
Upload the buffer directly

Because buffer is a standard Node.js Buffer, you can pass it to any API that accepts binary data without writing a temporary file first. 
import { render, close } from 'grafex';

const result = await render('./card.tsx');

// Example: upload to an S3-compatible store
await s3Client.putObject({
  Bucket: 'my-bucket',
  Key: `images/card.${result.format}`,
  Body: result.buffer,
  ContentType: result.format === 'png' ? 'image/png' : 'image/jpeg',
});

await close();
When building filenames dynamically, always use result.format rather than hard-coding an extension. The resolved format may differ from what you expect if the composition’s config or a variant sets a different format than the one you passed in RenderOptions.

Build docs developers (and LLMs) love

Get started for freeTalk to us