Patternfly Logo

Code editor

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

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.

Documentation

Overview

Accessibility

ClassApplied toOutcome

Usage

ClassApplied toOutcome
.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__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


View source on Github