Free JSON to HTML Table Converter

Paste a JSON array of objects and instantly generate a styled HTML table. Live preview with multiple themes, nested object support, copy HTML or export as CSV. No signup required.

Paste a JSON array to begin
JSON Input

Need something more powerful?

Let us build it for you. Custom APIs, dashboards, automations — whatever you need.

Start a Project →
Open source

NexTool on GitHub

269 free tools. No signup. Open source. Built by Christian Bucher.

GitHub Browse 269 Free Tools →

Related Tools

CSS Box Shadow Generator · Emoji Picker & Search · Free JSON to YAML Converter

\n'; const blob = new Blob([fullHTML], { type: 'text/html' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'json-table.html'; a.click(); URL.revokeObjectURL(a.href); showToast('Downloaded json-table.html'); } function exportCSV() { if (!lastCSV) { showToast('No data to export'); return; } const blob = new Blob([lastCSV], { type: 'text/csv' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'json-data.csv'; a.click(); URL.revokeObjectURL(a.href); showToast('Downloaded json-data.csv'); } function loadSample() { input.value = JSON.stringify([ { "id": 1, "name": "Alice Johnson", "email": "[email protected]", "age": 28, "role": "Developer", "skills": ["JavaScript", "React", "Node.js"], "active": true }, { "id": 2, "name": "Bob Smith", "email": "[email protected]", "age": 34, "role": "Designer", "skills": ["Figma", "CSS"], "active": true }, { "id": 3, "name": "Charlie Brown", "email": "[email protected]", "age": 22, "role": "Intern", "skills": ["Python"], "active": false }, { "id": 4, "name": "Diana Prince", "email": "[email protected]", "age": 31, "role": "Manager", "skills": ["Leadership", "Agile", "Scrum"], "active": true }, { "id": 5, "name": "Eve Wilson", "email": "[email protected]", "age": 26, "role": "Developer", "skills": ["Go", "Docker", "Kubernetes"], "active": true } ], null, 2); autoProcess(); } function escapeHtml(s) { return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); } function formatBytes(bytes) { if (bytes === 0) return '0 B'; const k = 1024, sizes = ['B', 'KB', 'MB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]; } function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2000); } input.addEventListener('keydown', e => { if (e.key === 'Tab') { e.preventDefault(); const start = input.selectionStart, end = input.selectionEnd; input.value = input.value.substring(0, start) + ' ' + input.value.substring(end); input.selectionStart = input.selectionEnd = start + 2; } }); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); }}); }, { threshold: 0.1 }); document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));