Render a component file with full dependency resolution. Uses your project's Vite config to resolve imports, path aliases, CSS modules, and node_modules. Falls back to CDN-based rendering if Vite is unavailable. Auto-detects framework from file extension.

Instantly render a React/Vue/HTML component and return screenshots across browser engines. Zero setup needed — just pass your code. Tailwind CSS is built-in. Use this to visually verify UI code without starting a dev server.

Render a component at mobile, tablet, and desktop sizes in one call. Returns 3 screenshots for responsive verification.

Render a component in both light and dark mode side-by-side. Returns 2 labeled screenshots for quick theme verification.

Render multiple variants of a component (different props/states) in one call. Returns a screenshot for each variant. Use this to verify buttons in all states, theme variations, etc.

Render multiple code snippets in a grid layout and return a single combined image. Use this to compare components side-by-side (e.g. design system overview, theme comparison).

Render a component across multiple viewports AND themes in one call. Returns a grid of screenshots (viewports x themes) for comprehensive responsive + theme verification.

Capture multiple frames of a CSS animation or transition over time. Returns sequential screenshots to verify animation behavior, timing, and smoothness.

Render a component, simulate user interactions (click, hover, focus, type), then screenshot the result. Use this to verify hover states, dropdowns, modals, form inputs.

Take a screenshot of a URL (e.g. localhost:3000) across multiple browser engines in parallel. Supports waiting for specific elements and retry with exponential backoff for dev servers that may be slow to start.

Visual regression test: render before/after code and return a pixel diff image with percentage changed. Use this during refactoring to catch unintended visual changes.

Compare rendered component output against a reference image (e.g. from Figma export or previous snapshot). Returns pixel diff percentage and pass/fail status. Use this for design QA — verify your component matches the design.

Run an accessibility audit (axe-core) on a rendered component. Returns WCAG violations with impact level, description, and affected HTML nodes. Use this to catch a11y issues before shipping.

Analyze component performance: DOM element count, tree depth, render time, script/stylesheet count. Use this to catch bloated components before they ship.

Render a component and save the screenshot as a named snapshot. Use this to establish a baseline before making changes. Later use snapshot_check to detect visual regressions.

Render a component and compare against a previously saved snapshot. Returns pixel diff and pass/fail. Use this after making changes to verify no visual regression.

List all saved snapshots with their names and timestamps.

Scan a directory for component files (.jsx/.tsx/.vue/.svelte/.html) and render a screenshot of each. Returns a visual catalog — like Storybook but zero-config. Use this to quickly audit all components in a folder.

Start watching component files for changes. On every save, the component is automatically rendered and you will receive a notification — call watch_get_latest(id) to retrieve the rendered screenshot. Use this to create a live feedback loop while editing UI — the AI sees each change without you needing to call render_file manually.

Stop a running file watcher started with watch_start.

List all currently active file watch sessions.

Get the latest rendered screenshot from a watch session. Call this after receiving a watch notification to see the current state of the component.