layout.createSection
Creates HTML sections with proper layout structure in Circuitry Designer mode, ensuring correct stacking and positioning for headers, footers, and content containers.
Instructions
PREFERRED METHOD for creating HTML in Designer mode.
Creates both a layout container AND an HTML component inside it together. This ensures:
Proper parent-child structure
Correct vertical stacking (content sections stack below each other)
Clean preview/export with proper positioning
Use container param for auto-positioning:
"header" - positions at top
"footer" - positions at bottom
"content" - stacks below previous content sections
CRITICAL CSS STRUCTURE - Prevents zoom scaling bugs:
NEVER put visual styles on :host - causes border-radius to scale incorrectly when zooming.
WRONG:
:host {
background: #1a1a3e;
border-radius: 16px;
padding: 20px;
}CORRECT:
:host { display: block; }
.card {
background: #1a1a3e;
border-radius: 16px;
padding: 20px;
}Always wrap HTML content in a container div and apply all visual styles (background, border-radius, padding, box-shadow) to that inner element, NOT to :host.
Headers & Footers MUST have opaque backgrounds - content scrolls behind them:
Use solid color:
background: #1a1a3e;Or gradient:
background: linear-gradient(...);Or blur:
background: rgba(26,26,62,0.9); backdrop-filter: blur(10px);
Cards narrower than screen should be centered:
Use
margin: 16px auto;in CSS to center horizontallyOr set position.x to center:
(screenWidth - cardWidth) / 2
Returns both layoutId and htmlId so you can reference either element later.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Display name for the section (e.g., "Profile Card", "Settings Menu") | |
| layoutType | No | Layout type: card, container, header, footer, etc. | |
| container | No | Semantic container type - determines auto-positioning: header (top), footer (bottom), content (stacked) | |
| html | Yes | HTML content for the section | |
| css | No | CSS styles for the HTML content | |
| js | No | Optional JavaScript for interactivity | |
| position | No | Position { x, y } - auto-calculated based on container if not provided | |
| dimensions | No | Dimensions { width, height } - uses layout type defaults if not provided | |
| screenId | No | Target screen ID or name (uses selected screen if not specified) | |
| autoAnalyze | No | Run layout.analyze with autoFix after creation (default: false) |