ServiceVision Markdown Editor

A beautiful, intuitive markdown editor with AI-powered assistance. Visual-first editing inspired by Typora, built for the modern web.

Features

Visual-First Editing

• WYSIWYG Experience - See formatted text as you type, not raw markdown syntax
• Inline Rendering - Headers, bold, italic, links, and code render immediately
• Source Mode Toggle - Switch to raw markdown view with Cmd/Ctrl + E
• Focus Mode - Highlight only the current paragraph for distraction-free writing

AI Assistant

• Summarization - Get quick summaries of your document
• Writing Improvement - Enhance clarity and flow
• Key Points Extraction - Pull out important information as bullet points
• Explanation - Simplify complex text
• Expansion - Add more detail to your ideas
• 5,000 Token Limit - Per-session usage tracking
• Provider Choice - Switch between Gemini Flash (cheapest), Claude Haiku, or GPT-4o Mini

Rich Formatting

• Headers (H1-H6)
• Bold, italic, underline, strikethrough
• Ordered and unordered lists
• Task lists with checkboxes
• Blockquotes
• Code blocks with syntax highlighting
• Tables with resize support
• Horizontal rules
• Links and images
• Highlighted text

Export Options

• Markdown (.md) - Clean markdown file
• HTML (.html) - Styled, standalone HTML document
• PDF (.pdf) - Print-ready format via browser print dialog (Pandoc-style)

User Experience

• Dark Mode - System-aware with manual toggle
• Document Outline - Navigate large documents easily
• Drag & Drop - Open files by dropping them on the editor
• Auto-Save - Content saved to localStorage automatically
• Responsive Design - Works on desktop, tablet, and mobile
• Keyboard Shortcuts - Full suite for power users

Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl + B	Bold
Cmd/Ctrl + I	Italic
Cmd/Ctrl + U	Underline
Cmd/Ctrl + K	Insert link
Cmd/Ctrl + S	Save/Download as markdown
Cmd/Ctrl + E	Toggle source/visual mode
Cmd/Ctrl + Shift + F	Toggle focus mode
Cmd/Ctrl + \	Toggle document outline
Cmd/Ctrl + /	Toggle AI assistant
Cmd/Ctrl + Shift + C	Insert code block

Getting Started

Installation

# Clone the repository
git clone https://github.com/servicevision/markdown-editor.git
cd markdown-editor

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local
# Edit .env.local with your API keys

Environment Variables

At least one AI provider API key is needed for AI features:

# Google Generative AI (Gemini Flash) - Recommended, cheapest
GOOGLE_GENERATIVE_AI_API_KEY=your_key_here

# Anthropic (Claude Haiku)
ANTHROPIC_API_KEY=your_key_here

# OpenAI (GPT-4o Mini)
OPENAI_API_KEY=your_key_here

Development

# Start development server
npm run dev

# Open http://localhost:3000

Production Build

# Build for production
npm run build

# Start production server
npm start

Tech Stack

• Framework: Next.js 16 (App Router)
• Editor Core: TipTap (ProseMirror-based)
• Styling: Tailwind CSS v4
• AI Integration: Vercel AI SDK
• State Management: Zustand
• Syntax Highlighting: lowlight (highlight.js)

Architecture

markdown-editor/
├── src/
│   ├── app/
│   │   ├── page.tsx           # Main editor page
│   │   ├── layout.tsx         # Root layout with theme
│   │   ├── globals.css        # Global styles
│   │   └── api/
│   │       └── ai/route.ts    # AI endpoint
│   ├── components/
│   │   ├── Header.tsx         # Top navigation bar
│   │   ├── Toolbar.tsx        # Formatting toolbar
│   │   ├── AIPanel.tsx        # AI assistant sidebar/bottom
│   │   ├── DocumentOutline.tsx # Document structure sidebar
│   │   ├── StatusBar.tsx      # Bottom status bar
│   │   ├── DropZone.tsx       # File drag & drop handler
│   │   └── ThemeProvider.tsx  # Dark mode management
│   ├── stores/
│   │   └── editor-store.ts    # Zustand state management
│   ├── hooks/
│   │   ├── use-keyboard-shortcuts.ts
│   │   └── use-media-query.ts
│   └── lib/
│       ├── utils.ts           # Utility functions
│       └── markdown.ts        # Markdown conversion
├── docs/                      # Project documentation
└── public/                    # Static assets

Deployment

Vercel (Recommended)

1. Push to GitHub
2. Import to Vercel
3. Add environment variables
4. Deploy

Self-Hosted

npm run build
npm start

Privacy

• No Server Storage - All document content stays in your browser
• Client-Side Processing - Markdown conversion happens locally
• Optional AI - AI features are opt-in and require explicit action
• No Analytics on Content - We don't track what you write

Contributing

This is a ServiceVision project. For contributions or feature requests, contact: chris@servicevision.net

License

MIT License - Use freely, attribution appreciated.

---

Built with care by ServiceVision. We build enterprise software that doesn't feel like enterprise software.