html_to_elements
Converts HTML to Stellify elements by attaching to routes for SSR pages or returning UUIDs for standalone Vue components. Auto-wires click handlers with optional file UUID.
Instructions
Convert HTML to Stellify elements.
IMPORTANT - Choose the right approach:
For SSR/Blade Pages (WordPress imports, static content, layouts):
MUST pass 'page' (route UUID) - elements attach to the route for server-side rendering
This is the most common use case
For Vue Components (client-side interactivity):
Omit 'page' - elements are standalone, referenced by file's template array
Returns UUIDs to use in save_file's template array
Where elements go:
Pass 'page' (route UUID): Elements attached to the route for SSR rendering
Pass 'selection' (element UUID): Elements attached as children of existing element
Omit both: Elements are standalone (Vue components only) - use returned UUIDs in save_file's template array
⚠️ CRITICAL: Multiple Root Elements Limitation When HTML contains multiple root-level elements (e.g., , , ), only the FIRST root element gets attached to the route. Other elements become orphaned!
WRONG: html_to_elements(page: routeUUID, elements: "<header>...</header><main>...</main><footer>...</footer>")
→ Only attaches to route. and are orphaned!
CORRECT: Make separate calls for each root element:
html_to_elements(page: routeUUID, elements: "<header>...</header>")html_to_elements(page: routeUUID, elements: "<main>...</main>")html_to_elements(page: routeUUID, elements: "<footer>...</footer>")
OR wrap all elements in a single container div.
@click auto-wiring: Pass 'file' UUID to auto-resolve @click="methodName" handlers. Methods must exist in the file first.
Blade Syntax Handling: For SSR/Blade pages, do NOT pass raw Blade expressions in text or attributes. The HTML parser stores them literally which causes rendering issues. Instead:
For static HTML: Pass clean HTML without Blade syntax, then use
update_elementto add dynamic behaviorFor loop content: After creating elements, use
update_elementwith:textField,hrefField,srcFieldfor simple field access (outputs{{ $item->field }})hrefExpression,srcExpression,altExpressionfor paths with prefixes or complex expressionsstatementsarray with statement UUIDs for text content with Blade code
For conditionals: Use
s-directiveelements as siblings (see update_element docs)
IMPORTANT - Links with path prefixes:
hrefField outputs ONLY the field value with no prefix. There is NO hrefPrefix attribute.
For links like /post/my-slug, use hrefExpression: "/post/{{ $item->slug }}" instead.
Loop variable: Inside @foreach loops created with s-directive, the default loop variable is $item. Use textField: "title" to output {{ $item->title }}.
Prefer SVG icons over emoji (encoding issues).
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| elements | Yes | HTML string to convert | |
| page | No | Route UUID to attach elements to. REQUIRED for SSR/Blade pages (WordPress imports, static content, layouts). Only omit for Vue component templates. | |
| selection | No | Parent element UUID to attach to (alternative to page). Use when adding children to existing elements. | |
| file | No | Vue component file UUID. Pass this to auto-wire @click handlers to method UUIDs. | |
| test | No | If true, returns structure without creating elements |