every-json

🌳 Every JSON

Every JSON is a premium, high-fidelity JSON visualization library designed for developers who need to explore complex data structures with elegance and ease.

🚀 Key Features

1. Multi-Mode Visualization

Explore your data from five distinct perspectives, each optimized for different types of JSON structures:

• 🌳 Tree: The classic hierarchical view with collapsible nodes.
• 📊 Table: Flattened view perfect for arrays of objects.
• 🎴 Cards: Visualizes collections as beautiful, scannable cards.
• ⌛ Timeline: Trace sequences and chronological events in your data.
• 🕸️ Graph: A high-performance SVG-based network visualization with pan, zoom, and auto-centering.

2. Deep Data Peeking

Unlike standard viewers, Every JSON provides recursive previews for nested objects and arrays. You can see what's inside a complex property without even expanding it.

3. Developer Tools & Configuration

• 🌓 Adaptive Dark Mode: Seamlessly switch between light and dark themes.
• 🏷️ Type Badges: Toggle-able type indicators (String, Number, Boolean, Object, Array) for instant data identification.
• 🔍 Global Search: Highlight matches across all visible nodes using Ctrl+K.
• 📥 Import JSON: Directly load .json files into the viewer.
• 📋 Smart Copy: Click any property value to copy it to your clipboard with a smooth toast notification.

🛠️ Usage

Quick Start

Initialize Every JSON in your container with a single call:

import EveryJSON from './src/index';

const data = {
  project: "EveryJSON",
  version: "1.0.0",
  features: ["Tree", "Graph", "Timeline"]
};

EveryJSON.render('#tree-container', data, {
  mode: 'tree',
  theme: 'dark',
  showTypes: true
});

Configuration Options

Option	Type	Description
mode	string	Initial view: 'tree', 'table', 'cards', 'timeline', 'graph'
showTypes	boolean	Show/hide data type badges
colors	object	Custom CSS variables for branding (e.g. --tree-accent)

🎥 Visual Gallery

Exploring Modes

Every JSON handles complex data structures gracefully across all rendering modes.

Interactive Graph Mode

The Graph mode provides a powerful way to visualize relationships with smooth interactions.

Tree Navigation

The Tree view is optimized for performance and clarity.

Graphs Navigation

Cards Navigation

Timeline Navigation

Dark Theme

🎨 Customizing the Experience

Every JSON is built with Vanilla CSS and Tailwind, making it extremely easy to style. You can override global variables to match your application's design language:

:root {
  --tree-accent: #3b82f6; /* Custom Blue */
  --tree-bg: #f8fafc;
}

Created with focus on premium aesthetics and developer productivity.