Input

Paste your CSV or TSV here.

Output

The Code

const renderHTMLTable = (table, records, headers) => {
    // head
    const thead = table.createTHead()
    const tr = thead.insertRow()
    for (const header of headers) {
        const th = document.createElement('th')
        tr.appendChild(th)
        th.textContent = header
    }

    // body
    for (const record of records) {
        const row = table.insertRow()
        for (const value of record) {
            row.insertCell().innerText = value
        }
    }
}

const renderMarkdown = (records, headers) => {
    let markdown = ''

    // headers
    let delimiter = ''
    for (const header of headers) {
        markdown += delimiter + (header || '*')
        delimiter = ' | '
    }
    markdown += '\n'

    delimiter = ''
    for (const header of headers) {
        markdown += delimiter + '-'.repeat(header.length)       // TODO max out all values from column
        delimiter = ' | '
    }
    markdown += '\n'

    // body
    for (const record of records) {
        let delimiter = ''
        for (const value of record) {
            markdown += delimiter + (value || '*')
            delimiter = ' | '
        }
        markdown += '\n'
    }

    return markdown
}

const update = csv => {
    const lines = csv.split('\n')
    const headers = lines[0].split(',')

    // TODO auto detect separator, or \t. detect double quotes
    // don't strive to be full csv compliancy, use other tools to sanity your csv first
    const records = lines.map(line => line.split(','))

    const output = document.querySelector('div.output')
    output.innerHTML = `

As rendered table

As HTML

As JSON

As Markdown

` const markdown = document.createTextNode(renderMarkdown(records, headers)) output.querySelector('.markdown').appendChild(markdown) const table = output.querySelector('table') renderHTMLTable(table, records, headers) const html = document.createTextNode(table.outerHTML) output.querySelector('.html').appendChild(html) const json = document.createTextNode(JSON.stringify({ headers, records }, null, 2)) output.querySelector('.json').appendChild(json) } update(document.querySelector('textarea').value)
csv-tsv-converter.js