{post.title}

Published: {post.date} • Last updated: {post.updatedAt} • {post.author}

Introduction

Interactive code playgrounds have become essential for developer-focused websites, documentation, and educational platforms. They allow users to experiment with code directly in the browser, providing immediate feedback and a hands-on learning experience.

In this comprehensive guide, we'll explore how to embed two of the most popular code editors—Monaco Editor (the engine behind VS Code) and CodeMirror—into your website. We'll cover basic setup, advanced features, performance considerations, and integration with code formatters.

Monaco Editor

Monaco Editor is the powerful, open-source code editor that powers Visual Studio Code. It offers rich IntelliSense, validation, and a highly customizable interface that closely mimics the VS Code experience.

Setting Up Monaco Editor

To get started with Monaco Editor, you'll need to install the package:

For web applications, you might also want to consider using the Monaco Editor Webpack Plugin if you're using Webpack:

Basic Monaco Implementation

Here's a simple example of how to create a Monaco Editor instance:

import * as monaco from 'monaco-editor';

// Create a container element
const editorContainer = document.getElementById('editor-container');

// Initialize the editor
const editor = monaco.editor.create(editorContainer, {
  value: '// Type your code here\nfunction helloWorld() {\n  console.log("Hello, world!");\n}\n\nhelloWorld();',
  language: 'javascript',
  theme: 'vs-dark',
  automaticLayout: true,
  minimap: { enabled: true }
});

// Get the current value
function getCode() {
  return editor.getValue();
}

// Set a new value
function setCode(code) {
  editor.setValue(code);
}

// Dispose the editor when no longer needed
function disposeEditor() {
  editor.dispose();
}

For React applications, you can create a simple wrapper component:

import React, { useRef, useEffect } from 'react';
import * as monaco from 'monaco-editor';

export default function MonacoEditor({ defaultValue, language, theme, onChange }) {
  const editorRef = useRef(null);
  const containerRef = useRef(null);
  
  useEffect(() => {
    if (containerRef.current) {
      editorRef.current = monaco.editor.create(containerRef.current, {
        value: defaultValue || '',
        language: language || 'javascript',
        theme: theme || 'vs-dark',
        automaticLayout: true,
        minimap: { enabled: true }
      });
      
      // Add event listener for content changes
      editorRef.current.onDidChangeModelContent(() => {
        if (onChange) {
          onChange(editorRef.current.getValue());
        }
      });
    }
    
    return () => {
      if (editorRef.current) {
        editorRef.current.dispose();
      }
    };
  }, []);
  
  return ;
}

Advanced Monaco Features

Monaco Editor offers many advanced features that can enhance your code playground:

Custom Language Support

// Register a new language
monaco.languages.register({ id: 'myCustomLanguage' });

// Define tokens for syntax highlighting
monaco.languages.setMonarchTokensProvider('myCustomLanguage', {
  tokenizer: {
    root: [
      [/\\[.*\\]/, 'custom-brackets'],
      [/\\b(if|else|return|for)\\b/, 'custom-keywords'],
      [/\\b[0-9]+\\b/, 'custom-numbers'],
      [/".*?"/, 'custom-strings'],
      [/\\/\\/.*$/, 'custom-comments'],
    ]
  }
});

// Define a theme that uses these token colors
monaco.editor.defineTheme('myCustomTheme', {
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: 'custom-brackets', foreground: '#FF9D00' },
    { token: 'custom-keywords', foreground: '#569CD6', fontStyle: 'bold' },
    { token: 'custom-numbers', foreground: '#B5CEA8' },
    { token: 'custom-strings', foreground: '#CE9178' },
    { token: 'custom-comments', foreground: '#6A9955' },
  ],
  colors: {
    'editor.background': '#1E1E1E',
  }
});

// Use the custom language and theme
const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: 'if (true) { return 42; } // A comment',
  language: 'myCustomLanguage',
  theme: 'myCustomTheme'
});

IntelliSense and Code Completion

// Register completion item provider
monaco.languages.registerCompletionItemProvider('javascript', {
  provideCompletionItems: (model, position) => {
    const word = model.getWordUntilPosition(position);
    const range = {
      startLineNumber: position.lineNumber,
      endLineNumber: position.lineNumber,
      startColumn: word.startColumn,
      endColumn: word.endColumn
    };
    
    return {
      suggestions: [
        {
          label: 'console.log',
          kind: monaco.languages.CompletionItemKind.Function,
          documentation: 'Log to the console',
          insertText: 'console.log($1);$0',
          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
          range: range
        },
        {
          label: 'setTimeout',
          kind: monaco.languages.CompletionItemKind.Function,
          documentation: 'Execute code after a delay',
          insertText: 'setTimeout(() => {\n\t$1\n}, $2);$0',
          insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
          range: range
        }
      ]
    };
  }
});

