render_file
Render a component file as an image with full dependency resolution using your project's Vite config. Auto-detects framework and saves PNG for visual validation.
Instructions
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.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Absolute path to the component file | |
| props | No | Props to pass to the component | |
| width | No | Viewport width (px) | |
| height | No | Viewport height (px) | |
| darkMode | No | Render with dark mode | |
| tailwindVersion | No | Tailwind CSS version (3 or 4) | 3 |
| projectRoot | No | Project root directory override (defaults to auto-detect from file path) | |
| mock | No | Mock network responses. Keys: URL pattern (path '/api/users', glob '**/api/*', or full URL). Values: response body (auto-serialized as JSON) or { status, contentType, body, headers }. | |
| outputPath | No | Absolute path to save the PNG (e.g. '/tmp/button.png'). When set, returns a text summary instead of base64 image data — use this in long agent sessions to avoid context bloat. |