TeXlyre

A local-first real-time LaTeX and Typst collaboration platform with offline editing capabilities. Built with React, TypeScript, and Yjs for collaborative document editing.

Features

Real-time Collaboration

TeXlyre enables multi-user editing with live cursors and selections visible across all connected clients. The platform uses Yjs CRDTs for conflict-free synchronization, ensuring that changes from multiple users are automatically merged without conflicts. Communication happens through WebRTC peer-to-peer connections, providing low-latency collaboration without requiring a central server. An integrated chat system allows collaborators to communicate directly within the editing environment.

<p align="center"> <img src="showcase/collab_cursor_zoomed.png" alt="Multiple users editing simultaneously with different colored cursors" > </p>

TeXlyre provides comment and chat features for real-time exchanges, reviews, and discussions among collaborators.

<p align="center"> <img src="showcase/chat_zoomed.png" alt="Collaborators using the chat panel to discuss progress"> </p>

TeXlyre also includes an embedded diagram editor powered by Draw.io, enabling collaborators to create and edit diagrams in real-time directly within a project.

<p align="center"> <img src="showcase/collab_cursor_drawio.png" alt="Collaborators editing a draw.io diagram simultaneously within a TeXlyre project"> </p>

LaTeX Compilation

The platform integrates SwiftLaTeX WASM engines to provide in-browser LaTeX compilation without server dependencies. Currently supports pdfTeX and XeTeX engines for document processing. TeXlyre supports real-time syntax highlighting and error detection, with an integrated PDF viewer that offers zoom, navigation, and side-by-side editing capabilities.

<p align="center"> <img src="showcase/error_parser_zoomed_latex.png" alt="LaTeX compilation in progress with error panel and PDF output" width="600"> </p>

Typst Compilation

The platform integrates typst.ts to provide in-browser Typst compilation without server dependencies. Currently supports PDF, SVG, and canvas compilation, however, SVG and HTML compilation are experimental, and are not guaranteed to work as expected at the time being.

<p align="center"> <img src="showcase/error_parser_zoomed_typst.png" alt="Typst compilation in progress" width="600"> </p>

Local-first Architecture

TeXlyre prioritizes data ownership and offline capability. All documents are stored locally using IndexedDB, enabling full offline editing with automatic synchronization when connectivity returns. The File System Access API provides direct folder synchronization for external backup solutions, while project export and import features ensure complete data portability across devices and installations.

File Management and Synchronization

The platform includes a file explorer supporting drag-and-drop operations for various file types including LaTeX sources, Typst sources, images, and data files. Document linking creates connections between collaborative documents and static files, enabling seamless editing workflows. FilePizza integration provides secure peer-to-peer file sharing between collaborators, allowing large file transfers without intermediary servers.

Editor Tools

TeXlyre includes editor-level tools designed to improve mathematical authoring and document quality. These tools operate entirely in the browser, work offline, and remain synchronized across collaborators in real time.

TeXlyre provides built-in document statistics to help authors track progress while writing. Word counts are computed using TeXcount for LaTeX documents and typst-wordometer for Typst documents, delivering accurate statistics that reflect the structure of each language rather than raw text length.

<p align="center"> <img src="showcase/statistics_modal.svg" alt="Statistics modal showing word counts, with arrow pointing to the statistics button"> </p>

To maintain clean and readable source files, TeXlyre includes formatting tools for both LaTeX and Typst. LaTeX documents are formatted using tex-fmt, while Typst documents use typstyle, applying consistent indentation and line separation without altering document semantics.

<p align="center"> <img src="showcase/format_latex_before_after.svg" alt="Source code before and after formatting, with arrow pointing to the formatting button"> </p>

Mathematical expressions can be edited interactively using inline previews powered by MathLive. When hovering over or placing the cursor inside a math expression, TeXlyre renders the formula directly and allows it to be edited using the MathLive virtual keyboard, making equations easier to create and modify.

<p align="center"> <img src="showcase/mathlive_hover_edit_before_after.svg" alt="Inline math preview on hover, with arrow pointing to the edit button that opens the MathLive editor"> </p>

Language Server Protocol (LSP)

TeXlyre offers limited LSP support over WebSocket. The CodeMirror editor acts as a client for LSP servers deployed locally. As an example, TeXlyre integrates with a locally-run Harper LS grammar and spell checker (see the Harper LS recipe for instructions on how to deploy and integrate the server with TeXlyre).

<p align="center"> <img src="showcase/harper_ls_zoomed.png" alt="TeXlyre LSP client receiving grammar and spell-checking actions over WebSocket from the Harper LS server"> </p>

Quick Start

For detailed installation instructions, advanced configuration, and development workflows, see the installation documentation.

For configuring TeXlyre's theme, properties, and supported plugins, see the configuration documentation.

Installation requires Node.js 20+ and a modern browser with File System Access API support:

git clone https://github.com/TeXlyre/texlyre.git
cd texlyre
npm install
npm run start

Navigate to http://localhost:4173 to access the application. Create a new project to begin editing, or open an existing project by sharing its URL with collaborators. The URL format http://localhost:4173/#yjs:abc123def456 enables instant collaboration access.

Moreover, you can start your project from a template and share the link with your collaborators.

<p align="center"> <img src="showcase/templates_zoomed.png" alt="Getting started with a template"> </p>

Architecture

TeXlyre's architecture emphasizes local-first principles while enabling real-time collaboration. The React frontend communicates with Yjs documents stored in IndexedDB, providing offline-first functionality. WebRTC establishes direct peer connections for real-time synchronization, while SwiftLaTeX WASM engines and typst.ts handle LaTeX and Typst compilation entirely in the browser.

The plugin system allows extensibility through custom viewers, renderers, and backup providers. Core plugins handle PDF rendering, Bibliography cleaning, LaTeX and Typst log visualization, an embedded Draw.io diagram editor with collaborative support, Zotero and OpenAlex reference search, import, and update panel, file system backups, and repository backups to/from GitHub, GitLab, Gitea, and Codeberg (Forgejo). Theme plugins also provide customizable layouts and visual styles.

<p align="center"> <img src="showcase/zotero_bib_panel.png" alt="Bib Editor plugin integrated into the TeXlyre app along with Zotero integration panel"> </p>

File Synchronization

Local File System

The File System Access API enables direct synchronization with local folders, supporting cross-device workflows through cloud storage providers like Dropbox or Google Drive. Users can connect TeXlyre projects to existing file system structures, maintaining compatibility with traditional LaTeX and Typst workflows.

Peer-to-peer Sharing

FilePizza integration facilitates secure file sharing between collaborators over WebRTC. La