diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
index 857fd563bcb..f99c68300f5 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -12,284 +12,30 @@ import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ## Examples
+
 ### Basic
-```js
-import React from 'react';
-import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Checkbox } from '@patternfly/react-core';
 
-class BasicCodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDarkTheme: false,
-      isLineNumbersVisible: true,
-      isReadOnly: false,
-      isMinimapVisible: true
-    };
-    
-    this.toggleDarkTheme = checked => {
-      this.setState({
-        isDarkTheme: checked
-      });
-    };
-    this.toggleLineNumbers = checked => {
-      this.setState({
-        isLineNumbersVisible: checked
-      });
-    };
-    this.toggleReadOnly = checked => {
-      this.setState({
-        isReadOnly: checked
-      });
-    };
-    this.toggleMinimap = checked => {
-      this.setState({
-        isMinimapVisible: checked
-      })
-    };
-    
-    this.onEditorDidMount = (editor, monaco) => {
-      console.log(editor.getValue());
-      editor.layout();
-      editor.focus();
-      monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
-    };
-    
-    this.onChange = value => {
-      console.log(value);
-    };
-  }
-  
-  render() {
-    const { isDarkTheme, isLineNumbersVisible, isReadOnly, isMinimapVisible } = this.state;
-    
-    return (
-      <>
-        <Checkbox
-          label="Dark theme"
-          isChecked={isDarkTheme}
-          onChange={this.toggleDarkTheme}
-          aria-label="dark theme checkbox"
-          id="toggle-theme"
-          name="toggle-theme"
-        />
-        <Checkbox
-          label="Line numbers"
-          isChecked={isLineNumbersVisible}
-          onChange={this.toggleLineNumbers}
-          aria-label="line numbers checkbox"
-          id="toggle-line-numbers"
-          name="toggle-line-numbers"
-        />
-        <Checkbox
-          label="Read only"
-          isChecked={isReadOnly}
-          onChange={this.toggleReadOnly}
-          aria-label="read only checkbox"
-          id="toggle-read-only"
-          name="toggle-read-only"
-        />
-        <Checkbox
-          label="Minimap"
-          isChecked={isMinimapVisible}
-          onChange={this.toggleMinimap}
-          aria-label="display minimap checkbox"
-          id="toggle-minimap"
-          name="toggle-minimap"
-        />
-        <CodeEditor
-          isDarkTheme={isDarkTheme}
-          isLineNumbersVisible={isLineNumbersVisible}
-          isReadOnly={isReadOnly}
-          isMinimapVisible={isMinimapVisible}
-          isLanguageLabelVisible
-          code="Some example content"
-          onChange={this.onChange}
-          language={Language.javascript}
-          onEditorDidMount={this.onEditorDidMount}
-          height='400px'
-        />
-      </>
-    );
-  }
-}
+```ts file="./CodeEditorBasic.tsx"
 ```
 
 ### With sizeToFit height, height will grow/shrink with content
-```js
-import React from 'react';
-import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
-class BasicCodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    
-    this.onEditorDidMount = (editor, monaco) => {
-      console.log(editor.getValue());
-      editor.layout();
-      editor.focus();
-      monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
-    };
-    
-    this.onChange = value => {
-      console.log(value);
-    };
-  }
-  
-  render() {    
-    return (
-      <CodeEditor
-        code="Some example content"
-        onChange={this.onChange}
-        language={Language.javascript}
-        onEditorDidMount={this.onEditorDidMount}
-        height='sizeToFit'
-      />
-    );
-  }
-}
+```ts file="./CodeEditorSizeToFit.tsx"
 ```
 
-### With shortcut menu and main header content.
+### With shortcut menu and main header content
+
 These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.
