SnapForge

Programmatic visual content engine — generate production-ready images from React templates.

AI agents or humans select a template, pass props, and get a pixel-perfect PNG/WebP. No design tools needed.

Install

npm install @phoenixaihub/snapforge

Quick Start

CLI

# Render a social card
npx snapforge render -t social-card \
  -p '{"title":"AI Agents Are Coming","subtitle":"They write better code","author":"Krrish Mittal","theme":"dark"}' \
  --preset linkedin -o ./hero.png

# List templates
npx snapforge list

# Start HTTP API
npx snapforge serve --port 3001

Programmatic

import { render, closeBrowser } from '@phoenixaihub/snapforge';
import { writeFileSync } from 'fs';

const buf = await render({
  template: 'social-card',
  props: { title: 'Hello World', theme: 'midnight' },
  preset: 'og',
});
writeFileSync('output.png', buf);
await closeBrowser();

HTTP API

curl -X POST http://localhost:3001/render \
  -H 'Content-Type: application/json' \
  -d '{"template":"social-card","props":{"title":"Hello"},"preset":"og"}' \
  --output card.png

Templates

| Template | Description | |----------|-------------| | social-card | Social media cards with title, subtitle, author | | code-snippet | Code screenshots with syntax highlighting | | flowchart | Architecture and flow diagrams | | comparison-table | Feature comparison grids | | data-chart | Bar, line, and pie charts | | quote-card | Pull quotes with attribution | | timeline | Step-by-step process visuals | | hero-banner | Blog header images | | stat-card | Metric/KPI cards | | mermaid-diagram | Diagram-as-code (Mermaid) |

Themes

dark · light · midnight · sunset · ocean · brand

Size Presets

| Preset | Size | |--------|------| | linkedin | 1200×627 | | twitter | 1600×900 | | medium | 800×418 | | og | 1200×630 | | instagram | 1080×1080 | | blog-hero | 1400×600 | | thumbnail | 400×300 |

Gallery

Interactive template browser:

npx snapforge gallery

API Reference

POST /render

{
  "template": "social-card",
  "props": { "title": "...", "theme": "dark" },
  "preset": "linkedin",
  "format": "png",
  "quality": 90
}

Returns binary image.

GET /templates

Lists all templates with descriptions.

GET /presets

Lists all size presets.

License

MIT