DEV Community

Cover image for Converting Any JSON to Tables: Introducing jsone
MUMMAREDDY MOHAN REDDY
MUMMAREDDY MOHAN REDDY

Posted on

Converting Any JSON to Tables: Introducing jsone

Converting Any JSON to Tables: Introducing jsone

The Problem

You're debugging an API response. The JSON is sprawled across your terminal. You copy it to a JSONLint website. It's validated, but you can't understand the structure. You need to see it as a table.

Or you're working with nested data structures. You need to export to CSV for your manager. You manually flatten it. Painful.

Or you're building a data pipeline. You need to transform JSON files across your team. Everyone's using different tools.

Sound familiar?

The Solution: jsone

Say hello to jsone — an open-source tool that converts any JSON structure into human-readable tables. No installation. No signup. No dependencies.

Think of it as the Markdown of structured data — simple, universal, and works everywhere.

What Makes jsone Different?

1. Universal JSON Support

  • Single objects → rendered as key-value table
  • Arrays → rendered as rows
  • Nested data → automatically flattened
  • Mixed structures → intelligently handled

2. Zero Setup Required

  • Web viewer: https://jsone-viewer.vercel.app/ (open and paste)
  • npm package: npm install @mummareddy_mohanreddy/jsone-core
  • One function: tableFromJsone(data)
  • Zero dependencies in the core

3. Multiple Export Formats

  • CSV for Excel
  • .jsone format with metadata
  • JSON view with tree explorer
  • Search and sort built-in

4. Open Source

  • 100% free
  • MIT licensed
  • Contributions welcome
  • Active development

Real-World Examples

Example 1: User Data (Array of Objects)

[
  { "id": 1, "name": "Alice", "email": "alice@example.com", "role": "admin" },
  { "id": 2, "name": "Bob", "email": "bob@example.com", "role": "user" },
  { "id": 3, "name": "Charlie", "email": "charlie@example.com", "role": "user" }
]
Enter fullscreen mode Exit fullscreen mode

jsone renders it as:

id name email role
1 Alice alice@example.com admin
2 Bob bob@example.com user
3 Charlie charlie@example.com user

Example 2: Deeply Nested Data

{
  "user_id": 123,
  "orders": [
    {
      "order_id": "ORD-001",
      "items": [
        { "product": "Laptop", "qty": 1 },
        { "product": "Mouse", "qty": 2 }
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

jsone intelligently flattens and displays it as a clean table!

Getting Started

Option 1: Web Viewer (No Installation)

  1. Go to https://jsone-viewer.vercel.app/
  2. Upload your JSON
  3. View as table, tree, or search
  4. Export as CSV

Option 2: npm Package

npm install @mummareddy_mohanreddy/jsone-core
Enter fullscreen mode Exit fullscreen mode
import { tableFromJsone } from '@mummareddy_mohanreddy/jsone-core';

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const table = tableFromJsone(data);
console.log(table.rows);    // Array of rows
console.log(table.columns); // Column definitions
Enter fullscreen mode Exit fullscreen mode

Use Cases

API Response Debugging - Paste response JSON, instantly see structure

Data Pipeline Processing - Transform JSON files in batch scripts

Data Analysis - Explore large datasets, filter and sort

Team Collaboration - Share data structures, export for spreadsheets

Technical Architecture

jsone is zero-dependency by design:

  • ⚡ Instant installation
  • 🔒 No supply chain risks
  • 📦 Tiny bundle (~5KB minified)
  • 🎯 Works everywhere (browser, Node.js, edge)

Roadmap

Now:

  • ✅ Web viewer live
  • ✅ npm package published
  • ✅ Open source with CI/CD

Coming Soon:

  • JSON Repair tool (fix broken JSON)
  • Minify/Pretty formatter
  • Diff tool for comparing JSONs
  • YAML ↔ JSON conversion
  • VS Code extension

Get Started

Web: https://jsone-viewer.vercel.app/

npm: npm install @mummareddy_mohanreddy/jsone-core

GitHub: https://github.com/MohanreddyMummareddy/jsone

Questions? Drop a comment or open an issue on GitHub. We'd love your feedback! 🚀

Top comments (0)