Code Execution

To create a true playground experience, you'll want to execute the code. Here's a simple approach using an iframe for JavaScript:

function executeCode(code) {
  // Create a sandbox iframe
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  
  // Get the iframe's window object
  const iframeWindow = iframe.contentWindow;
  
  // Create a console.log override to capture output
  const outputDiv = document.getElementById('output');
  outputDiv.innerHTML = '';
  
  iframeWindow.console = {
    log: function(...args) {
      const output = args.map(arg => {
        if (typeof arg === 'object') {
          return JSON.stringify(arg, null, 2);
        }
        return String(arg);
      }).join(' ');
      
      const logLine = document.createElement('div');
      logLine.textContent = output;
      outputDiv.appendChild(logLine);
    },
    error: function(...args) {
      const output = args.map(arg => String(arg)).join(' ');
      
      const errorLine = document.createElement('div');
      errorLine.textContent = output;
      errorLine.style.color = 'red';
      outputDiv.appendChild(errorLine);
    }
  };
  
  try {
    // Execute the code
    iframeWindow.eval(code);
  } catch (error) {
    // Handle errors
    const errorLine = document.createElement('div');
    errorLine.textContent = error.toString();
    errorLine.style.color = 'red';
    outputDiv.appendChild(errorLine);
  }
  
  // Clean up
  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 100);
}

CodeMirror

CodeMirror is a versatile, lightweight code editor implemented in JavaScript for the browser. It's highly customizable and has been around for many years, making it a reliable choice for code editing on the web.

Setting Up CodeMirror

For CodeMirror 6 (the latest version), you'll need to install several packages:

For language support, you'll need additional packages:

Basic CodeMirror Implementation

Here's a simple example of how to create a CodeMirror 6 editor:

import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { basicSetup } from '@codemirror/basic-setup';

// Create a container element
const editorContainer = document.getElementById('editor-container');

// Create the editor state
const startState = EditorState.create({
  doc: '// Type your code here\nfunction helloWorld() {\n  console.log("Hello, world!");\n}\n\nhelloWorld();',
  extensions: [
    basicSetup,
    keymap.of(defaultKeymap),
    javascript(),
  ]
});

// Create the editor view
const view = new EditorView({
  state: startState,
  parent: editorContainer
});

// Get the current value
function getCode() {
  return view.state.doc.toString();
}

// Set a new value
function setCode(code) {
  view.dispatch({
    changes: {
      from: 0,
      to: view.state.doc.length,
      insert: code
    }
  });
}

// Dispose the editor when no longer needed
function disposeEditor() {
  view.destroy();
}

For React applications, you can create a wrapper component:

import React, { useRef, useEffect } from 'react';
import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { basicSetup } from '@codemirror/basic-setup';

export default function CodeMirrorEditor({ defaultValue, language, onChange }) {
  const editorRef = useRef(null);
  const containerRef = useRef(null);
  
  useEffect(() => {
    if (containerRef.current) {
      // Determine language extension
      let languageExtension;
      switch (language) {
        case 'javascript':
          languageExtension = javascript();
          break;
        // Add more language cases as needed
        default:
          languageExtension = javascript();
      }
      
      // Create the editor state
      const startState = EditorState.create({
        doc: defaultValue || '',
        extensions: [
          basicSetup,
          keymap.of(defaultKeymap),
          languageExtension,
          EditorView.updateListener.of(update => {
            if (update.docChanged && onChange) {
              onChange(update.state.doc.toString());
            }
          })
        ]
      });
      
      // Create the editor view
      editorRef.current = new EditorView({
        state: startState,
        parent: containerRef.current
      });
    }
    
    return () => {
      if (editorRef.current) {
        editorRef.current.destroy();
      }
    };
  }, []);
  
  return ;
}

Advanced CodeMirror Features

CodeMirror 6 offers many advanced features to enhance your code playground:

Custom Theme

import { EditorView } from '@codemirror/view';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { tags } from '@lezer/highlight';