-```js
-import React from 'react';
-import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Checkbox, Grid, GridItem, Chip } from '@patternfly/react-core';
 
-class BasicCodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    
-    this.onEditorDidMount = (editor, monaco) => {
-      console.log(editor.getValue());
-      editor.layout();
-      editor.focus();
-      monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
-    };
-    
-    this.onChange = value => {
-      console.log(value);
-    };
-  }
-  
-  render() {
-    const shortcuts = [
-      {
-        keys: ["Opt","F1"],
-        description: "Accessibility helps",
-      },
-      {
-        keys: ["F1"],
-        description: "View all editor shortcuts",
-      },
-      {
-        keys: ["Ctrl", "Space"],
-        description: "Activate auto complete",
-      },
-      {
-        keys: ["Cmd", "S"],
-        description: "Save",
-      },
-    ];
-    const shortcutsPopoverProps = {
-      bodyContent:
-        <Grid span={6} hasGutter>
-          {shortcuts.map(s => (
-            <>
-              <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
-                {s.keys
-                  .map(k => (
-                    <Chip key={k} isReadOnly>
-                      {k}
-                    </Chip>
-                  ))
-                  .reduce((prev, curr) => [prev, ' + ', curr])}
-              </GridItem>
-              <GridItem>{s.description}</GridItem>
-            </>
-          ))}
-        </Grid>,
-      'aria-label': "Shortcuts",
-    }
-    
-    return (
-      <>
-        <CodeEditor
-          headerMainContent="Shortcut Example"
-          shortcutsPopoverProps={shortcutsPopoverProps}
-          isLanguageLabelVisible
-          code="Some example content"
-          onChange={this.onChange}
-          language={Language.javascript}
-          onEditorDidMount={this.onEditorDidMount}
-          height='400px'
-        />
-      </>
-    );
-  }
-}
+```ts file="./CodeEditorShortcutMainHeader.tsx"
 ```
 
 ### With actions
-```js
-import React from 'react';
-import { CodeEditor } from '@patternfly/react-code-editor';
 
-<CodeEditor
-  isUploadEnabled
-  isDownloadEnabled
-  isCopyEnabled
-  isLanguageLabelVisible
-  height='400px'
-/>
+```ts file="./CodeEditorWithActions.tsx"
 ```
 
 ### With custom control
