NexEditor

High-Performance, Real-Time Collaborative Code Editor

Built with CRDTs, WebSockets, and a modern authentication layer.

---

Screenshots

Authentication Page

Room Dashboard

Collaborative Editor

---

Unique Architectural Highlights

This editor is engineered with specific distributed systems and UI performance optimizations:

1. ID-Anchored Sequence CRDTs

NexEditor uses Yjs CRDTs (Y.Text). Every character inserted is assigned a permanently unique identifier. This completely eliminates race conditions when multiple users type in the exact same location simultaneously.

2. Logical Deletions (Tombstoning)

Deleted nodes are marked internally as isDeleted: true to preserve the logical tree structure for network synchronization, while the editor binding ensures the deleted content is immediately removed from the view.

3. High-Performance CodeMirror 6 Native Binding

Mounted natively using CodeMirror 6 and @codemirror/theme-one-dark.

• No Virtual DOM overhead: Bypassing React/Vue to eliminate rendering bottlenecks.
• Direct transaction bridging: The y-codemirror.next binding intercepts native CodeMirror transactions and converts them into CRDT updates with near-zero latency.

4. Debouncing & Event Aggregation

Built-in client-side batching and debouncing layer:

• Typing bursts are throttled (50ms debounce window).
• Multiple keystrokes are merged into a single binary CRDT payload.

5. Reconnection Buffering

If connectivity drops, local edits continue to register. Outgoing updates accumulate in a local buffer, which flushes gracefully upon reconnection to prevent update storms.

6. "Dumb Pipe" Server Philosophy

The backend acts purely as a high-speed stateless Pub/Sub message relay. It maintains room mappings and blindly broadcasts binary payloads between peers in the same room.

---

Technology Stack

• Frontend: Vanilla JavaScript (ES6+), CodeMirror 6, Yjs, y-codemirror.next, socket.io-client.
• Backend: Node.js, Express, socket.io.
• Authentication: Passport.js (Google OAuth), JWT, bcrypt.
• Database & ORM: SQLite (dev.db), Prisma, @prisma/adapter-better-sqlite3.
• State Persistence: 100% Ephemeral for CRDT state (in-memory). Persistent SQLite storage for User Accounts.

---

Authentication & Security

NexEditor now features a robust, fully-integrated authentication system backed by SQLite and Prisma ORM, alongside a stunning new Particle Canvas UI.

• Google OAuth Integration: Seamless, one-click login using passport-google-oauth20.
• Email & Password: Secure local authentication utilizing bcrypt for password hashing.
• Anonymous Guest Mode: Instant access with auto-generated guest profiles.
• JWT Sessions: Stateless, secure session management using JSON Web Tokens stored in HTTP-only cookies.
• Beautiful UI: A brand new, interactive particle canvas landing page for authentication.

---

Project Structure

NexEditor/
├── prisma/
│   └── schema.prisma    # Database schema for Users
├── server/
│   ├── auth.js          # Passport, Google OAuth, and JWT routing
│   └── index.js         # Stateless Express + Socket.io relay server
├── client/
│   ├── index.html       # Landing page (Particle Canvas) & Editor UI
│   ├── style.css        # Premium dark mode styles
│   ├── crdt.js          # Shared Y.Doc, Y.Text type, and Yjs awareness
│   ├── network.js       # WebSockets connection and reconnect buffer
│   ├── script.js        # Auth UI logic & Particle animation engine
│   └── ui.js            # CodeMirror initialization and routing
├── dev.db               # SQLite Database
└── .env                 # Environment variables (Google Keys, JWT Secret)

---

Getting Started

Prerequisites

• Node.js (v18+)
• npm

Installation & Run

1. Clone the repository:

   git clone https://github.com/xyron24/NexEditor.git
   cd NexEditor

2. Install dependencies:

   npm install

3. Environment Setup: Create a .env file in the root directory and add your Google OAuth credentials and JWT secret.

4. Initialize Database (if not automatically done via postinstall):

   npx prisma generate
   npx prisma db push

5. Start the development server:

   npm run dev

6. Open your browser: Navigate to http://localhost:3000.

Inviting Collaborators

• Local Network: Find your machine's IP (e.g., 192.168.x.x). Peers can join via http://<your-local-ip>:3000/#<room-id>.
• Remote Collaboration: Expose your local port using a tool like ngrok:

  ngrok http 3000