ScriptoriumAI UI - Modern LaTeX Editor

AGPL-Compliant, Clean-Room Implementation

---

Overview

ScriptoriumAI UI is a modern, proprietary LaTeX editor with AI-powered visualization capabilities. It's designed to integrate with Overleaf Community Edition via API while maintaining strict license separation.

🎨 Design Philosophy

Overleaf-Inspired, Not Derived:

• Clean-room implementation (zero Overleaf code)
• Modern React + TypeScript architecture
• Original UI components and styling
• API-only integration with Overleaf

✨ Features

• 📝 LaTeX Editor - Monaco-based with syntax highlighting
• 🎬 Manim Visualization - Inline animation rendering
• 📸 OCR Integration - Image-to-LaTeX extraction
• 🔄 Real-time Preview - Live LaTeX compilation
• 🎨 Modern UI - Dark theme, smooth animations
• 🔗 Overleaf Integration - Optional backend sync

---

Tech Stack

Core

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool (fast HMR)
• TailwindCSS - Styling
• Zustand - State management

Key Libraries

• Monaco Editor - Code editing (VS Code engine)
• Framer Motion - Animations
• TanStack Query - Data fetching
• React Router - Routing
• KaTeX - Math rendering
• Axios - HTTP client

---

Architecture

┌──────────────────────────────────────┐
│  ScriptoriumAI UI (Port 5173)        │
│  • PROPRIETARY                        │
│  • Clean-room implementation          │
│  • No Overleaf code imports           │
└────┬─────────────────────┬───────────┘
     │ HTTP/REST            │ HTTP/REST
     ▼                      ▼
┌─────────────┐    ┌──────────────────┐
│  Overleaf   │    │ ScriptoriumAI    │
│  (Optional) │    │ Server           │
│  AGPL-3.0   │    │ MIT/Proprietary  │
└─────────────┘    └──────────────────┘

Key Compliance Points:

• ✅ No code imports from Overleaf
• ✅ API-only integration
• ✅ Independent deployment
• ✅ Original UI components

---

Project Structure

scriptoriumai-ui/
├── src/
│   ├── pages/
│   │   ├── Dashboard.tsx        # Project dashboard
│   │   ├── Editor.tsx           # Main editor with split panes
│   │   ├── Visualizations.tsx   # Manim gallery
│   │   └── Settings.tsx         # User settings
│   ├── components/
│   │   ├── LaTeXEditor.tsx      # Monaco editor wrapper
│   │   ├── ManimPanel.tsx       # Manim code + preview
│   │   ├── OCRUpload.tsx        # Image OCR upload
│   │   ├── PreviewPanel.tsx     # PDF/LaTeX preview
│   │   └── Toolbar.tsx          # Navigation sidebar
│   ├── services/
│   │   ├── overleaf-client.ts   # ✅ API client (AGPL-safe)
│   │   └── scriptorium-client.ts # ScriptoriumAI API client
│   ├── stores/
│   │   └── editorStore.ts       # Zustand state
│   ├── layouts/
│   │   └── EditorLayout.tsx     # Main layout
│   ├── styles/
│   │   └── global.css           # TailwindCSS + custom
│   └── App.tsx                  # Root component
├── package.json
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.json
└── README.md

---

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm
• ScriptoriumAI Server running (port 3000)
• (Optional) Overleaf CE running (port 3001)

Installation

cd scriptoriumai-ui
npm install

Development

npm run dev
# Opens on http://localhost:5173

Environment Variables

Create .env:

VITE_SCRIPTORIUM_URL=http://localhost:3000
VITE_OVERLEAF_URL=http://localhost:3001

Build

npm run build
# Output: dist/

---

Features Overview

1. LaTeX Editor

Monaco Editor Integration:

• Syntax highlighting for LaTeX
• Auto-completion
• Multi-cursor editing
• Keyboard shortcuts
• Line numbers & minimap

Capabilities:

• Write LaTeX documents
• Real-time preview (math expressions)
• PDF compilation via Overleaf API
• Save to Overleaf projects

2. Manim Panel

Features:

• Python code editor for Manim
• Scene name configuration
• Format selection (PNG/GIF/MP4/WebM/MOV)
• Quality settings (low/med/high)
• Inline preview
• Download rendered animations

Example Workflow:

1. Write Manim code
2. Configure format & quality
3. Click "Render Animation"
4. Preview inline
5. Download artifact

3. OCR Integration

Features:

• Drag & drop image upload
• Support for PNG, JPEG, JPG, WebP
• LaTeX code extraction via pix2tex
• Live LaTeX preview (KaTeX)
• One-click insert into Manim editor

Workflow:

1. Upload equation image
2. OCR extracts LaTeX
3. Preview rendered equation
4. Insert into Manim or copy to clipboard

4. Overleaf Integration

API-Based Integration:

• List projects
• Create/delete projects
• Load documents
• Save changes
• Compile to PDF

Authentication:

• OAuth2 flow (planned)
• Session-based auth
• JWT tokens

---

License Compliance

✅ AGPL-Compliant Design

This codebase is 100% original and maintains strict separation from Overleaf:

Compliance Checklist:

• ✅ No imports from @overleaf/*
• ✅ No Overleaf code copied
• ✅ API-only integration
• ✅ Independent deployment
• ✅ Original UI components
• ✅ Clean-room design process

Integration Method:

• HTTP/REST API calls only
• No code-level dependencies
• Network boundary enforced

See LICENSE_COMPLIANCE.md for details.

---

Development Guidelines

Adding Features

1. No Overleaf Code - Never import from Overleaf repo
2. API Only - All Overleaf interaction via HTTP
3. Original Design - Create components from scratch
4. Document Decisions - Explain why design choices were made

Code Style

npm run lint     # ESLint check
npm run format   # Prettier format
npm run type-check  # TypeScript validation

Testing

npm test         # Vitest

---

Deployment

Docker

FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Docker Compose

scriptorium-ui:
  build: ./scriptoriumai-ui
  ports:
    - "5173:80"
  environment:
    - VITE_SCRIPTORIUM_URL=http://scriptorium-server:3000
    - VITE_OVERLEAF_URL=http://overleaf:80

---

API Integration

Overleaf API Client

import { overleafClient } from '@/services/overleaf-client'

// List projects
const projects = await overleafClient.listProjects()

// Compile LaTeX
const { pdfUrl } = await overleafClient.compileProject(projectId)

ScriptoriumAI API Client

import { scriptoriumClient } from '@/services/scriptorium-client'

// Render Manim
const result = await scriptoriumClient.renderManim({
  code: manimCode,
  sceneName: 'MyScene',
  format: 'mp4',
  quality: 'high'
})

// OCR
const latex = await scriptoriumClient.extractLatexFromImage(imageFile)

---

Performance

Bundle Size (Target)

• Total: < 500 KB (gzipped)
• Initial: < 200 KB
• Vendor: < 150 KB
• Editor: < 100 KB (lazy loaded)

Optimization

• Code splitting by route
• Monaco Editor lazy-loaded
• TailwindCSS purge enabled
• Asset optimization

---

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

---

Contributing

See CONTRIBUTING.md for guidelines.

License Reminder:

• This codebase is PROPRIETARY
• No Overleaf code allowed
• API integration only

---

Support

• Documentation: docs/
• Issues: GitHub Issues
• License Questions: LICENSE_COMPLIANCE.md

---

Version: 2.0.0
Last Updated: October 6, 2025
License: PROPRIETARY
Status: Production Ready