Examples
Basic
All three header controls visible: copy, download, upload. The Copy control flips its icon to a check for 2s on success (Alpine-managed).
apiVersion: helm.openshift.io/v1beta1
kind: HelmChartRepository
metadata:
name: azure-sample-repo
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
Read-only
readonly=true adds pf-m-read-only. Keep the Copy control so
users can still lift the contents.
apiVersion: v1 kind: ConfigMap metadata: name: my-config data: key: value
Without actions
Language tab only — no header controls. Use when the code is purely illustrative. (PF core's "Without actions" doc example pairs this header with an upload empty state — that body is covered by the Upload example below.)
{
"name": "example",
"version": "1.0.0",
"scripts": { "build": "echo build" }
}
Without language tab
No header, no language tab. The wrapper falls back to a bare
pf-v6-c-code-editor with just the <pre> inside.
console.log("Hello, world!");
Upload
upload=true renders the content slot inside an
__upload border — pair it with an empty state.
dragDrop=true makes it live: drag a file over the editor to see
pf-m-drag-hover (PF's "Drag file and hover" example), then drop it — or Browse, or start
from scratch — to swap in a code view with the file's text.
Start editing
Header content and shortcuts
headerMain puts text in the __header-main area and the
shortcutsSlot slot fills __keyboard-shortcuts — here a "View
shortcuts" link button. Wire its @click to your own shortcuts dialog.
- F1
- View all editor shortcuts
- Ctrl + Space
- Activate auto complete
- Ctrl + Shift + M
- Toggle tab action
code goes here
Container
container=true wraps the header and main areas in
__container (role="presentation",
tabindex="0") — the wrapper PatternFly React uses to scope upload/empty-state events.
Same live upload behavior as above.
Start editing
Full height
modifiers="pf-m-full-height" makes the editor fill its parent — here a 300px-tall wrapper
div.
- F1
- View all editor shortcuts
- Ctrl + Space
- Activate auto complete
- Ctrl + Shift + M
- Toggle tab action
code goes here
Custom control
extraControls=true + extraControlsSlot append custom control
buttons after the built-in ones — here an Execute button whose icon flips to a check for 2s on click (Alpine-managed,
like Copy).
console.log('Hello world');
Size to fit
The editor height grows and shrinks with its content — the code view is an editable plaintext block, so add or remove lines to see it resize.
Some example content
Configuration modal
A settings control opens a modal whose changes apply immediately — dark theme and font size (PF's minimap and line-number switches are Monaco features).
Some example content
Documentation
Code editor props
Parameters accepted by
{#include components/data-display/code-editor ... /}. Code text lives in the
content slot — leading whitespace is preserved verbatim.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id on the wrapper. |
language
|
String |
Text shown in the language tab (e.g. YAML). Omit for no tab.
|
readonly
|
boolean |
Adds pf-m-read-only. Cosmetic only.
|
copyButton
|
boolean |
Show copy-to-clipboard button. Toggles an Alpine copied flag for 2s to swap
the icon to a check.
|
downloadButton
|
boolean |
Show download button. Wire your own handler via @click or
hx-get — the runtime button has no behavior.
|
uploadButton
|
boolean | Show upload button. Same caveat as download — bring your own handler. |
modifiers
|
String |
Extra classes on the root, e.g. pf-m-full-height (needs a sized parent).
|
headerMain
|
String |
Text rendered in the __header-main area between the controls and the language
tab.
|
shortcuts
|
boolean |
Set true and fill the shortcutsSlot slot to render the
__keyboard-shortcuts area (e.g. a "View shortcuts" link button).
|
extraControls
|
boolean |
Set true and fill the extraControlsSlot slot to append custom control buttons
after the built-in ones.
|
container
|
boolean |
Wraps header + main in __container (role="presentation", tabindex="0") — PatternFly React's event-scoping wrapper for
upload/empty-state editors.
|
upload
|
boolean |
Renders the content slot inside an
__upload border instead of the code viewer — pair with an empty state.
|
dragDrop
|
boolean |
Live drag-and-drop wiring: dragging a file over applies pf-m-drag-hover to
__main; dropping a file (or setting the Alpine
code/loaded state) swaps the upload area for a
live code view.
|
slot content
|
Qute block |
Code text. Wrap in ... if it contains
{varname} sequences Qute would otherwise evaluate.
|
Usage
Display, not edit. The runtime template is a <pre>-based viewer.
Use it for snippets, kubectl/curl examples, configuration blocks — anywhere the user reads code and maybe copies it.
For real editing (autocomplete, syntax highlighting, multi-cursor) layer Monaco on top of the
__code-pre element via an Alpine factory.
Server-pushed updates. Replace the wrapper via hx-get on a sibling
button — hx-target="#ce-basic", hx-swap="outerHTML". The
fresh markup brings its own Alpine state so the copy-button counter resets.