Frontend tools

Convert HTML to Stellify elements.

SILENT GOTCHA: non-ASCII text is mangled by DOMDocument (£→£, em-dash→â) — use ASCII, prefer SVG over emoji, or set such text afterwards with update_element. (@event handlers like @click/@keyup.enter ARE captured on creation — you do NOT need to re-set them; pass 'file' to auto-resolve @click="methodName" to its method UUID.)

Placement: pass 'page' (route UUID) for SSR/Blade pages — elements attach to the route (the common case); pass 'selection' (element UUID) to nest under an existing element; omit both for standalone Vue elements (use the returned UUIDs in save_file's template array). Multiple root elements: only the FIRST attaches to a route — make one call per root element, or wrap them in a single container div.

@click auto-wiring: pass 'file' to resolve @click="methodName" (methods must exist first). Do NOT pass raw Blade in text/attributes (stored literally) — create clean elements, then add dynamic behaviour with update_element (textField/hrefField for {{ $item->field }}, hrefExpression for prefixed paths, statements[] for Blade code, s-directive siblings for loops/conditionals; default loop var is $item).

Create a UI element. Provide page (route UUID) for root elements, or parent (element UUID) for children.

s-slot elements (for layouts): Use type='s-slot' to create a slot placeholder in a layout. When a page uses the layout via <x-layout-name>, the page's children are injected where the s-slot is. Set 'name' property on the s-slot for named slots (default slot has name='default').

Update a UI element. Data object: tag, classes, text, event handlers (method UUIDs), classBindings. Set 'name' on root elements to create Blade views (e.g. name="notes.index" → view('notes.index')).

Slots: set 'name' on an s-slot to define a slot (name="default" is the default); set 'slot' on an element to inject it into a named slot.

Inside @foreach loops (SSR/Blade, loop var defaults to $item):

• textField/hrefField/srcField → simple field access, e.g. textField:"title" outputs {{ $item->title }} (field value ONLY, no prefix).
• For prefixed/complex paths use hrefExpression/srcExpression/altExpression, e.g. hrefExpression:"/post/{{ $item->slug }}" or "{{ route('posts.show', $item->slug) }}". (There is NO hrefPrefix.)
• For Blade text content, pass the statements[] array with statement UUIDs whose code is output for Blade to evaluate.

Get a single element by UUID. Returns the element data with all its attributes.

Get an element with all its descendants (children, grandchildren, etc.) as a hierarchical tree structure.

Delete an element and all its children (CASCADE). Returns the count of deleted elements.

Search for elements in the project. Useful for finding elements by name, type, or content.

Note: To reorder elements, use update_element to modify the parent element's 'data' array with the new order of child UUIDs.

Push real-time UI updates via WebSocket. Use for SHOW/DISPLAY/DEMONSTRATE requests.

Actions: update (modify element), create (ephemeral element), batch (multiple updates), delete.

Changes are EPHEMERAL (not saved). For persistent changes, use update_element or html_to_elements.

Bundle a Vue component tree into an ESM loader served at /esm and attach its import-map to a page route, so the component renders in the browser without the editor. Pass the entry file UUID (the app.js mount file) and the route UUID of the page that hosts it. Run this after building a Vue component + its app.js mount and wiring a page route, to make the component actually render.