NexEditor

KO | EN

gitlite — search

#ai #golang #machine-learning #rust #deep-learning #java #nodejs #kubernetes #awesome-list #vue #pytorch #security #ios #open-source

(★ 18)

A lightweight, "thick-client" collaborative IDE utilizing WebSocket architecture and sequence CRDTs to achieve zero-framework real-time sync.

NexEditor 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <h1>NexEditor</h1>
  <p><strong>High-Performance, Real-Time Collaborative Code Editor</strong></p>
  <p>Built with CRDTs, WebSockets, and a modern authentication layer.</p>
  <p>
    <img src="https://img.shields.io/badge/Status-Active-success.svg" alt="Status" />
    <img src="https://img.shields.io/badge/JavaScript-F7DF1E?style=flat&logo=javascript&logoColor=black" alt="JavaScript" />
    <img src="https://img.shields.io/badge/Socket.io-010101?style=flat&logo=socket.io&logoColor=white" alt="Socket.io" />
    <img src="https://img.shields.io/badge/Prisma-2D3748?style=flat&logo=prisma&logoColor=white" alt="Prisma" />
  </p>
</div>

---

## Screenshots

**Authentication Page**
![Authentication Page](https://raw.githubusercontent.com/xyron24/NexEditor/main/assets/loginpage.png)

**Room Dashboard**
![Room Dashboard](https://raw.githubusercontent.com/xyron24/NexEditor/main/assets/mainpage.png)

**Collaborative Editor**
![Collaborative Editor](https://raw.githubusercontent.com/xyron24/NexEditor/main/assets/nexeditorpage.png)

---

## Unique Architectural Highlights

![NexEditor System Architecture](https://raw.githubusercontent.com/xyron24/NexEditor/main/assets/NexEditorArchitecture.png)

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

```text
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:**
   ```bash
   git clone https://github.com/xyron24/NexEditor.git
   cd NexEditor
   ```

2. **Install dependencies:**
   ```bash
   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):**
   ```bash
   npx prisma generate
   npx prisma db push
   ```

5. **Start the development server:**
   ```bash
   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**:
  ```bash
  ngrok http 3000
  ```

NexEditor

NexEditor 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

NexEditor

NexEditor 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README