• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
elnaddar

elnaddar

online-md

Public
Like
online-md
Home
Code
4
backend
1
frontend
4
shared
1
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
Code
/
Search
index.ts
https://elnaddar--b758b43a3f8e11f0bdfc76b3cceeab13.web.val.run
README.md

Markdown Editor

A feature-rich online markdown editor with dual editing modes and advanced functionality.

Features

Editing Modes

  1. Split Screen Mode: Live preview with synchronized scrolling
  2. WYSIWYG Hybrid Mode: Rich text editing with markdown output

Additional Features

  • 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

Project Structure

β”œβ”€β”€ 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

Technology Stack

  • 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

Usage

  1. Start Writing: Begin typing in either split-screen or WYSIWYG mode
  2. Mode Switching: Use the toolbar to switch between:
    • Split Screen: Live markdown preview with synchronized scrolling
    • WYSIWYG: Rich text editor with markdown output
  3. Text Direction: Toggle between LTR (Left-to-Right) and RTL (Right-to-Left)
  4. Auto-Save: Content is automatically saved to localStorage every second
  5. Sharing: Click "Share" to generate a compressed URL containing your content
  6. Export: Download your work as a .md file
  7. Clear: Reset the editor (with confirmation)

Keyboard Shortcuts (Split Mode)

  • Ctrl+B / Cmd+B: Bold text
  • Ctrl+I / Cmd+I: Italic text
  • Ctrl+K / Cmd+K: Insert link
  • Tab: Indent (add 2 spaces)

Features in Detail

Synchronized Scrolling

In split-screen mode, scrolling in either pane automatically scrolls the other pane to the corresponding position.

URL Sharing

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.

Persistence

Your work is automatically saved to browser localStorage and restored when you return to the editor.

RTL Support

Full support for right-to-left languages with proper text alignment and direction.

HTTP
  • index.ts
    elnaddar--b7…13.web.val.run
Code
backendfrontendsharedREADME.md
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.