📝

Introducing Mditor — A Visual Markdown Table Editor

Meet Mditor: an intuitive, powerful web app for visually editing Markdown tables with real‑time sync, rich styling, and one‑click import/export.

Introducing Mditor — A Visual Markdown Table Editor

Mditor is a web application that makes working with Markdown tables fast, visual, and delightful. Whether you prefer editing in a spreadsheet‑like interface or writing Markdown directly, Mditor keeps everything in perfect sync. It’s designed for writers, developers, analysts, and anyone who wants clean, styled tables without the friction.

Visit the live app: mditor.orangely.xyz

What makes Mditor different

  • Visual editing: Click to edit cells, use Enter/Tab to move around, and navigate with arrow keys.
  • Selection superpowers: Ctrl/Cmd+click to multi‑select, Shift+click for ranges, or drag to select.
  • Context menu: Quick actions like copy, paste, and clear are just a right‑click away.
  • Real‑time sync: Table view and Markdown stay perfectly in sync as you type.
  • Import/Export in one click: Markdown, CSV, Excel, JSON — plus export to HTML, PNG, and SVG.

Key features

Table editing

  • Spreadsheet‑style editing with keyboard navigation (Arrow keys, Tab, Enter, Escape)
  • Multi‑select and range selection
  • Row/column insert and delete
  • Sorting by column (ascending/descending)
  • Transpose (swap rows and columns)
  • Bulk clear, full undo/redo history

Rich styling and formatting

  • Cell background and text color, font size, and padding
  • Text styles: bold, italic, underline
  • Alignment: left, center, right
  • Borders: color, width, and style
  • Batch styling for multiple selected cells

Markdown editor and preview

  • Real‑time Markdown ↔︎ table synchronization
  • Syntax highlighting with optional line numbers
  • Live preview and split‑view modes
  • Built‑in format validation for Markdown tables

Import and export

  • Import: Markdown (.md), CSV (.csv), Excel (.xlsx), JSON (.json)
  • Export: Markdown, CSV, Excel, JSON, HTML, PNG, SVG
  • Drag‑and‑drop files or use the clipboard to paste data
  • Optional style preservation on export

Preview and presentation

  • Multiple views: Table, Markdown, Preview, and Split
  • Zoom control (50%–200%) and full‑screen mode
  • Print‑friendly layout and image export

Personalization and performance

  • Light/Dark themes and multi‑language UI
  • Editor settings: font size, line numbers, code highlighting, word wrap
  • Table display options: grid lines, zebra stripes, column width adjustments
  • Optimized for large tables with virtual scrolling and deferred rendering

Built with modern tech

  • React 18 + TypeScript
  • Vite
  • Ant Design (UI)
  • Zustand (state management)
  • @tanstack/react-table
  • react-markdown
  • xlsx, papaparse (file handling)

Who is it for?

  • Writers & bloggers who want clean Markdown tables without manual alignment
  • Developers documenting data, APIs, or configuration
  • Analysts & PMs preparing specs and datasets for documentation
  • Educators & students building structured content and handouts

Quick start

  1. Open the app: mditor.orangely.xyz
  2. Paste existing Markdown/CSV/Excel/JSON, or start from scratch
  3. Edit visually or in Markdown — both stay in sync
  4. Export to your preferred format when you’re done

Example Markdown table

| Column A | Column B | Column C |
|---------:|:--------:|:---------|
|     100  |  Center  |   Left   |
|     200  |  Align   |   Text   |

Roadmap

  • Collaborative editing
  • Templates and presets for common table layouts
  • More keyboard shortcuts and power‑user workflows

Try Mditor today

Create, style, validate, and export Markdown tables with confidence — without leaving your browser.

Open the live app: mditor.orangely.xyz

Mditor is part of the Orangely suite of web applications focused on performance, usability, and thoughtful design.