--- 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._ πŸ’Ž