Draftext

Fast & Private In-Browser Text Editor

🔴 Live - Try Now

A modern, lightweight, fully browser-based text editor with robust offline persistence, designed to work directly from your browser without requiring a backend server. Built with React, Vite, Tailwind CSS, and Monaco Editor.

Features

• Local Persistence & Offline First: All files, content, and editor settings are saved to your browser's IndexedDB. Your data naturally survives page refreshes, browser restarts, and accidental tab closures without any backend database.
• Multi-File Workspace: Maintain and edit multiple files concurrently. Switch between files using the built-in sidebar manager. Add, rename, or delete files locally.
• Drag & Drop and Upload Imports: Drag files directly onto the editor screen to load their contents, or use the standard file picker upload utility.
• Revision History: Automatically tracks edits over time locally. View an interactive timeline for any file, and manually restore or clear previous file versions as needed.
• Export & Document Generation: Download your ongoing file directly as a standard .txt file, or generate a .pdf document for reading and distribution.
• Customizable Editor Preferences:
  • Themes: Switch between Light, Dark, or System Preference visually.
  • Typography: Modify font-family, or precisely scale up and down the base font size.
  • Readability: Toggle Word Wrap and line-number visibility.
• Keyboard Shortcuts: Native keystroke support for efficient workflows:
  • Save (Ctrl/Cmd + S)
  • Download As (Ctrl/Cmd + Shift + S)
  • Toggle Sidebar (Ctrl/Cmd + B)
  • Advanced Find and Replace (Ctrl/Cmd + F)
  • Open Revision History (Ctrl/Cmd + Shift + H)
  • Add New File (Alt/Opt + N)
  • Access Command Palette for Monaco (F1)

Technology Stack

• Framework: React 19 + TypeScript
• Build Tool: Vite 6
• Styling: Tailwind CSS v4
• Editor Core: Monaco Editor (@monaco-editor/react)
• State Management: Zustand
• Local Persistence: IndexedDB (idb-keyval)
• Icons: Lucide React
• Document Export: jsPDF
• Package Manager: pnpm

Storage Architecture

This application operates fundamentally zero-backend. The entire datastore runs asynchronously atop idb-keyval wrapped around native IndexedDB. State transitions trigger aggressively debounced background saves, protecting application memory integrity without exhausting client I/O.

Installation & Setup (Local)

1. Clone the repository

   git clone https://github.com/forhadkhan/draftext.git
   cd draftext

2. Install dependencies using pnpm

   pnpm install

3. Start the development server

   pnpm run dev

The application will launch on http://localhost:3000 (or 5173 depending on your Vite configuration).

License

Distributed under the MIT License.