online edit web

Since July, we have refactored this online code editor and completed a basic version within one month. Two months later we have completed the core function of the editor: collaboration.

Before starting, let’s post the relevant address first. If it is helpful to you, welcome to star:

1. Front-end warehouse address

2. Front-end preview address (can directly run React project)

3. Front-end preview address (can realize collaboration)

4. Backend warehouse address

Because this project uses WebContainer, the deployment must be used under HTTPS. However, Vercel provides HTTPS for deployment, but our backend service does not have HTTPS. If deployed with Vercel, we cannot access our backend service. So if you want to experience the best effect, my suggestion is to directly pull the code of this repository and start it directly.

Technical selection

To write an open source project, the most important thing is definitely the most important one. The front-end uses NextJs, and the back-end uses NestJs.

First of all, one of the points I prefer NextJs is that its file routing system is simple and intuitive, and it can automatically generate routes according to the folder structure, reducing the workload of our manual configuration and is used out of the box.

Next.js integrates React and Node.js environments, developers can quickly get started with familiar React syntax without configuring complex build tools. In projects that rely less on the backend, you can use NextJs to implement full-stack projects without the need for additional backends to write.

Secondly, it is more remote-friendly. Among the people I have come into contact with, some friends tend to find a remote job. In the remote positions I have interviewed and worked on, the basic technology stack used is NextJS. This is first of all, thanks to its server-side rendering function and is more SEO-friendly. Another point is that the ecology is also very complete, such as tailwindcss, shadcn, zustand, swr, etc. It also provides vercel for free deployment, and free databases such as supabase.

As for why you choose NestJs, you probably don't need to explain it.

Functional implementation

Next, I will share some of its functions with you so that you can have a comprehensive understanding of this project:

front page

On the home page, it’s just a meteor animation, plus the following content, and the overall coordination is still pretty good.

control Panel

After clicking on the control panel, you will enter the dashboard. If you are not logged in, you will jump to the login page:

There is no need to register here, you can directly obtain the verification code. If you don’t have an account, you will directly register a new one.

Enter the control panel, where we can choose to create a project or create a collaborative document:

There are many different frameworks for initialization here. In addition to using the original template, we can also directly import local code for development and editing:

There is a pretty avatar here, I like it very much:

Code Edit

After clicking to create, we will enter such a page. First, there is a file bar on the left, the overall layout is the same as vscode, and the following is the console. Here we can directly execute some commands of npm and pnpm, as well as some NodeJs commands.

Now we execute pnpm for this project to install the relevant dependency packages, and execute pnpm dev to start these projects:

File Search

In addition to the file tree, we also provide similar functions to Vscode, file search:

You can also write on split screen:

Switch editor theme

Here we can also switch the editor's theme, and here we provide multiple themes to choose from:

Co-edited

This time we are going to go back to our core function: collaborative editing. First, we need to create a document on the dashboard control panel:

After the creation is completed, you will see such an effect:

Click to share the document and share the document with other friends to edit it together:

The final collaborative editing effect:

How is collaboration implemented?

Regarding the collaborative editing, let’s share the technology stack involved in the front and back ends.

1. front end

   1. y-monaco: Integrates Yjs' real-time collaboration function with Monaco Editor, providing the default collaborative editing data synchronization and collaborative ui effect.

   2. y-websocket: Yjs's WebSocket adapter provides real-time data synchronization function, allowing multiple clients to collaborate on editing through WebSocket.

   3. yjs: A high-performance CRDT framework that supports real-time collaboration and offline editing, and automatically merge changes in sharing types to handle conflicts, suitable for scenarios with large documents and unlimited users.

   4. perfect-cursors: Provides smooth mouse movement.

2. rear end

   1. y-websocket: yjs encapsulates collaborative logic

   2. y-mongodb-provider: persistent storage

Contributors

Thank you to everyone who contributed to this project!

If this project is helpful to you or is interested in this project, welcome to Star️️️

Finally, let’s mention these two open source projects, both of which are open source projects we are currently maintaining:

• Online code collaborative editor

• Front end scaffolding create-neat

If you want to participate in development or want to join the group to study, you can add me WeChat yunmz777 . There will be many needs in the future. After this project is completed, there will be many new and interesting open source projects waiting for you.