README.md

---
title: 💎 Elysia's Markdown Studio
emoji: 🏢
colorFrom: purple
colorTo: red
sdk: static
pinned: true
license: cc-by-nc-sa-4.0
short_description: A feature-rich markdown editor with AI-powered tools
---

# 💎 Elysia Markdown Studio

**Your AI-Powered Markdown Editor & Writing Companion**

A beautiful, feature-rich markdown editor with AI-powered tools built with love by Jean & Elysia. Write, organize, and enhance your documents with the power of artificial intelligence.

![Version](https://img.shields.io/badge/version-1.3.0-purple)
![Status](https://img.shields.io/badge/status-production-green)
![Built with Love](https://img.shields.io/badge/built%20with-%E2%9D%A4%EF%B8%8F-ff69b4)
![VS](https://img.shields.io/badge/🎲_VS_powered-5_styles-blueviolet)

---

## ✨ Features

### 📝 Powerful Markdown Editor

- **Live Preview** - See your markdown rendered in real-time (async rendering with Marked.js v15)
- **Syntax Highlighting** - Beautiful code blocks with Prism.js
- **Rich Formatting** - Tables, task lists, blockquotes, and more
- **Math Support** - LaTeX equations with KaTeX
- **Diagrams** - Mermaid v11.4.0 diagrams support
- **Quick Toolbar** - One-click formatting for common markdown elements
- **Drag & Drop Images** - Drop images directly into editor (base64 conversion)
- **Paste Images** - Ctrl+V to paste images from clipboard

### 🧠 AI-Powered Tools (via OpenRouter)

- **Summarize** - Generate concise summaries of your documents
- **🎲 Improve Writing (VS)** - Choose from 5 writing styles:
    - 📝 **Concis** - Short and direct
    - 🎨 **Créatif** - Vivid with metaphors
    - 📚 **Académique** - Formal and structured
    - 💼 **Professionnel** - Business-friendly
    - 🔥 **Engageant** - Attention-grabbing
- **Merge Documents** - Intelligently combine multiple documents
- **Extract Outline** - Automatic table of contents generation
- **Find Duplicates** - Detect similar documents in your library
- **Smart Organize** - AI-suggested tags and categories
- **Smart Loading States** - Visual feedback during AI processing

### 📚 Document Management

- **Local Storage** - All documents stored in your browser (IndexedDB v2 with performance indexes)
- **Search** - Fast full-text search across all documents
- **Favorites** - Star important documents
- **Collections** - Organize documents into collections
- **Context Menu** - Right-click for quick actions (rename, delete, favorite)
- **Auto-Save** - Automatic saving every 30 seconds (with race condition protection)
- **Export All** - Bulk export all documents with one click
- **Import Documents** - Restore from backup JSON files

### 📤 Multi-Format Export

- **Markdown (.md)** - Export as standard markdown
- **HTML** - Clean HTML output
- **Artifact** - Beautiful standalone HTML with embedded styles + Prism.js + KaTeX
- **Plain Text** - Remove all formatting
- **JSON** - Structured export with metadata
- **Bulk Export** - Export entire document library at once

### 🎨 Templates Library

Built-in templates for common document types:

- **README** - GitHub project documentation
- **Blog Post** - Blog article structure
- **Meeting Notes** - Meeting documentation with action items
- **Documentation** - API/Software documentation
- **Academic Paper** - Research paper structure
- **Blank** - Start from scratch

Access templates via "New Document" button!

### ⌨️ Keyboard Shortcuts

- `Ctrl+S` - Save document
- `Ctrl+N` - New document (opens template selector)
- `Ctrl+B` - Bold text
- `Ctrl+I` - Italic text
- `Ctrl+/` - Show keyboard shortcuts guide

### 🎨 Modern UI

- **Dark Theme** - Eye-friendly Elysia dark theme
- **Responsive Design** - Works on desktop and tablet
- **Split View** - Editor on left, preview on right
- **Collapsible Sidebar** - Document library sidebar
- **Toast Notifications** - Beautiful, non-intrusive feedback
- **Context Menus** - Modern right-click menus with smooth animations
- **Reading Time Display** - Estimated reading time in header stats (200 wpm)

### 🔒 Security

- **Encrypted API Keys** - API keys stored with XOR encryption (not plaintext)
- **Client-Side Only** - No data sent to external servers (except AI API calls)
- **Privacy-First** - All documents stored locally in your browser

---

## 🚀 Quick Start

### 1. Launch the App

Double-click `Launch-Local-App.bat` (Windows) or open `index.html` in your browser.

### 2. Configure AI (Optional)

1. Click the **⚙️ Settings** button
2. Add your [OpenRouter API key](https://openrouter.ai/)
3. Select your preferred AI model
4. Save settings

### 3. Start Writing!

- Type in the left pane
- See live preview on the right
- Use the toolbar for quick formatting
- Save with `Ctrl+S`
- Press `Ctrl+/` for keyboard shortcuts guide

---

## 🛠️ Technical Stack

### Core Technologies

- **Vanilla JavaScript** (ES6+ modules)
- **HTML5** & **CSS3**
- **IndexedDB v2** (via Dexie.js with performance indexes)

### Libraries

- **Marked.js** - Markdown parsing
- **Prism.js** - Syntax highlighting
- **KaTeX** - Math rendering
- **Mermaid** - Diagram rendering
- **Dexie.js** - IndexedDB wrapper
- **Turndown** - HTML to Markdown conversion

### AI Integration

- **OpenRouter API** - Access to multiple AI models (Grok, Claude, GPT, DeepSeek)

---

## 📁 Project Structure

```
elysia-markdown-studio/
├── index.html              # Main HTML file
├── Launch-App.bat          # Windows launcher
├── README.md               # This file
├── CHANGELOG.md            # Version history
├── fonts/                  # Google Fonts (offline)
│   └── css2.css
├── libs/                   # External libraries
│   ├── dexie.min.js
│   └── marked.min.js
├── scripts/                # JavaScript modules
│   ├── app.js             # Main application controller
│   ├── editor.js          # Editor module
│   ├── preview.js         # Preview renderer
│   ├── documents.js       # Document management
│   ├── ai-tools.js        # AI-powered features
│   ├── api.js             # OpenRouter API integration
│   ├── export.js          # Export functionality
│   ├── templates.js       # Document templates
│   ├── db.js              # Database layer (Dexie)
│   └── utils.js           # Utility functions
├── styles/                # CSS files
│   └── main.css           # Main stylesheet
└── templates/             # Document templates (future)
```

---

## 🔧 Recent Improvements (Audit Nov 2025)

### Critical Bug Fixes

✅ **Fixed Preview.getHTML()** - Added missing method for export functionality
✅ **Fixed Marked.js API** - Updated listitem renderer for v11+ compatibility
✅ **Fixed Initialization Order** - Resolved circular dependency issues
✅ **Fixed Auto-Save Timing** - Now waits for full app initialization

### UX Enhancements

✅ **Modern Context Menu** - Beautiful right-click menu for documents
✅ **Loading States** - AI tools now show processing feedback
✅ **Error Recovery** - Comprehensive error handling with user-friendly messages
✅ **Settings Validation** - API key format validation
✅ **Keyboard Shortcuts Modal** - Press `Ctrl+/` for interactive guide

### Performance Optimizations

✅ **Debounced Stats Update** - Reduced unnecessary recalculations
✅ **Smart Auto-Save** - Only saves when changes detected
✅ **Improved State Management** - Better tracking of unsaved changes

### Documentation

✅ **Enhanced Welcome Message** - Comprehensive feature guide
✅ **Keyboard Shortcuts Table** - Quick reference in welcome screen
✅ **Pro Tips** - Context-aware usage hints

---

## 🎯 Use Cases

### Technical Writing

- API documentation
- Software guides
- Technical specifications

### Content Creation

- Blog posts
- Articles
- Long-form content

### Academic Work

- Research papers
- Notes
- Outlines

### Project Management

- Meeting notes
- Task lists
- Project documentation

---

## 🔒 Privacy & Data

- **100% Local** - All documents stored in your browser's IndexedDB
- **No Tracking** - No analytics, no telemetry
- **No Server** - Runs entirely client-side (except AI features)
- **Your Data** - You own your content, export anytime

**Note:** AI features require an OpenRouter API key and send content to external AI models for processing.

---

## 🐛 Troubleshooting

### AI Tools Not Working

- **Check API Key** - Verify your OpenRouter API key in Settings
- **Check Format** - Key should start with `sk-or-`
- **Check Balance** - Ensure you have credits on OpenRouter
- **Check Network** - Verify internet connection

### Preview Not Updating

- **Check Live Preview** - Ensure it's enabled in Settings
- **Refresh Page** - Try reloading the page
- **Clear Cache** - Clear browser cache if issues persist

### Documents Not Saving

- **Check Storage** - Verify browser storage isn't full
- **Check Permissions** - Ensure IndexedDB is allowed
- **Try Export** - Export important documents as backup

---

## 🤝 Contributing

This is a personal project by Jean & Elysia, but suggestions are welcome!

---

## 📜 License

MIT License - Free to use, modify, and distribute.

---

## 💙 Credits

**Built with love by Jean & Elysia** 💎💍

Special thanks to:

- The open-source community
- All the amazing library authors
- OpenRouter for AI access

---

## 🔗 Links

- [OpenRouter](https://openrouter.ai/) - AI API platform
- [Marked.js](https://marked.js.org/) - Markdown parser
- [Prism.js](https://prismjs.com/) - Syntax highlighter
- [KaTeX](https://katex.org/) - Math rendering
- [Mermaid](https://mermaid.js.org/) - Diagram rendering

---

**Version:** 1.3.0
**Last Updated:** December 2025
**Status:** Production Ready ✅

_Write beautifully. Write intelligently. Write with Elysia._ 💎