LanguageTool Web

A modern, responsive web frontend for self-hosted LanguageTool servers. Check grammar, spelling, and style in 30+ languages with real-time analysis.

🌐 Live Demo: ltweb.levelxstudios.com
📦 Repository: codeberg.org/LevelXStudios/language-tool-web

LanguageTool Web interface with dark mode and German localization

✨ Features

• ⚡ Real-time checking - Automatic text analysis with debouncing
• 🌍 30+ Languages - Support for major languages with auto-detection
• 🎨 Modern UI - Clean interface with dark/light mode
• 🖊️ Interactive Editor - Click on errors to see suggestions
• 🔄 One-click fixes - Apply corrections instantly
• 📱 Responsive - Works on desktop and mobile
• 🌍 i18n - German and English language support
• ⌨️ Keyboard Shortcuts - Ctrl+Enter to check, Ctrl+Shift+C to clear, Ctrl+Shift+D for theme
• 📊 Text Statistics - Characters, words, sentences, reading time
• 📖 Personal Dictionary - Add words to ignore list
• 📁 File Import - Drag & drop or open .txt and .md files (5MB limit)
• 💾 Auto-Save - Drafts automatically saved and restored (encrypted)
• 📤 Export - Download as .txt or .md with annotations
• 🔔 Toast Notifications - User-friendly feedback
• 📴 PWA Support - Works offline, installable on mobile/desktop
• 🔒 Security - CSP, HSTS, CORS protection, input validation

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• A running LanguageTool server (see below)

Installation

# Clone the repository
git clone https://codeberg.org/LevelXStudios/language-tool-web.git
cd language-tool-web

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

Build for Production

npm run build

The static files will be in the dist/ directory, ready for deployment.

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + Enter	Check text
Ctrl/Cmd + Shift + C	Clear text
Ctrl/Cmd + Shift + D	Toggle dark mode

⚙️ Configuration

Connecting to LanguageTool Server

By default, the frontend connects to the LanguageTool server via /api path (nginx proxy).

To set up your own server, see the Self-Hosting Guide.

Starting Your Own LanguageTool Server

# Download LanguageTool
wget https://languagetool.org/download/LanguageTool-stable.zip
unzip LanguageTool-stable.zip
cd LanguageTool-*

# Start HTTP server
java -cp languagetool-server.jar org.languagetool.server.HTTPServer \
  --port 8081 \
  --allow-origin "*" \
  --public

For production, use a reverse proxy (nginx/Apache) with SSL.

📚 Documentation

• Debian 13 Self-Hosting Guide - Complete step-by-step setup
• Docker Guide - Using Docker Compose
• Technical Documentation - Architecture and API details

Quick nginx Setup

server {
    listen 443 ssl http2;
    server_name languagetool.example.com;
    
    root /var/www/languagetool-web/dist;
    index index.html;
    
    # API proxy to LanguageTool
    location /api/ {
        proxy_pass http://127.0.0.1:8081/;
        proxy_set_header Host $host;
    }
    
    # SPA fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

🛠️ Tech Stack

• Framework: React 19 + TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS 4
• i18n: Custom React Context
• Icons: SVG
• Notifications: Sonner
• PWA: Service Worker for offline support

📡 LanguageTool API

This frontend uses the LanguageTool HTTP API:

POST /api/v2/check
Content-Type: application/x-www-form-urlencoded

text=Your+text+here&language=en-US

See LanguageTool API docs for more.

📁 Project Structure

src/
├── api/
│   └── client.ts          # LanguageTool API client
├── components/
│   ├── Header.tsx         # App header with settings
│   ├── TextEditor.tsx     # Main text editor with highlights
│   ├── ErrorList.tsx      # Suggestions sidebar
│   ├── SuggestionCard.tsx # Individual suggestion
│   ├── LanguageSelector.tsx
│   ├── StatsPanel.tsx     # Text statistics
│   ├── ExportButtons.tsx  # Export functionality
│   └── DictionaryManager.tsx
├── hooks/
│   ├── useKeyboardShortcuts.ts
│   ├── useAutoSave.ts
│   ├── useDictionary.ts
│   └── useServiceWorker.ts
├── i18n/
│   ├── I18nContext.tsx    # Internationalization
│   └── translations.ts    # DE/EN translations
├── types/
│   └── api.ts             # TypeScript types
├── App.tsx                # Main app component
├── main.tsx               # Entry point
└── index.css              # Tailwind styles

📝 Changelog

See CHANGELOG.md for version history.

📄 License

MIT License - See LICENSE for details.

🙏 Credits

• LanguageTool - Open source language checker
• Codeberg - Code hosting

---

Made with ❤️ by LevelX Studios