NTH Mark

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.

Features

Core Philosophy

• Local-First Architecture: 100% of data lives in your browser's IndexedDB via Dexie.js.
• Privacy Focused: Zero telemetry, no server uploads, no account required.
• Offline Ready: Full PWA support. Install it on your device and write without internet.

Editor Capabilities

• Live Preview: Real-time block-based incremental rendering with CodeMirror 6.
• Smart Scroll Sync: Bi-directional scrolling matches your editor and preview using section dimension mapping.
• Markdown Autocompletion: Headings, bold, italic, code blocks, links, images, tables, task lists, mermaid blocks, and math blocks.
• Rich Content:
  • Diagrams: Native Mermaid.js support with dark/light theme awareness.
  • Math: LaTeX equations via KaTeX (inline $...$ and display $$...$$).
  • GFM: Full GitHub Flavoured Markdown support (tables, task lists, strikethrough).
  • Code Highlighting: Syntax-highlighted code blocks via highlight.js.
• Table of Contents: Auto-generated TOC panel with active heading tracking.
• File System: Hierarchical file tree with drag-and-drop organisation, context menus, and inline rename with duplicate detection.

Tools

• Backup & Restore: One-click JSON export/import of your entire database.
• ZIP Export: Export folders and files as ZIP archives via JSZip.
• Print Ready: CSS optimised for beautiful PDF exports (Ctrl+P).
• Resizable Panes: Sidebar, editor, preview, and TOC widths are draggable and persisted.
• Auto-Hide UI: Sidebar and toolbar hide until mouse approaches edges.
• View Only Mode: Full-width preview with editor hidden.
• Dark / Light Theme: Toggle between dark and light themes across editor, preview, and diagrams.
• Mobile Responsive: Adapted layout with sidebar overlay for small screens.

Getting Started

Prerequisites

• bun
• Modern web browser with IndexedDB support

Quick Start

# Clone the repository
git clone https://github.com/nthung2112/nth-mark.git
cd nth-mark

# Install dependencies
bun install

# Start development server
bun dev

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

Building for Production

# Build the application
bun run build

# Preview the production build
bun preview

Available Scripts

Keyboard Shortcuts

Text Formatting

Editor Control

View & Navigation

Multi-Select & Selection

Tech Stack

• Framework: Svelte 5 with Runes ($state, $derived, $effect)
• Meta-framework: SvelteKit 2 with static adapter
• Build Tool: Vite 8
• Language: TypeScript 6 (strict mode)
• Editor: CodeMirror 6 (autocomplete, search, lint, syntax highlighting, markdown language)
• Database: Dexie.js (IndexedDB wrapper)
• Markdown Processing:
  • unified ecosystem
  • remark-gfm — GitHub Flavoured Markdown
  • remark-math + rehype-katex — Math equations
  • rehype-highlight — Code syntax highlighting
  • rehype-slug — Heading anchor IDs
• Diagrams: Mermaid
• Icons: lucide-svelte
• Archive: JSZip — ZIP export/import
• Slug Generation: github-slugger — Consistent heading IDs
• Styling: github-markdown-css
• Deployment: GitHub Pages (static adapter)

Project Structure

nth-mark/
├── src/
│   ├── app.html                    # HTML shell (dark theme, anti-flash CSS)
│   ├── app.d.ts                    # Platform type declarations
│   ├── lib/
│   │   ├── index.ts                # Library barrel exports
│   │   ├── appState.svelte.ts      # Global reactive state (Svelte 5 runes)
│   │   ├── db.ts                   # Dexie database schema and operations
│   │   ├── markdown.ts             # Unified markdown processing pipeline
│   │   └── components/
│   │       ├── Editor.svelte       # CodeMirror 6 editor with custom theme
│   │       ├── Preview.svelte      # Block-based markdown preview with TOC
│   │       ├── Sidebar.svelte      # File explorer sidebar
│   │       ├── FileTree.svelte     # Recursive file tree with drag-and-drop
│   │       └── Toolbar.svelte      # Formatting toolbar with menus
│   └── routes/
│       ├── +layout.svelte          # Root layout (SEO, PWA meta, fonts)
│       ├── +layout.server.ts       # SSR disabled, prerender enabled
│       ├── +page.server.ts         # Page prerender config
│       ├── +page.svelte            # Main page (UI orchestration)
│       └── layout.css              # Global CSS reset
├── static/
│   ├── manifest.json               # PWA web app manifest
│   ├── favicon.ico
│   └── robots.txt
├── package.json
├── svelte.config.js                # SvelteKit config (static adapter)
├── vite.config.ts                  # Vite config with build-time constants
├── tsconfig.json
├── eslint.config.js
└── .prettierrc

Data Storage

NTH Mark 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, title, content, createdAt, updatedAt

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

The database auto-initialises with a "Notes" folder and a "Welcome" file on first use. Helper functions handle unique name generation, recursive folder deletion, and move operations with cycle detection.

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 — a dated backup folder is created to avoid conflicts

Offline Mode

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

How It Works

• Static Build: The app is pre-built as fully static HTML/CSS/JS via SvelteKit's static adapter.
• Client-Side Only: SSR is disabled — the entire app runs in the browser.
• Data Persistence: All notes are stored locally in IndexedDB.
• PWA Manifest: Configured for standalone display mode with window controls overlay support.

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
• All data stays local — nothing is sent to servers even when online

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.

Acknowledgements

• Svelte — The 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