Spaces:
Running
Running
| 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. | |
|  | |
|  | |
|  | |
|  | |
| --- | |
| ## ✨ 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._ 💎 | |