stillsmith

Screenshots of your product, taken from your real components. Declare scenes next to the code they render; stillsmith drives a browser and writes the PNGs.

Getting started What stillsmith is

Hand-composed mockups drift from the product, and manually-taken screenshots go stale as soon as a component changes.

A scene renders the real component over fixture data. When a prop changes, the scene stops compiling instead of quietly rendering something out of date.

import type { Scene, Shot } from "@stillsmith/capture/react";
import { RockShelf } from "@/components/RockShelf";
import { ROCKS } from "@/data/rocks";

export default {
  render: () => <RockShelf rocks={ROCKS} selectedId="obsidian" />,
} satisfies Scene;

export const Default: Shot = {};

stillsmith capture

Annotations, in code

Outlines, highlights, arrows, callouts and pins, resolved by selector, so one annotation adapts across every preset instead of being pinned to coordinates.

A visual editor

stillsmith dev opens an editor that draws with the same engine as the capture and writes TypeScript back into your scene file.

Built for agents

An MCP server that lets an agent see the rendered scene and preview an annotation before it commits to one.

Deterministic

Fonts are awaited and animations frozen, so re-running produces byte-identical PNGs and CI diffs stay meaningful.