Hassan Ali
AuraLaTeX

AuraLaTeX
New

Completed May 2026

React 19TypeScriptViteCloudflareTailwind CSS 4LaTeX
View Code Live Website

Overview

AuraLaTeX is a high-performance web-based LaTeX editor designed for modern researchers, students, and professionals. It provides a clean, distraction-free environment for document creation, eliminating the need for complex local LaTeX installations. Built with a privacy-first mindset, it requires no sign-up or accounts to start writing.

Features

  • Instant Compilation — Process complex LaTeX documents in milliseconds via Edge-native API proxying.
  • Side-by-Side Preview — Synchronized live PDF viewer with adjustable split-pane editor interface.
  • Template Library — One-click access to professional templates for academic articles, reports, and resumes.
  • Edge-Native Architecture — Powered by Cloudflare Pages Functions for ultra-low latency compilation.
  • Responsive Workspace — Fluid layout optimization for desktop, tablet, and mobile devices.
  • Modern Theming — Fully integrated Dark and Light modes with system-preference synchronization.

Technologies Used

  • Frontend: React 19, TypeScript, Vite, Tailwind CSS 4
  • Animations: Framer Motion 12
  • Icons: Lucide React
  • Hosting & Backend: Cloudflare Pages & Cloudflare Pages Functions (Edge Runtime)
  • Compilation Engine: YtoTech LaTeX API Integration

How It Works

  1. Integrated Editor — Users write LaTeX code in a browser-native editor optimized for performance.
  2. Edge Proxy — Compilation requests are proxied through Cloudflare Pages Functions to securely interact with the YtoTech API while keeping client-side logic clean.
  3. Streamlined Preview — The compiled PDF is delivered as a Base64 string and rendered into a Blob URL for instant, high-resolution viewing.
  4. Export & Portability — Documents can be downloaded as standard .tex source files or professional .pdf documents with a single click.

Challenges & Learnings

The primary challenge was implementing a smooth, low-latency live preview experience using a remote compilation API. I leveraged Framer Motion for graceful transitions and optimized state management in React 19 to ensure the UI remains responsive even during heavy compilation tasks.

Links & Resources

Built with ❤️ by Hassan Ali