Monaco Editor Playground

Code & IntelliSense

Monaco Editor is the code editor that powers VS Code. It features rich IntelliSense, code navigation, and high-performance editing for dozens of languages.

Code Editor
Experience the VS Code editing experience in the browser.
Loading...
Specialties

Rich IntelliSense

Built-in support for JavaScript, TypeScript, CSS, HTML and more.

Diff Editor

Powerful side-by-side or inline comparison of code changes.

Performance

Highly optimized to handle very large source code files smoothly.

Get Started

Install React wrapper:

npm install @monaco-editor/react

Basic initialization:


import Editor from '@monaco-editor/react';

function App() {
  return (
    <Editor
      height="90vh"
      defaultLanguage="javascript"
      defaultValue="// some comment"
    />
  );
}
Official Website