This package is still a work in progress. The APIs are not stable and may change.

Next Monaco

The same powerful editor used in VS Code loaded on-demand in your Next.js application.

Next Monaco provides a familiar full-featured code editing experience without sacrificing time to first byte.

npm install next-monaco

import * as React from 'react'
/** Buttons give users the ability to perform actions. */
export function Button({
  children,
  onClick,
}: {
  children: React.ReactNode
  onClick: React.MouseEventHandler<HTMLButtonElement>
}) {
  return <button onClick={onClick}>{children}</button>
}

* {
  box-sizing: border-box;
  margin: 0;
}

import * as React from 'react'
import { Button } from './Button'
import './index.css'
export default function Index() {
  return <Button onClick={() => alert('Hello')}>Say Hello</Button>
}

Server Component Ready

TextMate Highlighting

Type Acquisition

Preconfigured TypeScript

CSS Variables

Multi-Model

Lazy Loaded

Marketplace Themes

Code Formatting

plugin.ts

import { createMonacoPlugin } from 'next-monaco/plugin'
const withMonaco = createMonacoPlugin({
  theme: 'theme.json',
  types: ['next-monaco'],
})
export default withMonaco({
  experimental: {
    appDir: true,
  },
})

editor.tsx

import { Editor } from 'next-monaco'
export default function App() {
  return (
    <Editor
      fileName="index.tsx"
      value={`import { React } from 'react'`}
    />
  )
}