Source

DocForgio | Document Composition Studio

react typescript vite tailwindcss zustand codemirror

Cover Image

DocForgio | Document Composition Studio


Note

A minimalist, browser-native document studio for creating beautiful documents with a visual block editor and live preview.

Project Overview

Introduction

DocForgio is a free, open-source document composition studio that runs entirely in your browser. Built with React 19, TypeScript, Vite, and Tailwind CSS v4, it provides a powerful yet simple interface for creating documents using a visual block editor paired with live-rendered preview.

This project was created to provide a lightweight, privacy-focused alternative to cloud-based document editors, leveraging modern browser capabilities for local data storage and processing.

✨ Key Features

Browser-Native

  • Zero Backend - Runs completely in your browser, no server required
  • Privacy First - Your data never leaves your device
  • No Registration - Start creating documents immediately

Dual-Mode Editor

  • Visual Block Editor - No-code drag-and-drop interface for document composition
  • Live Preview - Real-time rendering of your document as you edit
  • Code Mode - Full HTML/CSS editor with Tailwind v4 support for advanced users

Local Storage

  • IndexedDB Storage - Documents stored locally in your browser
  • Data Portability - Export and import your documents
  • Persistent Sessions - Your work is automatically saved

🛠️ Tech Stack

DocForgio is built with a modern, lightweight stack:

Frontend

  • React 19 - Latest React with modern features
  • TypeScript - Type-safe development with full IDE support
  • Vite 8 - Lightning-fast HMR and optimized builds
  • TailwindCSS v4 - Utility-first styling with latest features

Core Libraries

  • Zustand - Lightweight state management
  • CodeMirror 6 - Advanced code editor for Code Mode
  • dnd-kit - Modern drag-and-drop for block editor
  • React Router v7 - Client-side routing
  • idb - IndexedDB wrapper for data persistence

Development

  • Vitest - Fast unit testing
  • Playwright - End-to-end testing

🏗️ Architecture

Project Structure

docforgio/
├── src/
│   ├── components/     # React components
│   ├── hooks/          # Custom React hooks
│   ├── stores/         # Zustand state stores
│   ├── utils/          # Utility functions
│   └── App.tsx         # Main application
├── public/             # Static assets
└── index.html          # Entry HTML

Architecture

flowchart LR
    A[UI] --> B[Zustand]
    B --> C[IndexedDB]
    B --> D[Editor]
    D --> E[Preview]

🚀 Live Demo

Quick Start

  1. Visit the live demo at docforgio.netlify.app
  2. Click “New Document” to start creating
  3. Use the visual block editor or switch to Code Mode
  4. Your documents are automatically saved locally

🎯 What Makes This Project Unique

  1. Browser-First Architecture - Leverages modern browser APIs for a native-like experience without installation

  2. Privacy-Centric - All data stays on your device, no cloud sync, no tracking

  3. Dual-Mode Editing - Seamlessly switch between visual no-code editor and raw HTML/CSS code editor

  4. Modern Stack - Built with cutting-edge versions: React 19, Vite 8, Tailwind v4

  5. Lightweight State - Zustand provides minimal, focused state management without boilerplate

  6. Open Source - Free to use, modify, and deploy for personal or commercial projects

🔧 Local Development

# Clone the repository
git clone https://github.com/mrmeaow/docforgio.git
cd docforgio

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run tests
pnpm test

📝 Usage Examples

Visual Block Editor

Simply drag and drop blocks to compose your document:

  • Text Blocks - Headings, paragraphs, lists
  • Media Blocks - Images, videos, embeds
  • Code Blocks - Syntax-highlighted code snippets
  • Custom Blocks - HTML/CSS components

Code Mode

<div class="prose prose-slate">
  <h1>My Document</h1>
  <p class="lead">A beautiful document styled with Tailwind CSS</p>
  <button class="btn btn-primary">Click Me</button>
</div>

🗺️ Roadmap

DocForgio is in early development. Planned features include:

  • Document templates and themes
  • Export to PDF, Markdown, and HTML
  • Custom block types and components
  • Keyboard shortcuts and commands palette
  • Plugin system for extensibility

🤝 Author & Contact

📄 License

MIT License - See LICENSE for details.

🙏 Acknowledgments

  • Zustand - Bear necessities for state management
  • CodeMirror 6 - Advanced code editor component
  • dnd-kit - Modern drag-and-drop library
  • Tailwind CSS - Utility-first CSS framework
  • Vite - Next generation frontend tooling