# SvelteMark A **privacy-first**, **open-source**, **local-only** markdown editor built with Svelte 5. Your notes never leave your device. No accounts. No tracking. No cloud. [](https://sm.fana.my.id) [](LICENSE) [](https://svelte.dev/)

Features

Privacy & Security

• 100% Local Storage - All data stored in your browser's IndexedDB
• No Server Communication - Zero network requests for your notes
• No Account Required - Start writing immediately, no sign-up
• Export Your Data - Full data portability with JSON backup

Offline Support

• Full PWA Support - Install as a native app on desktop and mobile
• Works Offline - Continue writing even without internet connection
• Service Worker Caching - All app assets cached for instant loading
• Auto-Sync Updates - Automatically updates when new versions are available

Core Editor

• CodeMirror 6 Editor - Powerful text editing with syntax highlighting
• Live Preview - Real-time markdown rendering with GitHub styling
• Fine-Grained Reactivity - Block-based rendering that only updates changed sections
• Scroll Sync - Proportional scroll synchronization between editor and preview
• Auto-save - Automatic saving with debounced updates

Markdown Support

• GitHub Flavored Markdown - Tables, task lists, strikethrough, and more
• Math Equations - LaTeX math rendering with KaTeX
• Mermaid Diagrams - Flowcharts, sequence diagrams, pie charts
• Syntax Highlighting - Code block highlighting for 100+ languages
• Copy Code Button - One-click copy for code blocks

File Management

• File Explorer - Organize notes in folders with tree view
• Drag & Drop - Reorder files and folders by dragging
• Root-Level Files - Create files outside folders at root level
• Rename & Delete - Right-click context menu for file operations
• Nested Folders - Support for hierarchical folder structure

UI/UX

• GitHub Dark Theme - Beautiful dark theme matching GitHub's design
• Resizable Panels - Drag to resize sidebar and editor/preview split
• Auto-hide UI - Distraction-free writing mode
• View-only Mode - Focus on reading without the editor

Tools

• Print Support - Print documents with light theme (Ctrl+P)
• Export/Import - Backup and restore all your notes as JSON
• Help - Built-in welcome guide with markdown examples

Screenshots

Main Editor View

Preview Mode

Preview Mode w/ TOC

Getting Started

Prerequisites

• Node.js (v18 or higher)
• pnpm (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/MasFana/sveltemark.git
cd sveltemark

# Install dependencies
pnpm install

# Start development server
pnpm dev

Open http://localhost:5173 in your browser.

Building for Production

# Build the application
pnpm build

# Preview the production build
pnpm preview

Keyboard Shortcuts

Tech Stack

• Framework: Svelte 5 with Runes
• Build Tool: Vite
• Editor: CodeMirror 6
• Database: Dexie.js (IndexedDB wrapper)
• Markdown Processing:
• unified ecosystem
• remark-gfm - GitHub Flavored Markdown
• remark-math + rehype-katex - Math equations
• rehype-highlight - Code syntax highlighting
• Diagrams: Mermaid
• Styling: github-markdown-css
• Deployment: Cloudflare Pages (optional)
• Offline: Service Worker with cache-first strategy for PWA support

Project Structure

fanadown/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── Editor.svelte      # CodeMirror editor component
│   │   │   ├── Preview.svelte     # Markdown preview component
│   │   │   ├── Sidebar.svelte     # File explorer sidebar
│   │   │   ├── FileTree.svelte    # Recursive file tree
│   │   │   └── Toolbar.svelte     # Formatting toolbar
│   │   ├── appState.svelte.ts     # Global reactive state
│   │   ├── db.ts                  # Dexie database operations
│   │   ├── markdown.ts            # Markdown processing pipeline
│   │   └── index.ts               # Library exports
│   ├── service-worker.ts          # PWA offline caching
│   └── routes/
│       ├── +layout.svelte         # App layout
│       └── +page.svelte           # Main page
├── static/                        # Static assets
├── package.json
├── svelte.config.js
├── vite.config.ts
└── tsconfig.json

Data Storage

SvelteMark uses IndexedDB via Dexie.js for local-first data storage. All your notes are stored in your browser and never leave your device.

Database Schema

• folders: id, name, parentId, isOpen
• files: id, folderId (nullable), title, content, createdAt, updatedAt

Note: folderId can be null for root-level files (files not inside any folder).

Export/Import

You can export all your data as a JSON file for backup:

1. Click the ⋯ (More) menu in the toolbar
2. Select Export Backup
3. Save the JSON file

To restore:

1. Click Import Backup
2. Select your backup JSON file

Offline Mode

SvelteMark works fully offline as a Progressive Web App (PWA).

How It Works

• Service Worker: Caches all app assets on first visit
• Cache-First Strategy: Assets are served from cache instantly
• Background Updates: New versions are fetched automatically when online
• Data Persistence: Your notes are stored locally in IndexedDB

Installing as PWA

1. Visit the app in Chrome, Edge, or Safari
2. Click the install icon in the address bar (or "Add to Home Screen" on mobile)
3. Launch from your desktop or home screen
4. Works offline - no internet required!

Notes

• First visit requires internet to download the app
• After installation, the app works completely offline
• Updates are applied automatically when you're back online
• All data stays local - nothing is sent to servers even when online

Theming

The application uses a GitHub-inspired dark theme with the following color palette:

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Svelte - The amazing reactive framework
• CodeMirror - The versatile code editor
• GitHub - Design inspiration for the dark theme
• ByteMD / StackEdit - Scroll sync inspiration

Made with Svelte 5 | Open Source | Privacy First