Website logo depicts joriszwart.nl

I ❤ to create appealing stuff

Paste your JWT here. Everything is client-side, so nothing to worry about.

The Code

function update(jwt) {
    // clear all previous tables
    var tables = document.querySelectorAll('.jwt-decoder')
    for(var i = 0; i < tables.length; i++) {
        tables[i].remove()
    }

    // split in 3 parts: header, payload and signature
    var parts = jwt.split('.')

    // render the header and payload
    var header = JSON.parse(atob(parts[0]))
    var payload = JSON.parse(atob(parts[1]))

    // render JWT
    render(header, 'header')
    render(payload, 'payload')

    // TODO show the signature
}

update(document.querySelector('textarea').value)

function render(data, part) {
    var table = document.createElement('table')
    table.innerHTML = '<caption>' + part + '</caption><tr><th>Property</th><th>Value</th><!-- th>Description</th --></tr>'
    table.classList.add('table')
    table.classList.add('jwt-decoder')
    table.classList.add(part)
    var textarea = document.querySelector('textarea')
    textarea.parentNode.insertBefore(table, textarea.nextSibling)

    for(var property in data) {
        var row = table.insertRow()
        row.insertCell().innerText = property
//        if (data[property] > && data[property] < ) {
//            row.insertCell().innerText = new Date(data[property])
//        } else {
            row.insertCell().innerText = data[property]
//        }
    }
}