Realtime Monaco

Installation

<BlockItem name="realtime-monaco-nextjs" description="Real-time Monaco editor for collaborative applications." />

Folder structure

Introduction

The Realtime Monaco component provides a collaborative code editor powered by Monaco and Yjs. It uses @supabase-labs/y-supabase under the hood to sync document state across clients through Supabase Realtime.

Features

• Real-time document synchronization via Supabase Realtime broadcast
• Cursor and selection sharing between collaborators (awareness)
• Optional persistence to Postgres so documents survive page reloads
• Supports all Monaco languages and themes
• Room-based isolation for scoped collaboration

How it works under the hood

The component creates a Yjs document and connects it to a Supabase Realtime channel using SupabaseProvider from @supabase-labs/y-supabase. A MonacoBinding from y-monaco bridges the Yjs document with the Monaco editor model, keeping them in sync.

When awareness is enabled, each user's cursor position and selection are broadcast to other clients in the same channel. Remote cursors are rendered with unique colors via dynamically injected CSS.

When persistence is enabled, the full Yjs document state is saved to a Postgres table so it can be restored when clients reconnect.

Usage

Basic usage

import { RealtimeMonaco } from '@/components/realtime-monaco'

export default function MonacoPage() {
  return <RealtimeMonaco channel="realtime-monaco-demo" language="typescript" />
}

With persistence

Enable persistence to save the editor content to your Supabase database. This requires a table to store the Yjs document state.

First, create the required table in your Supabase project:

create table yjs_documents (
  room text primary key,
  state text not null
);

Then pass persistence to the component:

import { RealtimeMonaco } from '@/components/realtime-monaco'

export default function MonacoPage() {
  return <RealtimeMonaco channel="realtime-monaco-demo" language="typescript" persistence />
}

You can also pass a SupabasePersistenceOptions object:

<RealtimeMonaco
  channel="realtime-monaco-demo"
  language="typescript"
  persistence={{
    table: 'yjs_documents',
    roomColumn: 'room',
    stateColumn: 'state',
    storeTimeout: 2000,
  }}
/>

Without awareness

By default, cursor and selection positions are shared between collaborators. To disable this:

<RealtimeMonaco channel="realtime-monaco-demo" awareness={false} />

Props

SupabasePersistenceOptions

Further reading

• Realtime Broadcast
• Realtime authorization
• @supabase-labs/y-supabase
• Yjs documentation