Skip to content

EvanLuo42/ClaTex

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ClaTeX

AI-Powered Collaborative LaTeX Editor

Overview

ClaTeX is an online collaborative LaTeX editor that combines the power of Monaco Editor, real-time collaboration via Yjs, LaTeX Language Server Protocol (texlab), and Claude AI assistance — all in a modern web interface.

Editor Screenshot

Features

Real-time Collaborative Editing

Multiple users can edit the same LaTeX document simultaneously with live cursors and conflict-free synchronization powered by Yjs and y-sweet.

AI-Powered Assistance

Integrated Claude AI helps with LaTeX writing, debugging compilation errors, and suggesting improvements — directly within the editor.

Monaco Editor with LaTeX LSP

Full-featured code editing experience with syntax highlighting, autocompletion, diagnostics, and go-to-definition powered by texlab LSP.

Editor Features

Live PDF Preview

Compile and preview your LaTeX documents in real-time. Supports both local compilation (via BuildAgent) and server-side compilation.

PDF Preview

Project Management

Organize your LaTeX projects with a file tree, supporting nested folders, multiple file types (.tex, .bib, .sty), and binary assets (images, PDFs).

Dashboard

Architecture

┌─────────────────────────────────────────────────────┐
│                    Frontend                          │
│          Next.js 16 + Monaco + Yjs                  │
│                                                      │
│  ┌──────────┐  ┌──────────┐  ┌───────────────────┐  │
│  │  Editor   │  │   PDF    │  │   File Tree /     │  │
│  │ (Monaco)  │  │ Preview  │  │   Dashboard       │  │
│  └────┬─────┘  └────┬─────┘  └───────────────────┘  │
│       │              │                                │
└───────┼──────────────┼────────────────────────────────┘
        │              │
   ┌────┴────┐    ┌────┴─────┐     ┌──────────────┐
   │ y-sweet │    │  Build   │     │   ClaTeX     │
   │ (Yjs    │    │  Agent   │     │   API        │
   │  CRDT)  │    │ (local)  │     │  (ASP.NET)   │
   └─────────┘    └──────────┘     └──┬───┬───┬───┘
                                      │   │   │
                              ┌───────┘   │   └───────┐
                              │           │           │
                        ┌─────┴───┐ ┌─────┴───┐ ┌────┴─────┐
                        │ Claude  │ │ texlab  │ │ Supabase │
                        │   AI    │ │  LSP    │ │ (DB+Auth)│
                        └─────────┘ └─────────┘ └──────────┘

Tech Stack

Layer Technology
Frontend Next.js 16, React 19, TypeScript, Tailwind CSS
Editor Monaco Editor, y-monaco
Collaboration Yjs, y-sweet
Backend ASP.NET Core (.NET 10), C#
AI Claude API (Anthropic C# SDK)
LSP texlab (WebSocket bridge)
Auth & DB Supabase (PostgreSQL + Auth)
PDF react-pdf, LaTeX compiler (local/server)

Getting Started

Prerequisites

  • Node.js 20+
  • .NET 10 SDK
  • A LaTeX distribution (e.g., TeX Live, MiKTeX)
  • Supabase project (or local Supabase)

1. Clone the repository

git clone https://github.com/your-username/clatex.git
cd clatex

2. Set up environment variables

Frontend — create src/web/.env.local:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
Y_SWEET_CONNECTION_STRING=ys://localhost:8080

Backend — configure src/server/ClaTeX.Api/appsettings.json or use environment variables:

ANTHROPIC_API_KEY=your_claude_api_key
Supabase__Url=your_supabase_url
Supabase__Key=your_supabase_key

3. Set up the database

Run the migration against your Supabase project:

supabase db push

4. Start the services

# Terminal 1 — y-sweet collaboration server
npx y-sweet@latest serve

# Terminal 2 — Frontend
cd src/web && npm install && npm run dev

# Terminal 3 — Backend API
cd src/server && dotnet run --project ClaTeX.Api

# Terminal 4 — Local build agent (optional, for local LaTeX compilation)
cd src/server && dotnet run --project ClaTeX.BuildAgent

The app will be available at http://localhost:3000.

Project Structure

clatex/
├── src/
│   ├── web/                    # Next.js 16 frontend
│   │   ├── app/                # App Router pages
│   │   │   ├── (auth)/         # Login page
│   │   │   ├── (dashboard)/    # Project list & navigation
│   │   │   └── (editor)/       # LaTeX editor page
│   │   ├── components/         # React components
│   │   │   ├── editor/         # Editor, PDF preview, file tree, build log
│   │   │   └── ui/             # shadcn/ui components
│   │   └── lib/                # Utilities, Supabase client
│   └── server/                 # C# backend
│       ├── ClaTeX.Api/         # ASP.NET Core Web API
│       ├── ClaTeX.Core/        # Shared models & interfaces
│       ├── ClaTeX.AI/          # Claude AI integration
│       ├── ClaTeX.TexLab/      # texlab LSP WebSocket bridge
│       ├── ClaTeX.BuildAgent/  # Local LaTeX build agent
│       └── ClaTeX.BuildServer/ # Server-side LaTeX build service
└── supabase/
    └── migrations/             # Database migrations

License

This project is licensed under the MIT License.

About

AI-powered collaborative LaTeX editor with real-time co-editing, Claude AI assistance, and texlab LSP — built with Next.js, Monaco Editor, Yjs, and ASP.NET Core.

Topics

Resources

License

Stars

Watchers

Forks

Contributors