Configuration

pro-visu init writes a pro-visu.config.ts. It has two blocks: settings (repo-level CLI behaviour) and assets (what to generate).

import { defineConfig } from "pro-visu";

export default defineConfig({
  settings: {
    outDir: "pro-visu",
    concurrency: 2,
    browser: { headless: true },
    defaults: { "scroll-reel": { width: 1440, height: 900, fps: 30 } },
  },
  assets: [
    { name: "home-reel", url: "https://your-site.com", generator: "scroll-reel" },
  ],
});

defineConfig is a typed identity helper — it gives you autocomplete and inline docs for every field, but the config is validated again at runtime.

File discovery

Without --config <path>, the CLI discovers config in any of these forms:

• pro-visu.config.ts · .js · .mjs · .cjs · .json
• .pro-visurc / .pro-visurc.json
• a "pro-visu" key in package.json

A .ts config that imports defineConfig requires the pro-visu package to be resolvable from that folder; a .json config does not.

Assets

Each entry in assets describes one thing to generate.

assets: [
  {
    name: "home-shots",
    url: "https://your-site.com",
    generator: "screenshots",
    options: {
      breakpoints: [
        { name: "desktop", width: 1440, height: 900 },
        { name: "mobile", width: 390, height: 844 },
      ],
      elements: [{ selector: "header", name: "nav" }],
    },
  },
]

How options merge

For each asset, the generator's options come from two places, merged in order:

1. settings.defaults["<generator-id>"] — your repo-wide defaults for that generator.
2. The asset's own options — which win.

So you can set defaults: { "scroll-reel": { width: 1440, height: 900, fps: 30 } } once and omit those fields on every reel.

The input graph

Assets can depend on other assets via inputs: { slot: assetName }. The producing assets run first, and their output files are exposed to the consumer. A generator can also derive its inputs from its options instead of you hand-writing the map — the wall does this, treating each tile name in its columns as a dependency:

assets: [
  { name: "hero-shot", url: "/", generator: "screenshots", options: { fullPage: false } },
  { name: "img-coat", generator: "image", options: { src: "public/img/coat.jpg" } },
  { name: "wall", generator: "wall",
    // no `inputs` — derived from the tile names below; hero-shot + img-coat run first
    options: { columns: [{ tiles: ["hero-shot", "img-coat"] }, /* …≥3… */] } },
]

This forms a DAG; cycles and references to unknown assets are rejected at load time. Selecting an asset with --asset automatically pulls in its dependencies.

Next

• Settings reference — every field in the settings block.
• Managed server — let the CLI build, start, and stop your site.