Technical Overview of an Open‑Source Online Collaborative Code Editor Built with Next.js and NestJS

Since July we have completely refactored the online code editor, delivering a basic version within a month and adding the core "collaboration" feature two months later.

Because the project runs on WebContainer, it must be deployed over HTTPS. Vercel offers HTTPS hosting, but our backend lacks HTTPS, so the best experience is achieved by cloning the repository and running it locally.

Technical Selection

For the front end we chose Next.js , and for the back end NestJS .

Next.js provides a simple file‑based routing system that automatically generates routes from the folder structure, reducing manual configuration.

It integrates React and Node.js, allowing developers to start quickly with familiar React syntax and eliminating the need for complex build tool setup; for projects with minimal backend dependencies, Next.js can serve as a full‑stack solution.

Next.js also offers server‑side rendering for better SEO, a rich ecosystem (Tailwind CSS, shadcn, Zustand, SWR, etc.), free deployment on Vercel, and easy integration with Supabase for database needs.

We selected NestJS for the backend because it naturally complements the TypeScript ecosystem and provides a robust, scalable server framework.

Feature Implementation

The following sections illustrate the main functionalities of the project.

Home Page

The home page features a meteor animation and accompanying content, creating a cohesive visual experience.

Control Panel

Clicking the control panel navigates to the dashboard; unauthenticated users are redirected to a login page where a verification code can be obtained, automatically creating a new account if needed.

From the dashboard users can create new projects or collaborative documents, choose from various starter templates, or import local code for editing.

Code Editor

After creating a project, the editor page displays a file explorer on the left (similar to VSCode) and a console at the bottom where npm or pnpm commands can be executed, including Node.js commands.

We install dependencies with pnpm dev to launch the project.

File Search

The editor provides a VSCode‑like file search feature.

Split‑Screen Editing

Users can split the editor view to work on multiple files simultaneously.

Theme Switching

Multiple editor themes are available for users to select.

Collaborative Editing

From the dashboard a collaborative document can be created, shared via a link, and edited in real time by multiple participants.

The collaborative editing implementation uses the following tech stack:

Front End y‑monaco: integrates Yjs real‑time collaboration with the Monaco Editor, providing synchronized editing and UI. y‑websocket: Yjs WebSocket adapter for real‑time data sync across clients. yjs: high‑performance CRDT framework supporting real‑time and offline collaboration. perfect‑cursors: smooth cursor movement effects.

Back End y‑websocket: encapsulates collaborative logic on the server side. y‑mongodb‑provider: persists collaborative document data in MongoDB.

Contributors

We thank all contributors to the project.

If you find this project useful or are interested in it, please give it a star ⭐️⭐️⭐️.

We also maintain two other open‑source projects:

Online Code Collaborative Editor

Front‑end scaffolding tool create‑neat