Live demo — this example is server-driven; run the showcase locally for the interactive version.
Code editor
Use Code editor straight from a Qute template — parameters and slots instead of Java builders. This reference is generated
from the runtime template sources: each template documents its parameters and slots in the header comment shown
beneath its include line.
Code editor — PatternFly v6
Optional: id — DOM id on the root; omit unless something else references the editor.
language (optional — tab text), readonly (optional),
modifiers (optional — extra classes on the root, e.g. pf-m-full-height),
copyButton (optional), downloadButton (optional), uploadButton (optional),
headerMain (optional — text rendered in __header-main),
shortcuts (optional — set true and fill the {#shortcutsSlot} slot to render
the __keyboard-shortcuts area, e.g. a "View shortcuts" link button),
extraControls (optional — set true and fill the {#extraControlsSlot} slot to
append custom control buttons after the built-in ones),
container (optional — wraps header+main in __container, the role="presentation"
wrapper PatternFly React uses to scope upload/empty-state events),
upload (optional — the content slot renders inside an __upload border instead
of the __code/__code-pre viewer; pair with an empty state),
dragDrop (optional — live drag-and-drop wiring: dragging a file over the editor
applies pf-m-drag-hover to __main; dropping a file (or picking one via
an element that sets the Alpine `code`/`loaded` state, e.g. the demo's
Browse input) swaps the __upload area for a live __code view)
Content: pass code text via {#content}...{/content} block (with upload=true it holds the
empty state instead)
