Code editor

A code editor is a versatile text editor that allows for editing various languages. The code editor is built on top of the Monaco Editor.

Examples

Default


                      code goes here

Read-only


                      code goes here

Without actions

Drag a file here or browse to upload.

Drag file and hover over component

Drag a file here or browse to upload.

With optional header content and keyboard shortcuts


                      code goes here

Documentation

Usage

Class	Applied to	Outcome
`.pf-v6-c-code-editor`	`<div>`	Initiates the code editor component. Required
`.pf-v6-c-code-editor__header`	`<div>`	Initiates the code editor header used for the controls and tab elements. Required
`.pf-v6-c-code-editor__header-content`	`<div>`	Initiates the code editor header content used for the controls and tab elements. Required
`.pf-v6-c-code-editor__main`	`<div>`	Initiates the main container for a code editor e.g. Monaco Required
`.pf-v6-c-code-editor__code`	`<div>`	Initiates the container for code without a JS code editor. Comes with PatternFly styling.
`.pf-v6-c-code-editor__controls`	`<div>`	Initiates the code editor controls.
`.pf-v6-c-code-editor__header-main`	`<div>`	Initiates the code editor header content area.
`.pf-v6-c-code-editor__keyboard-shortcuts`	`<div>`	Initiates the code editor header keyboard shortcuts area.
`.pf-v6-c-code-editor__tab`	`<div>`	Initiates the code editor tab.
`.pf-v6-c-code-editor__tab-text`	`<span>`	Initiates the code editor tab text.
`.pf-v6-c-code-editor__tab-icon`	`<span>`	Initiates the code editor tab icon.
`.pf-v6-c-code-editor__upload`	`<div>`	Initiates the code editor upload border.

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__controls--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__controls--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__controls--Gap	0.25rem
--pf-v6-c-code-editor__controls--Gap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header--before--BorderBlockEndWidth	1px
--pf-v6-c-code-editor__header--before--BorderBlockEndWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header--before--BorderBlockEndColor	(In light theme) #c7c7c7
--pf-v6-c-code-editor__header--before--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor__header-content--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--PaddingBlockStart	0.25rem
--pf-v6-c-code-editor__header-content--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--PaddingBlockEnd	0.25rem
--pf-v6-c-code-editor__header-content--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__header-content--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__header-content--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--BorderStartStartRadius	16px
--pf-v6-c-code-editor__header-content--BorderStartStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-content--BorderStartEndRadius	16px
--pf-v6-c-code-editor__header-content--BorderStartEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__upload--PaddingInlineStart	1rem
--pf-v6-c-code-editor__upload--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__upload--PaddingInlineEnd	1rem
--pf-v6-c-code-editor__upload--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__upload--PaddingBlockStart	1rem
--pf-v6-c-code-editor__upload--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__upload--PaddingBlockEnd	1rem
--pf-v6-c-code-editor__upload--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__upload--BorderRadius	16px
--pf-v6-c-code-editor__upload--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-code-editor__main--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--BorderWidth	1px
--pf-v6-c-code-editor__main--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--BorderEndStartRadius	16px
--pf-v6-c-code-editor__main--BorderEndStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--BorderEndEndRadius	16px
--pf-v6-c-code-editor__main--BorderEndEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__main--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor--m-read-only__main--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__upload--before--BorderWidth	0
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__upload--before--BorderColor	transparent
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth	1px
--pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth --pf-t--global--border--width--divider--hover --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor	var( --pf-t--global--border--color--clicked)
--pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor var( --pf-t--global--border--color--clicked) var( --pf-t--global--border--color--clicked)
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__main--m-drag-hover--after--Opacity	.1
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__code--PaddingBlockStart	0.5rem
--pf-v6-c-code-editor__code--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__code--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__code--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__code--PaddingBlockEnd	0.5rem
--pf-v6-c-code-editor__code--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__code--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__code--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__code-pre--FontSize	0.875rem
--pf-v6-c-code-editor__code-pre--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__code-pre--FontFamily	"Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
--pf-v6-c-code-editor__code-pre--FontFamily --pf-t--global--font--family--mono --pf-t--global--font--family--300 "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-main--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__header-main--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__header-main--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__header-main--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__tab--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--Color	(In light theme) #4d4d4d
--pf-v6-c-code-editor__tab--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--PaddingBlockStart	0.5rem
--pf-v6-c-code-editor__tab--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--PaddingInlineEnd	var( --pf-t--global--spacer--sm)
--pf-v6-c-code-editor__tab--PaddingInlineEnd var( --pf-t--global--spacer--sm) var( --pf-t--global--spacer--sm)
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--PaddingBlockEnd	0.5rem
--pf-v6-c-code-editor__tab--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--PaddingInlineStart	var( --pf-t--global--spacer--sm)
--pf-v6-c-code-editor__tab--PaddingInlineStart var( --pf-t--global--spacer--sm) var( --pf-t--global--spacer--sm)
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--BorderBlockStartWidth	1px
--pf-v6-c-code-editor__tab--BorderBlockStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--BorderInlineEndWidth	1px
--pf-v6-c-code-editor__tab--BorderInlineEndWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--BorderBlockEndWidth	0
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--BorderInlineStartWidth	1px
--pf-v6-c-code-editor__tab--BorderInlineStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-code-editor__tab--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab--BorderStartEndRadius	16px
--pf-v6-c-code-editor__tab--BorderStartEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	:where(:root, .pf-v6-c-code-editor)	--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart	0.5rem
--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor.pf-m-read-only	--pf-v6-c-code-editor__main--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor__main--BackgroundColor --pf-v6-c-code-editor--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-editor__header.pf-m-plain	--pf-v6-c-code-editor__header-content--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__header-content--BackgroundColor --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-code-editor__main.pf-m-drag-hover	--pf-v6-c-code-editor__upload--before--BorderWidth	1px
--pf-v6-c-code-editor__upload--before--BorderWidth --pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth --pf-t--global--border--width--divider--hover --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor__main.pf-m-drag-hover	--pf-v6-c-code-editor__upload--before--BorderColor	var( --pf-t--global--border--color--clicked)
--pf-v6-c-code-editor__upload--before--BorderColor --pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor var( --pf-t--global--border--color--clicked) var( --pf-t--global--border--color--clicked)

View source on GitHub