// Define theme colors
const myTheme = EditorView.theme({
  '&': {
    backgroundColor: '#282c34',
    color: '#abb2bf'
  },
  '.cm-content': {
    caretColor: '#528bff'
  },
  '.cm-cursor': {
    borderLeftColor: '#528bff'
  },
  '.cm-activeLine': {
    backgroundColor: '#2c313c'
  },
  '.cm-selectionMatch': {
    backgroundColor: '#3E4451'
  },
  '.cm-gutters': {
    backgroundColor: '#282c34',
    color: '#676f7d',
    border: 'none'
  },
  '.cm-activeLineGutter': {
    backgroundColor: '#2c313a'
  }
});

// Define syntax highlighting
const myHighlightStyle = HighlightStyle.define([
  { tag: tags.keyword, color: '#c678dd' },
  { tag: tags.comment, color: '#5c6370', fontStyle: 'italic' },
  { tag: tags.string, color: '#98c379' },
  { tag: tags.number, color: '#d19a66' },
  { tag: tags.function(tags.variableName), color: '#61afef' },
  { tag: tags.definition(tags.propertyName), color: '#e06c75' }
]);

// Combine them into a single extension
const myThemeExtension = [
  myTheme,
  syntaxHighlighting(myHighlightStyle)
];

// Use in editor creation
const startState = EditorState.create({
  doc: '// Your code here',
  extensions: [
    basicSetup,
    javascript(),
    myThemeExtension
  ]
});

Code Linting

You can integrate ESLint with CodeMirror to provide real-time linting:

import { linter, lintGutter } from '@codemirror/lint';
import { esLint } from '@codemirror/lang-javascript';

// Create a linting function
const myLinter = linter(view => {
  const code = view.state.doc.toString();
  // This is a simplified example. In a real app, you'd use ESLint to analyze the code
  const issues = [];
  
  // Simple example: flag console.log statements
  const consoleRegex = /console\\.log\\(/g;
  let match;
  while ((match = consoleRegex.exec(code)) !== null) {
    issues.push({
      from: match.index,
      to: match.index + match[0].length,
      severity: 'warning',
      message: 'Avoid using console.log in production code'
    });
  }
  
  return issues;
});

// Add to editor extensions
const extensions = [
  basicSetup,
  javascript(),
  lintGutter(),
  myLinter
];

Monaco vs CodeMirror: Comparison

Performance Considerations

When embedding a code editor in your website, performance is a critical consideration. Here are some tips to optimize performance:

Lazy Loading

Both Monaco and CodeMirror are substantial libraries. Consider lazy loading them only when needed:

// Using dynamic imports with React
import React, { useState, useEffect, lazy, Suspense } from 'react';

// Lazy load the editor component
const MonacoEditorComponent = lazy(() => import('./MonacoEditor'));

export default function CodePlayground() {
  const [showEditor, setShowEditor] = useState(false);
  
  return (
    
      {!showEditor && (
        
      )}
      
      {showEditor && (
        Loading editor...}>
          
        
      )}


  );
}

Worker Threads

Monaco Editor can use web workers to offload heavy processing:

// In your webpack config
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['javascript', 'typescript', 'html', 'css'],
      features: ['!gotoSymbol'],
      filename: 'monaco-editor-workers/[name].worker.js'
    })
  ]
};

// In your application code
import * as monaco from 'monaco-editor';

// Set the path to the worker
self.MonacoEnvironment = {
  getWorkerUrl: function(moduleId, label) {
    if (label === 'json') {
      return './monaco-editor-workers/json.worker.js';
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return './monaco-editor-workers/css.worker.js';
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return './monaco-editor-workers/html.worker.js';
    }
    if (label === 'typescript' || label === 'javascript') {
      return './monaco-editor-workers/ts.worker.js';
    }
    return './monaco-editor-workers/editor.worker.js';
  }
};

Editor Instance Management

Be careful with creating multiple editor instances:

// Bad: Creating many instances
function createEditors() {
  for (let i = 0; i < 50; i++) {
    const editor = monaco.editor.create(document.getElementById('editor-' + i), {
      value: 'console.log("Editor " + ' + i + ');',
      language: 'javascript'
    });
  }
}

// Better: Reuse a single instance
function createSingleEditor() {
  const editor = monaco.editor.create(document.getElementById('editor-container'), {
    value: 'console.log("Editor");',
    language: 'javascript'
  });
  
  // Update content when needed
  function updateEditorContent(newContent) {
    editor.setValue(newContent);
  }
}

