ColonyNote

A modern Markdown online editor with real-time preview.

Edit server-side Markdown files directly in your browser — no upload, no download, just open and write.

简体中文 · English

---

Screenshots

Light Theme	Dark Theme
Full-text Search	Mobile Editor

Features

• Server-side Editing — Edit Markdown files on your server directly in the browser. No file upload or download needed.
• WYSIWYG + Source Mode — Switch between rich text editing and raw Markdown source with one click.
• Real-time Preview — Live rendering as you type, powered by TipTap 3.
• Mermaid Diagrams — Render flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, and user journey maps.
• LaTeX Math — Full support for mathematical expressions via KaTeX.
• Code Highlighting — Syntax highlighting for 15+ programming languages with copy-to-clipboard.
• Full-text Search — Search across all your documents with ripgrep-powered fuzzy matching.
• Multi-directory Support — Manage multiple document directories simultaneously, each with its own file tree.
• Multi-tab — Open multiple files in tabs, with dirty-state indicators and auto-save.
• Real-time Sync — WebSocket-based file change notifications keep all connected clients in sync.
• External Change Detection — Automatically detect and handle file changes from outside the editor.
• Dark / Light / System Theme — Choose your preferred theme or follow the system setting.
• Mobile-first Design — Optimized for mobile devices with responsive layout and touch-friendly interactions.

Quick Start

Install

npm install -g colonynote

Start

# Start with current directory
colonynote

# Specify a directory
colonynote -d /path/to/docs

# Specify multiple directories
colonynote -d ./docs -d ./notes

# Specify port
colonynote -p 3000

# Specify host
colonynote --host 127.0.0.1

Then open http://localhost:5787 in your browser.

CLI Options

Option	Alias	Description	Default
--dir	-d	Root directory (can be specified multiple times)	Current directory
--port	-p	Server port	5787
--host		Server host	0.0.0.0

Configuration

ColonyNote reads configuration from ~/.colonynote/config.json (production) or ~/.colonynote/config.dev.json (development).

Create the config file manually:

{
  "dirs": [
    { "path": "/path/to/docs", "name": "Docs" }
  ],
  "allowedExtensions": [".md", ".markdown", ".mdown", ".mkdn"],
  "showHiddenFiles": false,
  "theme": {
    "default": "system"
  },
  "editor": {
    "autosave": true,
    "debounceMs": 300
  },
  "ignore": {
    "patterns": [
      "node_modules",
      ".git",
      ".next",
      "dist",
      "build"
    ]
  }
}

The configuration is automatically reloaded when the file changes — no server restart needed.

Configuration Fields

Field	Type	Description
dirs	Array<{path, name?, exclude?}>	Document directories to serve
allowedExtensions	string[]	File extensions to show in the file tree
showHiddenFiles	boolean	Whether to show dotfiles
theme.default	`"light"	"dark"
editor.autosave	boolean	Enable auto-save
editor.debounceMs	number	Auto-save debounce delay in milliseconds
ignore.patterns	string[]	Global ignore patterns (glob syntax)

Development

# Clone the repository
git clone https://github.com/opencolony/note.git
cd note

# Install dependencies
pnpm install

# Start development server (backend + frontend hot reload)
pnpm dev

# Frontend only (Vite dev server, port 5787)
pnpm dev:frontend

# Backend only (Hono server, port 5788)
pnpm dev:backend

# Build for production
pnpm build

# Run production build
pnpm start

# Type check
pnpm typecheck

# Run tests
pnpm test

Tech Stack

• Backend: Hono + @hono/node-server + ws
• Frontend: React 18 + Vite + Tailwind CSS v4
• UI Components: shadcn/ui (based on Radix UI)
• Editor: TipTap 3 + tiptap-markdown
• Diagrams: Mermaid
• Math: KaTeX
• Search: ripgrep (server-side) + FlexSearch (client-side index)
• Code Highlighting: lowlight
• Icons: lucide-react

License

MIT

Author

岳晓亮 hi@yuexiaoliang.com