Hero Editor

A web-based file editor with syntax highlighting and live preview. Built with CodeMirror 5, marked.js, and highlight.js, with a high-performance Rust backend server.

Quick Start

# Install dependencies and build
make install

# Start the editor server
make run

Server will be available at http://localhost:2769

The editor opens with default content files to explore (README.md, GETTING_STARTED.md, examples/)

Features

• 📝 Split-View Editor: Editor on left, live preview on right
• 📋 Markdown Preview: Bootstrap-styled markdown rendering with syntax highlighting
• ✨ Syntax Highlighting: Support for 9+ languages (JS, Rust, Go, HTML, YAML, TOML, etc.)
• 🎨 Dark/Light Themes: Automatic theme detection with Bootstrap integration
• 📊 Mermaid Diagrams: Flowcharts, sequence, class diagrams rendered in preview
• 🌐 WebDAV Support: Remote file access via WebDAV clients (Finder, Explorer, Cyberduck)
• 🔐 Sandboxed: Path traversal prevention, file extension whitelist
• ⚡ Fast: Single Rust binary, no external dependencies at runtime

Project Structure

├── src/                          # Web component source
│   └── editor-component.js       # Custom Element implementation
├── editserver/                   # Rust backend server
│   ├── src/main.rs               # Server implementation
│   ├── Cargo.toml                # Rust dependencies
│   └── build.sh                  # Build script
├── scripts/                      # Build scripts
│   └── minify.js                 # Minification script
├── index.html                    # Demo page with file browser
├── index2.html                   # Single file editor demo
├── dist/                         # Minified distribution (after make dist)
├── content/                      # Sandboxed document storage
└── Makefile                      # Build automation

Requirements

• Bun - JavaScript runtime and package manager (for minifying web component)
• Rust 1.92+ - For building the backend server

Usage Example

<script src="dist/editor-component.min.js"></script>

<code-editor
    path="readme.md"
    api-url="/api/file"
    theme="auto"
    preview="true"
></code-editor>

REST API

• GET /api/file?path=<path> - Read file
• POST /api/file?path=<path> - Save file
• DELETE /api/file?path=<path> - Delete file
• GET /api/files?path=<path> - List directory

WebDAV Access

Connect at http://localhost:2769/dav/ with credentials (default: admin/admin)

Preview & Editing

Live Markdown Preview

• ✅ Open any .md or .markdown file
• ✅ Split-view shows editor on left, preview on right
• ✅ Preview updates as you type
• ✅ Supports tables, lists, code blocks, blockquotes
• ✅ Mermaid diagrams render in preview
• ✅ Syntax highlighting with highlight.js

Preview Styling

• Bootstrap 5 typography
• Responsive tables and images
• Code block highlighting for 50+ languages
• Dark/light theme awareness

Directory Configuration

Hero Editor exposes one sandboxed directory containing all editable files:

Default Location

project_root/
└── content/           ← All files here are editable
    ├── README.md
    ├── GETTING_STARTED.md
    └── examples/
        └── hello.md

Change Root Directory

Use environment variables or command-line flags:

# Using environment variable
CONTENT_DIR=/path/to/my/files make run

# Or directly with the binary
./editserver/target/release/hero-editor -c /path/to/my/files

# With additional options
./editserver/target/release/hero-editor \
  -c /path/to/files \
  -p 3000 \
  --dav-user myuser \
  --dav-pass mypassword

Access Points

URL	Purpose	Root Directory
http://localhost:2769/	Web UI (embedded in binary)	N/A
http://localhost:2769/api/file?path=README.md	REST API file operations	CONTENT_DIR
http://localhost:2769/dav/	WebDAV protocol access	CONTENT_DIR

Security

• ✅ Path traversal (../) is blocked
• ✅ Only whitelisted extensions allowed
• ✅ All files must be within CONTENT_DIR
• ✅ Basic Auth or guest mode for WebDAV

Configuration

See CLAUDE.md for detailed documentation:

• Web component attributes and methods
• Rust server options and command-line flags
• Supported languages and themes
• Security and sandboxing details