Skip to content
Patternfly Logo

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.

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Default

HTML
                code goes here
      

Read-only

HTML
                code goes here
      

Without actions

YAML

Start editing

Drag a file here or browse to upload.

Drag file and hover over component

YAML

Start editing

Drag a file here or browse to upload.

With optional header content and keyboard shortcuts

Header main content
HTML
                code goes here
      

Documentation

Overview

Accessibility

Class
Applied to
Outcome

Usage

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

CSS variables

.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--Color
#6a6e73
.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--hover--Color
#151515
.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--focus--Color
#151515
.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__header--before--BorderBottomWidth
1px
.pf-c-code-editor--pf-c-code-editor__header--before--BorderBottomColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__main--BorderColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__main--BorderWidth
1px
.pf-c-code-editor--pf-c-code-editor__main--BackgroundColor
#fff
.pf-c-code-editor--pf-c-code-editor--m-read-only__main--BackgroundColor
#f0f0f0
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--before--BorderWidth
1px
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--before--BorderColor
#06c
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--after--BackgroundColor
#06c
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--after--Opacity
.1
.pf-c-code-editor--pf-c-code-editor__code--PaddingTop
0.5rem
.pf-c-code-editor--pf-c-code-editor__code--PaddingRight
0.5rem
.pf-c-code-editor--pf-c-code-editor__code--PaddingBottom
0.5rem
.pf-c-code-editor--pf-c-code-editor__code--PaddingLeft
0.5rem
.pf-c-code-editor--pf-c-code-editor__code-pre--FontSize
0.875rem
.pf-c-code-editor--pf-c-code-editor__code-pre--FontFamily
'"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
.pf-c-code-editor--pf-c-code-editor__header-main--PaddingRight
0.5rem
.pf-c-code-editor--pf-c-code-editor__header-main--PaddingLeft
0.5rem
.pf-c-code-editor--pf-c-code-editor__tab--BackgroundColor
#fff
.pf-c-code-editor--pf-c-code-editor__tab--Color
#6a6e73
.pf-c-code-editor--pf-c-code-editor__tab--PaddingTop
0.375rem
.pf-c-code-editor--pf-c-code-editor__tab--PaddingRight
0.5rem
.pf-c-code-editor--pf-c-code-editor__tab--PaddingBottom
0.375rem
.pf-c-code-editor--pf-c-code-editor__tab--PaddingLeft
0.5rem
.pf-c-code-editor--pf-c-code-editor__tab--BorderTopWidth
1px
.pf-c-code-editor--pf-c-code-editor__tab--BorderRightWidth
1px
.pf-c-code-editor--pf-c-code-editor__tab--BorderBottomWidth
0
.pf-c-code-editor--pf-c-code-editor__tab--BorderLeftWidth
1px
.pf-c-code-editor--pf-c-code-editor__tab--BorderColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__tab-icon--text--MarginLeft
0.5rem
.pf-c-code-editor.pf-m-read-only--pf-c-code-editor__main--BackgroundColor
#f0f0f0
.pf-c-code-editor__controls .pf-c-button.pf-m-control--pf-c-button--m-control--Color
#6a6e73
.pf-c-code-editor__controls .pf-c-button.pf-m-control:hover--pf-c-code-editor__controls--c-button--m-control--Color
#151515
.pf-c-code-editor__controls .pf-c-button.pf-m-control:focus--pf-c-code-editor__controls--c-button--m-control--Color
#151515

View source on GitHub