Configuration

studio.config.ts lives at your project root and declares everything the studio needs: your template registry, output presets, locales, fonts, and output directory. It's a plain TypeScript file validated at runtime with Zod.

// studio.config.ts
import type { StudioConfig } from "@stdout-design/core";

const config: StudioConfig = {
  defaultPreset: "instagram-square",
  outDir: "./out",
  locales: ["en", "ar"],
  presets: [
    {
      id: "instagram-square",
      width: 1080,
      height: 1080,
      platform: "instagram",
    },
    { id: "x-card", width: 1200, height: 675, platform: "x" },
    { id: "og-image", width: 1200, height: 630, platform: "web" },
  ],
  templates: {
    "bento-feature": {
      componentPath: "./templates/bento-feature",
      description: "Apple-style bento feature card.",
    },
    "stat-card": {
      componentPath: "./templates/stat-card",
      description: "A milestone or stat card for social media.",
    },
  },
};

export default config;

Fields

Prop

Type

`templates`

Maps a template ID to its component file. The ID is what you pass to studio render, and the key used in locale files.

templates: {
  "stat-card": {
    componentPath: "./templates/stat-card", // .tsx added automatically
    description: "A milestone or stat card for social media.",
  },
},

componentPath is required and points at the .tsx file without the extension.

`presets`

Presets are fully user-defined there's no fixed built-in set. Each one is { id, width, height, platform }, where platform is informational (shown in the studio) and width/height are the output dimensions in pixels.

Rendering without --preset produces one image per preset. Common platform sizes you can use:

Preset ID	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-square`	1080×1080	Instagram feed posts
`instagram-story`	1080×1920	Instagram stories
`appstore`	1290×2796	App Store screenshots
`playstore`	1080×1920	Play Store screenshots

These are just sizes name and use them however fits your workflow.

`defaultPreset`

The preset selected by default in the studio and render fallbacks. If omitted, the first preset in the array is used.

`images`

By default, remote images don't render a template's <img src>, backgroundImage, and maskImage URLs are blocked until you allow them. To load images from a CDN or your own domain, add an allowUrl check:

images: {
  allowUrl: (url) => url.startsWith("https://cdn.example.com/"),
  maxBytes: 5 * 1024 * 1024, // 5 MiB, optional
  timeout: 8000,             // ms, optional
  fetch: myCustomFetch,      // optional, defaults to globalThis.fetch
  emoji: "twemoji",          // optional emoji provider, or "from-font"
},

Prop

Type

A blocked URL shows up as a clear render error naming the URL, so you know to add it to allowUrl rather than chasing a mystery failure.

Validation & errors

studio.config.ts is loaded and validated on every command and by the dev server. Failures are reported as clear errors:

Missing file No studio.config.ts found in <root>.
Invalid shape studio.config.ts is invalid: <path>: <message>; ... e.g. a missing componentPath, or a preset with non-positive dimensions.

templates and presets are both required; a config missing either fails validation.

Example: a full multi-platform setup

import type { StudioConfig } from "@stdout-design/core";

const config: StudioConfig = {
  defaultPreset: "instagram-square",
  outDir: "./out",
  locales: ["en", "ar"],
  presets: [
    {
      id: "instagram-square",
      width: 1080,
      height: 1080,
      platform: "instagram",
    },
    { id: "instagram-story", width: 1080, height: 1920, platform: "instagram" },
    { id: "x-card", width: 1200, height: 675, platform: "x" },
    { id: "linkedin", width: 1200, height: 627, platform: "linkedin" },
    { id: "og-image", width: 1200, height: 630, platform: "web" },
  ],
  templates: {
    "bento-feature": {
      componentPath: "./templates/bento-feature",
      description:
        "Apple-style bento feature card with image, headline, and tag badges.",
    },
    "stat-card": {
      componentPath: "./templates/stat-card",
      description: "A milestone or stat card for social media.",
    },
  },
};

export default config;

Fields

`templates`

`presets`

`defaultPreset`

`images`

Validation & errors

Example: a full multi-platform setup

Writing Templates

Internationalization

CLI Reference

On this page