@stdout-design/cli

Storybook for images — in your repo and speaking to your agents.

A CLI for rendering your own TSX components into pixel-perfect social and marketing images. Live preview studio, batch rendering from data, and MCP server for AI agents.

Quick start

# Install
bun add -d @stdout-design/cli

# Scaffold a project
npx @stdout-design/cli init

# Render an image
npx @stdout-design/cli render bento-feature --title "Hello" --out hello.png

# Or open the live studio
npx @stdout-design/cli dev

Installation

bun add -d @stdout-design/cli

Or globally:

bun add -g @stdout-design/cli

Prerequisites: Node.js 18+, Bun 1.2+.

Commands

| Command | Description | | -------------------------- | --------------------------------- | | studio init | Scaffold a new studio project | | studio dev | Start the live preview studio | | studio render <template> | Render a single template or batch | | studio cache stats | Show cache statistics | | studio cache clean | Clear the render cache | | studio lint | Check templates for compatibility |

Run commands with npx @stdout-design/cli <command>, or install globally with bun add -g @stdout-design/cli to use studio <command> directly.

studio render

studio render <template> [options]

| Option | Description | | ----------------- | ---------------------------------- | | --key value | Pass props to the template | | --data file.csv | Batch render from CSV or JSON | | --preset name | Output preset (default: og) | | --locale lang | Locale for i18n | | --out-dir path | Output directory (default: ./out/) | | --out file.png | Single output file |

studio dev

Starts a dev server on localhost:3000 with:

• Hot-reload when templates change
• Auto-generated prop panel
• Side-by-side preview across presets
• Export templates to PNG

studio init

Scaffolds a new studio project with:

• TypeScript configuration
• Example templates to get started
• Sample data files for batch rendering
• Locale files for i18n

Writing templates

A template is a TSX component with typed props:

type Props = {
  title: string;
  stat: string;
};

export default function MilestoneCard({ title, stat }: Props) {
  return (
    <div className="bg-black text-white p-8 rounded-2xl">
      <h1 className="text-4xl font-bold">{title}</h1>
      <p className="text-lg mt-2">{stat}</p>
    </div>
  );
}

Drop it in templates/ and it's immediately renderable.

AI agent integration

Add to your agent's MCP config:

{
  "mcpServers": {
    "stdout-design": {
      "command": "npx",
      "args": ["-y", "@stdout-design/cli", "mcp"]
    }
  }
}

Available tools: list_templates, render, render_batch, list_presets

Project structure

my-project/
├── studio.config.ts      template registry, presets, locales
├── templates/            your TSX components
├── data/                 CSV/JSON for batch renders
├── locales/              translation files
└── out/                  rendered assets (gitignored)

Configuration

export default {
  templates: "./templates",
  presets: [
    { name: "og", width: 1200, height: 630 },
    { name: "instagram", width: 1080, height: 1080 },
  ],
  locales: ["en", "ar"],
  outDir: "./out",
};

Platform presets

| Preset | Size | Use | | --------------- | --------- | ------------------------- | | og | 1200×630 | Open Graph / social cards | | x-card | 1200×675 | X (Twitter) cards | | linkedin | 1200×627 | LinkedIn link previews | | instagram | 1080×1080 | Instagram feed posts | | instagram-story | 1080×1920 | Instagram stories | | appstore | 1290×2796 | App Store screenshots | | playstore | 1080×1920 | Play Store screenshots |

License

MIT