html.create
Generate HTML components with scoped CSS for Circuitry workflows, supporting canvas prototypes and web nodes while following mobile UI standards and preventing layout bugs.
Instructions
Create HTML content in Circuitry.
DESIGNER MODE: Use
For Designer screens, ALWAYS use layout.createSection to create HTML with proper layout structure. It creates both a layout container AND HTML component together, ensuring correct stacking and preview export.
Only use html.create directly in Designer for adding content to existing layout grid cells.
WORKFLOW context - TWO options (ASK USER if unclear):
target: "drawing" - Quick prototypes on canvas drawing layer (default)
target: "node" - Web Node with inputs from other nodes
CRITICAL CSS STRUCTURE - Prevents zoom scaling bugs:
NEVER put visual styles (background, border-radius, padding, box-shadow) on :host - causes border-radius to scale incorrectly when zooming. Use :host { display: block; } only, and put all visual styles on an inner container element.
MOBILE UI SIZING:
Headers: 64px height
Bottom nav: 84px height
iPhone 15: 393x852
After editing components: Use layout.analyze with autoFix to detect and fix layout issues.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Display name (e.g., "Login Form", "Nav Menu") | |
| html | No | Full HTML structure (use this OR htmlFile, not both) | |
| css | No | Scoped CSS for the component (use this OR cssFile, not both) | |
| htmlFile | No | Absolute path to HTML file (alternative to inline html param - MCP server reads file) | |
| cssFile | No | Absolute path to CSS file (alternative to inline css param - MCP server reads file) | |
| js | No | Optional JavaScript for interactivity | |
| target | No | Where to create: "drawing" (canvas layer, default) or "node" (Web Node). In workflow, ASK USER if not specified. | |
| screenId | No | Target screen ID or name (Designer mode only). If not specified, uses selected screen. | |
| container | No | Semantic container type (Designer mode): "header" (top), "footer" (bottom), "content" (main area), "nav" (navigation). Auto-positions based on type and groups for preview structure. | |
| position | No | Position { x, y } relative to screen/canvas. If container is set, auto-calculated based on semantic meaning. | |
| dimensions | No | Size { width, height } in pixels (default: 320x200) | |
| isolated | No | CSS isolation: true = Shadow DOM (default), false = inherits global CSS | |
| href | No | Link URL or screen target. Use "#screen:ScreenName" for navigation between screens in preview (e.g., "#screen:Home", "#screen:Dashboard"). External URLs also supported. |