Accessibility

Making your code playground accessible is essential for users with disabilities. Here are some tips:

ARIA Labels

// For Monaco Editor
const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: 'console.log("Hello, world!");',
  language: 'javascript',
  ariaLabel: 'JavaScript Code Editor',
  accessibilitySupport: 'on'
});

// For CodeMirror, add ARIA attributes to the container
const container = document.getElementById('editor-container');
container.setAttribute('aria-label', 'JavaScript Code Editor');
container.setAttribute('role', 'textbox');
container.setAttribute('aria-multiline', 'true');

Keyboard Navigation

Ensure your playground can be fully operated with a keyboard:

// React component with keyboard-accessible controls
function CodePlayground() {
  const [code, setCode] = useState('console.log("Hello, world!");');
  const editorRef = useRef(null);
  
  const runCode = () => {
    // Code execution logic
    console.log('Running code:', code);
  };
  
  return (
    
      
        
        
      
      
      
      
      
        {/* Output will be displayed here */}
      
    
  );
}

Color Contrast

Ensure your editor theme has sufficient color contrast:

// High contrast theme for Monaco
monaco.editor.defineTheme('highContrastTheme', {
  base: 'vs-dark',
  inherit: true,
  rules: [
    { token: 'comment', foreground: '#a5a5a5' },
    { token: 'keyword', foreground: '#ffff00' },
    { token: 'string', foreground: '#00ff00' },
    { token: 'number', foreground: '#ff00ff' },
  ],
  colors: {
    'editor.background': '#000000',
    'editor.foreground': '#ffffff',
    'editorCursor.foreground': '#ffffff',
    'editor.lineHighlightBackground': '#333333',
    'editorLineNumber.foreground': '#ffffff',
    'editor.selectionBackground': '#555555',
    'editor.inactiveSelectionBackground': '#444444',
  }
});

// Apply the theme
monaco.editor.setTheme('highContrastTheme');

Integrating Code Formatters

A code playground is even more useful when it includes code formatting capabilities. Here's how to integrate Prettier with both editors:

Prettier with Monaco

import * as monaco from 'monaco-editor';
import prettier from 'prettier';
import parserBabel from 'prettier/parser-babel';
import parserHTML from 'prettier/parser-html';
import parserCSS from 'prettier/parser-postcss';

// Create a format function
async function formatCode(code, language) {
  try {
    // Determine parser based on language
    let parser;
    switch (language) {
      case 'javascript':
      case 'typescript':
        parser = 'babel';
        break;
      case 'html':
        parser = 'html';
        break;
      case 'css':
        parser = 'css';
        break;
      default:
        parser = 'babel';
    }
    
    // Format the code
    const formattedCode = await prettier.format(code, {
      parser,
      plugins: [parserBabel, parserHTML, parserCSS],
      singleQuote: true,
      tabWidth: 2,
      printWidth: 80
    });
    
    return formattedCode;
  } catch (error) {
    console.error('Formatting error:', error);
    return code; // Return original code if formatting fails
  }
}

// Add a format command to Monaco
monaco.editor.addAction({
  id: 'format-code',
  label: 'Format Code',
  keybindings: [
    monaco.KeyMod.Alt | monaco.KeyCode.KEY_F
  ],
  contextMenuGroupId: 'navigation',
  contextMenuOrder: 1.5,
  run: async function(editor) {
    const code = editor.getValue();
    const language = editor.getModel().getLanguageId();
    
    const formattedCode = await formatCode(code, language);
    
    // Replace the editor content
    editor.executeEdits('format-code', [{
      range: editor.getModel().getFullModelRange(),
      text: formattedCode,
      forceMoveMarkers: true
    }]);
  }
});

Prettier with CodeMirror

import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { basicSetup } from '@codemirror/basic-setup';
import prettier from 'prettier';
import parserBabel from 'prettier/parser-babel';

// Create a format command
const formatCommand = view => {
  const code = view.state.doc.toString();
  
  prettier.format(code, {
    parser: 'babel',
    plugins: [parserBabel],
    singleQuote: true,
    tabWidth: 2
  }).then(formattedCode => {
    view.dispatch({
      changes: {
        from: 0,
        to: view.state.doc.length,
        insert: formattedCode
      }
    });
  }).catch(error => {
    console.error('Formatting error:', error);
  });
  
  return true;
};

