render_component
Renders UI components to screenshots across Chromium, Firefox, and WebKit without a dev server. Built-in Tailwind CSS support for quick visual verification.
Instructions
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.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | Component code to render | |
| framework | No | Framework: html, react, vue, or svelte | react |
| engines | No | Browser engines to render in. Use ["chromium","firefox","webkit"] for cross-browser check. | |
| width | No | Viewport width (px) | |
| height | No | Viewport height (px) | |
| fullPage | No | Capture full scroll height | |
| darkMode | No | Render with Tailwind dark mode (adds 'dark' class to html) | |
| colorSchemes | No | Render both: ["light","dark"] returns 2 screenshots for comparison | |
| css | No | Custom CSS to inject (design tokens, variables, etc) | |
| tailwindVersion | No | Tailwind CSS version (3 or 4) | 3 |
| 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 }. |