online-md
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data β all from the browser, and deployed in milliseconds.
index.ts
https://elnaddar--b758b43a3f8e11f0bdfc76b3cceeab13.web.val.run
A feature-rich online markdown editor with dual editing modes and advanced functionality.
- Split Screen Mode: Live preview with synchronized scrolling
- WYSIWYG Hybrid Mode: Rich text editing with markdown output
- RTL/LTR Support: Switch between right-to-left and left-to-right text direction
- Auto-persistence: Content automatically saved to localStorage
- URL Sharing: Share documents via compressed URLs (no database required)
- Synchronized Scrolling: Both panes scroll together in split mode
- Mode Switching: Seamlessly switch between editing modes while preserving content
βββ backend/
β βββ index.ts # Hono server for static file serving
βββ frontend/
β βββ index.html # Main application template
β βββ index.tsx # React application entry point
β βββ components/
β β βββ App.tsx # Main application component
β β βββ SplitEditor.tsx # Split screen editor
β β βββ WysiwygEditor.tsx # WYSIWYG editor
β β βββ Toolbar.tsx # Editor toolbar
β βββ style.css # Application styles
βββ shared/
β βββ utils.ts # Shared utilities for compression/decompression
βββ README.md
- Frontend: React 18.2.0 with TypeScript
- Backend: Hono for static file serving
- Markdown: marked for parsing, DOMPurify for sanitization
- WYSIWYG: Quill.js for rich text editing
- Styling: TailwindCSS
- Compression: pako for gzip compression
- Storage: localStorage for persistence
- Start Writing: Begin typing in either split-screen or WYSIWYG mode
- Mode Switching: Use the toolbar to switch between:
- Split Screen: Live markdown preview with synchronized scrolling
- WYSIWYG: Rich text editor with markdown output
- Text Direction: Toggle between LTR (Left-to-Right) and RTL (Right-to-Left)
- Auto-Save: Content is automatically saved to localStorage every second
- Sharing: Click "Share" to generate a compressed URL containing your content
- Export: Download your work as a
.md
file - Clear: Reset the editor (with confirmation)
Ctrl+B
/Cmd+B
: Bold textCtrl+I
/Cmd+I
: Italic textCtrl+K
/Cmd+K
: Insert linkTab
: Indent (add 2 spaces)
In split-screen mode, scrolling in either pane automatically scrolls the other pane to the corresponding position.
The share feature compresses your markdown content and encodes it in the URL, allowing you to share documents without requiring a database or user accounts.
Your work is automatically saved to browser localStorage and restored when you return to the editor.
Full support for right-to-left languages with proper text alignment and direction.