hidekazu-konishi.com

Markdown Table Visual Editor Tool - Spreadsheet-style GFM Table Builder with CSV/TSV/JSON Import

First Published: 2026-04-28
Last Updated: 2026-04-28

This tool offers a spreadsheet-style visual editor for Markdown tables. Edit cells directly in a grid, choose per-column alignment, drag rows or columns to reorder them, and instantly receive GitHub Flavored Markdown (GFM), HTML, CSV, and TSV output. Paste an existing Markdown table, CSV, TSV, or JSON array to convert it into a visual grid in one step. All processing is performed entirely in your browser.

Features

• Spreadsheet-style grid: Click any cell and type to edit. The first row is fixed as the header row and styled for emphasis.
• Per-column alignment: Choose left, center, or right alignment per column. Alignment markers are written into the GFM separator row and are mirrored as inline style="text-align:..." in the HTML output.
• Multi-format import: Paste Markdown / GFM tables, CSV (RFC 4180), TSV, or JSON arrays. Auto-detect identifies the format from the pasted text. JSON supports both array-of-arrays and array-of-objects (object keys become column headers).
• Multi-format output: Real-time generation of GitHub Flavored Markdown, HTML, CSV, and TSV. Switch between formats with the output tabs.
• Drag to reorder: Drag a row by its row handle or a column by its column header to rearrange. The header row stays fixed at the top.
• Add or delete rows and columns: Add new rows / columns with the toolbar buttons. Delete buttons appear on each row and column control.
• Undo / redo: Up to the last 20 grid changes can be undone (Ctrl+Z / Cmd+Z) and redone (Ctrl+Y, Ctrl+Shift+Z, or Cmd+Shift+Z).
• Keyboard navigation: Tab / Shift+Tab move between cells, Enter moves to the cell directly below.
• Copy and download: One-click copy or file download for every output format - .md, .html, .csv, or .tsv.
• Strict pipe escaping: Pipe characters (|) inside cells are escaped as \| in the Markdown output, and newlines become <br> so multiline cells survive a round trip.
• 100% client-side: All parsing and generation happens in your browser. No data is sent to any server. The tool keeps working offline once loaded.

How to Use

1. Click any cell in the grid and start typing to edit it. The first row is the header row.
2. Use + Row and + Column to grow the grid. Use the small × buttons on each row / column control to delete.
3. Click one of the alignment buttons (left / center / right) above each column header to set per-column alignment.
4. Drag a row by its leftmost handle to reorder data rows. Drag a column by its column header to reorder columns.
5. To convert an existing table, paste it into the Import / Paste Source textarea. Select a format or leave on Auto-detect, then click Apply to Grid. You can also click Import File to load a file from disk.
6. The Output panel updates as you edit. Switch between Markdown, HTML, CSV, and TSV with the tabs, then use Copy or Download.
7. Use Undo / Redo (Ctrl+Z / Ctrl+Y) to step through your last changes.

Keyboard Shortcuts

• Tab / Shift+Tab - Move to the next / previous cell.
• Enter - Move to the cell directly below.
• Ctrl+Z (Cmd+Z on Mac) - Undo the last change.
• Ctrl+Y or Ctrl+Shift+Z (Cmd+Shift+Z on Mac) - Redo.

Important Notes

• This tool does not persist your data between sessions. Always copy or download the output before closing the tab.
• The header row cannot be deleted or moved - it is always the first row of the GFM table.
• Cell content is treated as plain text in the editor. Markdown inside a cell (such as **bold**) is not rendered live, but it is preserved verbatim in the Markdown output.
• Cell content with newlines is encoded as <br> in the Markdown output to keep the table on a single GFM row.
• Merged cells (colspan / rowspan) are not supported, because GFM tables themselves do not support cell merging.
• The CSV / TSV output follows the standard rules: fields containing the delimiter, quote characters, or newlines are wrapped in double quotes, and embedded quotes are doubled (RFC 4180).
• This tool complements the Markdown Live Editor Tool for full-document Markdown editing and the Markdown HTML Converter Tool for batch conversion.

Common Use Cases

