Monaco GraphQL Next.js Example

Getting Started

This is a working example of monaco-editor and monaco-graphql using Next.js 15 with Turbopack.

It shows how to use the latest monaco-editor with next.js and a custom webworker, without using @monaco/react or monaco-editor-react's approach of cdn (AMD) bundles. These approaches avoid using ESM monaco-editor or web workers, which prevents introducing custom web workers like with monaco-graphql.

For lazy loading, we use next/dynamic with {ssr: false}, but any similar client-side-only loading (with or without dynamic import) should be fine. For more information on loading monaco-editor in esm contexts, you can read their docs

This work was sponsored by Grafbase!

Setup

1. In monorepo root directory run yarn and yarn build.
2. In this directory run yarn dev.