-```js
-import React from 'react';
-import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
-class customControlExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      code: ''
-    };
-    
-    this.onChange = code => {
-      this.setState({ code })
-    };
-    
-    this.onExecuteCode = (code) => {
-      console.log(code);
-    };
-  }
- 
-  render() {
-    const customControl = (
-      <CodeEditorControl 
-        icon={<PlayIcon/>}
-        aria-label="Execute code"
-        toolTipText="Execute code"
-        onClick={this.onExecuteCode}
-        isVisible={this.state.code !== ''}
-      />);
-    
-    return (
-      <>
-        <CodeEditor
-          isDownloadEnabled
-          isCopyEnabled
-          height='400px'
-          customControls={customControl}
-          code={this.state.code}
-          onChange={this.onChange}
-        />
-      </>
-    );
-  }
-}
+```ts file="CodeEditorCustomControl.tsx"
 ```
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
new file mode 100644
index 00000000000..06d9298faf7
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CodeEditorBasic: React.FunctionComponent = () => {
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+  const [isLineNumbersVisible, setIsLineNumbersVisible] = React.useState(true);
+  const [isReadOnly, setIsReadOnly] = React.useState(false);
+  const [isMinimapVisible, setIsMinimapVisible] = React.useState(false);
+
+  const toggleDarkTheme = checked => {
+    setIsDarkTheme(checked);
+  };
+
+  const toggleLineNumbers = checked => {
+    setIsLineNumbersVisible(checked);
+  };
+  const toggleReadOnly = checked => {
+    setIsReadOnly(checked);
+  };
+  const toggleMinimap = checked => {
+    setIsMinimapVisible(checked);
+  };
+
+  const onEditorDidMount = (editor, monaco) => {
+    // eslint-disable-next-line no-console
+    console.log(editor.getValue());
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = value => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Dark theme"
+        isChecked={isDarkTheme}
+        onChange={toggleDarkTheme}
+        aria-label="dark theme checkbox"
+        id="toggle-theme"
+        name="toggle-theme"
+      />
+      <Checkbox
+        label="Line numbers"
+        isChecked={isLineNumbersVisible}
+        onChange={toggleLineNumbers}
+        aria-label="line numbers checkbox"
+        id="toggle-line-numbers"
+        name="toggle-line-numbers"
+      />
+      <Checkbox
+        label="Read only"
+        isChecked={isReadOnly}
+        onChange={toggleReadOnly}
+        aria-label="read only checkbox"
+        id="toggle-read-only"
+        name="toggle-read-only"
+      />
+      <Checkbox
+        label="Minimap"
+        isChecked={isMinimapVisible}
+        onChange={toggleMinimap}
+        aria-label="display minimap checkbox"
+        id="toggle-minimap"
+        name="toggle-minimap"
+      />
+      <CodeEditor
+        isDarkTheme={isDarkTheme}
+        isLineNumbersVisible={isLineNumbersVisible}
+        isReadOnly={isReadOnly}
+        isMinimapVisible={isMinimapVisible}
+        isLanguageLabelVisible
+        code="Some example content"
+        onChange={onChange}
+        language={Language.javascript}
+        onEditorDidMount={onEditorDidMount}
+        height="400px"
+      />
+    </>
+  );
+};
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
new file mode 100644
index 00000000000..889f96ece06
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const CodeEditorCustomControl: React.FunctionComponent = () => {
+  const [code, setCode] = React.useState('');
+
+  const onChange = code => {
+    setCode(code);
+  };
+
+  const onExecuteCode = code => {
+    // eslint-disable-next-line no-console
+    console.log(code);
+  };
+
+  const customControl = (
+    <CodeEditorControl
+      icon={<PlayIcon />}
+      aria-label="Execute code"
+      toolTipText="Execute code"
+      onClick={onExecuteCode}
+      isVisible={code !== ''}
+    />
+  );
+
+  return (
+    <CodeEditor
+      isDownloadEnabled
+      isCopyEnabled
+      height="400px"
+      customControls={customControl}
+      code={code}
+      onChange={onChange}
+    />
+  );
+};
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
new file mode 100644
index 00000000000..10443db4628
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { Grid, GridItem, Chip } from '@patternfly/react-core';
+
+export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
+  const onEditorDidMount = (editor, monaco) => {
+    // eslint-disable-next-line no-console
+    console.log(editor.getValue());
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = value => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  const shortcuts = [
+    {
+      keys: ['Opt', 'F1'],
+      description: 'Accessibility helps'
+    },
+    {
+      keys: ['F1'],
+      description: 'View all editor shortcuts'
+    },
+    {
+      keys: ['Ctrl', 'Space'],
+      description: 'Activate auto complete'
+    },
+    {
+      keys: ['Cmd', 'S'],
+      description: 'Save'
+    }
+  ];
+  const shortcutsPopoverProps = {
+    bodyContent: (
+      <Grid span={6} hasGutter>
+        {shortcuts.map(s => (
+          <>
+            <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
+              {s.keys
+                .map(k => (
+                  <Chip key={k} isReadOnly>
+                    {k}
+                  </Chip>
+                ))
+                .reduce((prev, curr) => (
+                  <>{[prev, ' + ', curr]}</>
+                ))}
+            </GridItem>
+            <GridItem>{s.description}</GridItem>
+          </>
+        ))}
+      </Grid>
+    ),
+    'aria-label': 'Shortcuts'
+  };
+
+  return (
+    <CodeEditor
+      headerMainContent="Shortcut Example"
+      shortcutsPopoverProps={shortcutsPopoverProps}
+      isLanguageLabelVisible
+      code="Some example content"
+      onChange={onChange}
+      language={Language.javascript}
+      onEditorDidMount={onEditorDidMount}
+      height="400px"
+    />
+  );
+};
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
new file mode 100644
index 00000000000..3b285d9771e
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+
+export const CodeEditorSizeToFit: React.FunctionComponent = () => {
+  const onEditorDidMount = (editor, monaco) => {
+    // eslint-disable-next-line no-console
+    console.log(editor.getValue());
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = value => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <CodeEditor
+      code="Some example content"
+      onChange={onChange}
+      language={Language.javascript}
+      onEditorDidMount={onEditorDidMount}
+      height="sizeToFit"
+    />
+  );
+};
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
new file mode 100644
index 00000000000..bc0b4a4ecd2
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { CodeEditor } from '@patternfly/react-code-editor';
+
+export const CodeEditorWithActions: React.FunctionComponent = () => (
+  <CodeEditor isUploadEnabled isDownloadEnabled isCopyEnabled isLanguageLabelVisible height="400px" />
+);