// Add the command to the keymap
const formattingKeymap = keymap.of([{
  key: 'Alt-f',
  run: formatCommand
}]);

// Create the editor with the formatting command
const startState = EditorState.create({
  doc: 'function hello() { return "Hello, world!"; }',
  extensions: [
    basicSetup,
    javascript(),
    formattingKeymap
  ]
});

const view = new EditorView({
  state: startState,
  parent: document.getElementById('editor-container')
});

React Components

Here are complete React components for both Monaco and CodeMirror that you can use in your projects:

Monaco Editor Component

import React, { useRef, useEffect, useState } from 'react';
import * as monaco from 'monaco-editor';
import prettier from 'prettier';
import parserBabel from 'prettier/parser-babel';

export default function MonacoPlayground({ 
  defaultValue = '// Type your code here\nconsole.log("Hello, world!");',
  language = 'javascript',
  theme = 'vs-dark',
  onChange = null
}) {
  const editorRef = useRef(null);
  const containerRef = useRef(null);
  const [output, setOutput] = useState('');
  
  // Initialize editor
  useEffect(() => {
    if (containerRef.current) {
      editorRef.current = monaco.editor.create(containerRef.current, {
        value: defaultValue,
        language,
        theme,
        automaticLayout: true,
        minimap: { enabled: true },
        scrollBeyondLastLine: false,
        fontSize: 14,
        lineNumbers: 'on',
        folding: true,
        renderLineHighlight: 'all',
        suggestOnTriggerCharacters: true,
        acceptSuggestionOnEnter: 'on',
        tabCompletion: 'on',
        wordBasedSuggestions: true
      });
      
      // Add event listener for content changes
      editorRef.current.onDidChangeModelContent(() => {
        if (onChange) {
          onChange(editorRef.current.getValue());
        }
      });
      
      // Add format command
      editorRef.current.addAction({
        id: 'format-code',
        label: 'Format Code',
        keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KEY_F],
        run: async (editor) => {
          try {
            const formattedCode = await prettier.format(editor.getValue(), {
              parser: 'babel',
              plugins: [parserBabel],
              singleQuote: true,
              tabWidth: 2
            });
            
            editor.executeEdits('format-code', [{
              range: editor.getModel().getFullModelRange(),
              text: formattedCode,
              forceMoveMarkers: true
            }]);
          } catch (error) {
            console.error('Formatting error:', error);
          }
        }
      });
    }
    
    return () => {
      if (editorRef.current) {
        editorRef.current.dispose();
      }
    };
  }, []);
  
  // Execute code
  const runCode = () => {
    try {
      // Create a sandbox
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      
      // Capture console output
      const logs = [];
      iframe.contentWindow.console = {
        log: (...args) => {
          logs.push(args.map(arg => {
            if (typeof arg === 'object') {
              return JSON.stringify(arg, null, 2);
            }
            return String(arg);
          }).join(' '));
        },
        error: (...args) => {
          logs.push('ERROR: ' + args.map(arg => String(arg)).join(' '));
        },
        warn: (...args) => {
          logs.push('WARNING: ' + args.map(arg => String(arg)).join(' '));
        },
        info: (...args) => {
          logs.push('INFO: ' + args.map(arg => String(arg)).join(' '));
        }
      };
      
      // Execute the code
      const code = editorRef.current.getValue();
      iframe.contentWindow.eval(code);
      
      // Update output
      setOutput(logs.join('\\n'));
      
      // Clean up
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 100);
    } catch (error) {
      setOutput('Error: ' + error.toString());
    }
  };
  
  // Format code
  const formatCode = async () => {
    try {
      const code = editorRef.current.getValue();
      const formattedCode = await prettier.format(code, {
        parser: 'babel',
        plugins: [parserBabel],
        singleQuote: true,
        tabWidth: 2
      });
      
      editorRef.current.executeEdits('format-code', [{
        range: editorRef.current.getModel().getFullModelRange(),
        text: formattedCode,
        forceMoveMarkers: true
      }]);
    } catch (error) {
      console.error('Formatting error:', error);
    }
  };
  
  return (
    
      
        
        
      
      
      
      
      
        Output:
                  {output || 'Run your code to see output here'}
        
      
    
  );
}

CodeMirror Component

import React, { useRef, useEffect, useState } from 'react';
import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
import { javascript } from '@codemirror/lang-javascript';
import { basicSetup } from '@codemirror/basic-setup';
import prettier from 'prettier';
import parserBabel from 'prettier/parser-babel';