• Drafting tables for README files and GitHub issues: GitHub Flavored Markdown is the native syntax for GitHub README files, issue descriptions, and pull request comments. Visually building a table here and pasting the GFM output into GitHub avoids the tedious counting of pipes and dashes.
• Converting CSV / TSV exports into Markdown documentation: Spreadsheets and data tools commonly export to CSV or TSV. Paste the export into the import panel to get a Markdown / GFM table that drops directly into technical documentation, blog posts, or wiki pages.
• Editing existing Markdown tables that are hard to align by hand: Wide Markdown tables - especially those with many columns or long cell text - are difficult to read or modify in plain text. Loading the table into the visual grid lets you adjust cells, alignment, and order without breaking syntax.
• Reshaping JSON API responses into a documentation table: Paste a JSON array (such as a list of API endpoints, configuration entries, or pricing items) and the tool produces a header row from the object keys. The result is a clean Markdown table for an API reference or comparison document.
• Producing HTML tables for static sites or CMS editors: When the publishing target does not render Markdown, switch to the HTML output tab. The generated HTML preserves per-column alignment with inline style attributes and is safe to paste into rich-text editors that accept HTML.
• Round-tripping between Markdown and CSV / TSV: When collaborating with stakeholders who prefer spreadsheets, edit the table once and copy the CSV or TSV view for them, while keeping the Markdown view for engineering documentation - all from the same grid.

About Markdown Tables

Markdown was designed to be a lightweight, readable plain-text format that can be converted into HTML. The original specification by John Gruber (2004) did not include tables, so different Markdown flavors added them in different ways. GitHub Flavored Markdown (GFM) introduced the now-dominant pipe-and-dash table syntax used by GitHub, GitLab, Stack Overflow, Notion, Obsidian, Hugo, and many static site generators.

A GFM table consists of three parts: a header row, a separator row of dashes (with optional colons for alignment), and one or more data rows. Each cell is delimited by pipe characters (|). Although the syntax is simple, building a non-trivial table by hand is tedious because every cell must be counted and each pipe aligned. A visual editor removes that friction, while still emitting the exact Markdown text you would have typed.

• GFM separator row: The dashes form the column boundaries; a leading colon means left alignment, a trailing colon means right alignment, and colons on both sides mean center alignment. This tool writes the alignment markers automatically based on your selection.
• Pipe escaping: A literal pipe character inside a cell must be escaped as \|; otherwise the cell is split incorrectly. The tool performs this escaping automatically when you type a pipe in a cell.
• Single-line cells: GFM table cells are limited to a single line. Newlines inside cells are written out as <br> so that multiline content still renders as a line break inside the cell.
• No cell merging: The GFM table syntax does not support colspan or rowspan. If you need merged cells, you have to fall back to writing raw HTML.

Frequently Asked Questions

• What input formats can I paste into the import box? Markdown / GFM tables, CSV (RFC 4180), TSV (tab-separated values), and JSON arrays. JSON can be either an array of arrays (the first inner array is treated as the header row) or an array of objects (the union of object keys becomes the header row).
• How are commas, quotes, and newlines handled in CSV output? The tool follows RFC 4180. Any cell value that contains a comma, double quote, carriage return, or line feed is wrapped in double quotes, and any internal double quotes are doubled. Cells without those characters are emitted unquoted.
• What happens to a pipe character (|) inside a cell? In the Markdown output it is escaped as \|. In the HTML and CSV / TSV outputs the pipe is written verbatim.
• Why is the header row fixed and not deletable? A GFM table is required to have a header row followed by a separator row. Allowing deletion of the header row would produce invalid Markdown. To repurpose the header row, simply edit its cells.
• How many undo steps are kept? Up to 20 most recent grid changes (cell edits, alignment changes, add / delete row or column, drag reorder, import). Closing the page clears the history.
• Is my data ever uploaded? No. All parsing, conversion, and generation happen entirely in your browser using JavaScript. No data is transmitted to any server. The tool keeps working even if you disconnect from the internet after it has loaded.
• Can I use this tool for very large tables? The grid is rendered as a single HTML <table>. Performance is good for tables up to a few thousand cells. Beyond that, browsers may slow down because every cell is a contenteditable element. For very large data sets, prefer a dedicated spreadsheet tool.