Bionic Markdown Preview

A Markdown editor with adjustable word emphasis, optional gradients, and a plain preview for comparison.

Latest release: Cloudflare-hosted app

The original bionicmarkdown.com domain remains on Bolt hosting until its DNS migration is completed.

Also Available On

Platform	Link
Web App	You are here!
VS Code	Marketplace
Chrome	GitHub

Features

• Bold Highlighting - Emphasizes initial letters of words for your preferred reading style
• Gradient Reading - Optional color gradients for enhanced visual tracking
• Live Preview - Side-by-side editor with real-time preview
• Customizable Settings - Adjust fixation strength, fonts, colors, and more
• Dark/Light Themes - Full theme support
• Export Options - Copy or download processed HTML
• Scroll Sync - Synchronized scrolling between editor and preview
• Tab Session Storage - Content and settings survive reloads in the same tab; save an export before closing it

Getting Started

Use Node.js 22.12+ or 24+ (Vite 8).

npm install
npm run dev

Configuration

Bold Highlighting Options

• Fixation Point (1-5) - Controls how much of each word is bolded
• Highlight Tag - HTML tag for emphasis (b, strong, mark, span)
• Dim Opacity - Opacity of non-highlighted text portions

Gradient Reading Options

• Presets - Ocean, Sunset, Forest, Berry, Lavender, Autumn, Mint, Twilight, Coffee, Monochrome, or None
• Apply to Headings - Include headings in gradient coloring
• Apply to Links - Include links in gradient coloring

Editor Settings

• Font Size - Preview text size
• Font Family - Choose from Google Fonts
• Line Height - Text line spacing
• Theme - Light or dark mode

Tech Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• markdown-it
• text-vide (Bold highlighting engine)
• DOMPurify (HTML sanitization)

Scripts

npm run dev       # Start development server
npm run build     # Production build
npm run preview   # Preview production build
npm run lint      # Run ESLint
npm run typecheck # TypeScript type checking

Project Structure

src/
  components/     # React components
  contexts/       # React contexts (scroll sync)
  hooks/          # Custom hooks (debounce, sessionStorage)
  types/          # TypeScript type definitions
  utils/          # Processing utilities (markdown, colors, gradients)

Roadmap

• Cursor Position Mapping - Maintain cursor position correspondence between raw Markdown text and rendered preview, allowing click-to-navigate between panels
• Text Selection Mapping - Synchronize text selection between editor and preview, highlighting the corresponding region in the opposite panel when text is selected

Reading preferences vary; speed, comprehension, and health benefits have not been measured for this app. Downloaded HTML includes the visible gradient, dimming, typography, and embedded math fonts. Optional Google Fonts and document images may still need a network connection.

Release review

The 2026-10-08 candidate was checked with 117 unit/component tests, 12 Chromium workflows against both development and production builds, and 5 Electron/Cypress regressions. The audit report records the remaining development-only advisories and platform limits: PRODUCT-ENGINEERING-AUDIT-2026-10-08.md.

Hosting

The reviewed build is published as static assets on Cloudflare Workers Free. No database, Functions, or custom server script is required. Cloudflare documents static asset requests as free and unlimited: https://developers.cloudflare.com/workers/static-assets/billing-and-limitations/.

npm run build
npx wrangler@4 deploy --config wrangler.jsonc

Use the explicit configuration: it uploads only dist/. Do not publish the source/project directory as static assets. The existing authenticated account owns bionic-markdown-preview.xucgphi.workers.dev. Future GitHub pushes do not automatically deploy this manual hosting configuration.

To check the real deployment:

BIONIC_LIVE_URL=https://bionic-markdown-preview.xucgphi.workers.dev npm run test:e2e

Connecting bionicmarkdown.com requires its Spaceship DNS/registrar access and Cloudflare zone-management access. The original Bolt domain must stay available until the Cloudflare custom domain is serving the verified release over HTTPS. Preserve all existing DNS records, including mail records, before changing nameservers. No domain transfer or paid hosting plan is needed for this static app.