export default function CodeMirrorPlayground({
  defaultValue = '// Type your code here\nconsole.log("Hello, world!");',
  language = 'javascript',
  onChange = null
}) {
  const editorRef = useRef(null);
  const containerRef = useRef(null);
  const [output, setOutput] = useState('');
  
  // Initialize editor
  useEffect(() => {
    if (containerRef.current) {
      // Determine language extension
      let languageExtension;
      switch (language) {
        case 'javascript':
          languageExtension = javascript();
          break;
        // Add more language cases as needed
        default:
          languageExtension = javascript();
      }
      
      // Format command
      const formatCommand = view => {
        const code = view.state.doc.toString();
        
        prettier.format(code, {
          parser: 'babel',
          plugins: [parserBabel],
          singleQuote: true,
          tabWidth: 2
        }).then(formattedCode => {
          view.dispatch({
            changes: {
              from: 0,
              to: view.state.doc.length,
              insert: formattedCode
            }
          });
        }).catch(error => {
          console.error('Formatting error:', error);
        });
        
        return true;
      };
      
      // Create the editor state
      const startState = EditorState.create({
        doc: defaultValue,
        extensions: [
          basicSetup,
          keymap.of(defaultKeymap),
          languageExtension,
          keymap.of([{
            key: 'Alt-f',
            run: formatCommand
          }]),
          EditorView.updateListener.of(update => {
            if (update.docChanged && onChange) {
              onChange(update.state.doc.toString());
            }
          })
        ]
      });
      
      // Create the editor view
      editorRef.current = new EditorView({
        state: startState,
        parent: containerRef.current
      });
    }
    
    return () => {
      if (editorRef.current) {
        editorRef.current.destroy();
      }
    };
  }, []);
  
  // Execute code
  const runCode = () => {
    try {
      // Create a sandbox
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      
      // Capture console output
      const logs = [];
      iframe.contentWindow.console = {
        log: (...args) => {
          logs.push(args.map(arg => {
            if (typeof arg === 'object') {
              return JSON.stringify(arg, null, 2);
            }
            return String(arg);
          }).join(' '));
        },
        error: (...args) => {
          logs.push('ERROR: ' + args.map(arg => String(arg)).join(' '));
        },
        warn: (...args) => {
          logs.push('WARNING: ' + args.map(arg => String(arg)).join(' '));
        },
        info: (...args) => {
          logs.push('INFO: ' + args.map(arg => String(arg)).join(' '));
        }
      };
      
      // Execute the code
      const code = editorRef.current.state.doc.toString();
      iframe.contentWindow.eval(code);
      
      // Update output
      setOutput(logs.join('\\n'));
      
      // Clean up
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 100);
    } catch (error) {
      setOutput('Error: ' + error.toString());
    }
  };
  
  // Format code
  const formatCode = async () => {
    try {
      const code = editorRef.current.state.doc.toString();
      const formattedCode = await prettier.format(code, {
        parser: 'babel',
        plugins: [parserBabel],
        singleQuote: true,
        tabWidth: 2
      });
      
      editorRef.current.dispatch({
        changes: {
          from: 0,
          to: editorRef.current.state.doc.length,
          insert: formattedCode
        }
      });
    } catch (error) {
      console.error('Formatting error:', error);
    }
  };
  
  return (
    
      
        
        
      
      
      
      
      
        Output:
                  {output || 'Run your code to see output here'}
        
      
    
  );
}

Conclusion

Embedding a code playground in your website can significantly enhance the user experience, especially for developer-focused content. Both Monaco Editor and CodeMirror offer powerful features that can be tailored to your specific needs.

When choosing between Monaco and CodeMirror, consider your specific requirements:

Choose Monaco for a full-featured IDE experience with advanced IntelliSense
Choose CodeMirror for a lightweight, highly customizable editor with better performance

Regardless of which editor you choose, remember to optimize for performance, ensure accessibility, and integrate code formatting capabilities to provide the best possible experience for your users.

By following the guidelines and examples in this article, you'll be well-equipped to create an engaging, interactive code playground that enhances your website's educational value and user engagement.

Code Playground Tips

Use lazy loading to improve initial page load performance
Implement proper error handling for code execution
Add keyboard shortcuts for common actions like run and format
Consider adding a theme switcher for better accessibility
Provide examples that users can load with a single click

Embed Monaco/CodeMirror Playground into Your Site | Web Formatter Blog