discoveryjs/discovery: Framework for Ad Hoc JSON Analysis & Serverless Dashboards

JSON has become the universal data interchange format, but developers still struggle with a persistent problem: how do you quickly analyze, explore, and share insights from arbitrary JSON without spinning up infrastructure, configuring databases, or building custom UIs from scratch? Whether you're debugging API responses, profiling bundle output, or exploring complex nested datasets, the friction between "I have this JSON" and "I understand this JSON" remains unnecessarily high.

Enter discoveryjs/discovery — a TypeScript framework purpose-built for ad hoc JSON data analysis and shareable server-less reports and dashboards. With 421 GitHub stars and an MIT license, it occupies a distinct niche: not a database, not a BI platform, but a lightweight, embeddable layer that transforms raw JSON into interactive, explorable views without backend dependencies. This article examines what discoveryjs/discovery actually does, where it fits in your toolkit, and how to start using it.

What is discoveryjs/discovery?

discoveryjs/discovery is an open-source framework maintained on GitHub at https://github.com/discoveryjs/discovery. Written primarily in TypeScript and licensed under MIT, it provides the foundation for building interactive data exploration interfaces directly on top of JSON sources. The project was last committed to on June 8, 2026, indicating active maintenance.

The framework's positioning is deliberately narrow and powerful: rather than attempting to be a general-purpose visualization library or a full analytics platform, discoveryjs/discovery focuses on the specific workflow of taking JSON data — often irregular, deeply nested, or schema-adjacent — and making it explorable through programmable views. It is designed to work server-lessly, meaning the resulting reports and dashboards can be shared as static artifacts without requiring running infrastructure.

The project sits at the intersection of several technical categories: data exploration tools, JSON utilities, and lightweight dashboard frameworks. Its closest conceptual relatives are tools that prioritize immediate interactivity over batch processing, and embeddability over standalone operation. The framework powers several notable downstream projects, including the JsonDiscovery browser extension and Statoscope, a webpack bundle analysis toolkit — evidence that its architecture supports real, production-grade use cases beyond simple demos.

For teams already working in TypeScript/JavaScript^{↗ Bright Coding Blog} ecosystems, discoveryjs/discovery offers a natural extension point: it speaks the same language as your application code and can consume the same JSON payloads your APIs already produce.

Key Features

Ad hoc JSON analysis without schema enforcement. The framework accepts JSON as-is, without requiring upfront schema definition or data transformation pipelines. This makes it ideal for exploratory work where the data structure may be unknown or variable.

Server-less report generation. Outputs from discoveryjs/discovery can be shared as standalone, self-contained reports. No server required, no deployment pipeline needed — just a file that renders interactively in any modern browser.

Programmable, composable views. Rather than offering fixed visualization types, the framework provides building blocks for constructing domain-specific views. This aligns with its use in projects like Statoscope, where webpack bundle analysis demands highly customized visual representations.

Browser extension integration. The JsonDiscovery project demonstrates that discoveryjs/discovery can be packaged as a browser extension (Chrome, Edge, Firefox), enabling JSON document exploration directly on GitHub pages or any served JSON endpoint.

TypeScript-first implementation. The codebase is written in TypeScript, providing type safety for developers extending the framework and ensuring compatibility with modern tooling chains.

Ecosystem integration. The framework is designed to work alongside complementary tools in the Discovery ecosystem: Jora (a data query language), Discovery CLI (build and serve utilities), and Jora CLI (command-line JSON processing). This modular architecture lets adopters pull in additional capabilities as needed rather than accepting a monolithic platform.

Use Cases

API response exploration and debugging. Backend developers frequently encounter large, nested JSON responses that are difficult to parse visually. discoveryjs/discovery can transform these into collapsible, queryable interfaces — more powerful than raw browser rendering without the overhead of importing into a database.

Build artifact analysis. Statoscope's use of the framework for webpack bundle analysis illustrates a compelling pattern: build tools output JSON (bundle statistics, dependency graphs), and discoveryjs/discovery provides the lens to understand that output. Similar applications exist for Metro bundles (as demonstrated by react^{↗ Bright Coding Blog}-native-bundle-discovery), Rollup, or Vite analysis plugins.

Performance profile visualization. CPUpro, another project built on discoveryjs/discovery, applies the framework to Chrome DevTools CPU profiles. This demonstrates the framework's flexibility — it can handle time-series hierarchical data, not just static document structures.

Documentation and reference sites. The CSS syntax reference and CSSWG spec drafts index show that discoveryjs/discovery scales to serve as a public documentation platform, generating navigable, searchable references from structured data sources.

Internal tooling and dashboards. Teams can build shareable internal reports — bundle size trends, API coverage matrices, test result summaries — without standing up dedicated dashboard infrastructure. The server-less output format means these can live in static hosting, version control, or even email attachments.

Installation & Setup

The framework is distributed via npm as @discoveryjs/discovery. Install it as you would any npm dependency:

npm install @discoveryjs/discovery

For browser extension use, install the JsonDiscovery extension directly from browser stores (Chrome Web Store, Firefox Add-ons, or Edge Add-ons).

For CLI-driven workflows, consider installing the complementary Discovery CLI tools:

npm install -g @discoveryjs/discovery-cli

The Discovery CLI provides serve and build commands for projects based on discoveryjs/discovery, handling development server setup and static site generation.

For command-line JSON querying without the full framework, Jora CLI is available separately:

npm install -g @discoveryjs/jora-cli

Project initialization workflow:

1. Create a project directory and initialize npm:

mkdir my-discovery-project && cd my-discovery-project
npm init -y

2. Install the core framework:

npm install @discoveryjs/discovery

3. (Optional) Install Discovery CLI for development server and build tooling:

npm install --save-dev @discoveryjs/discovery-cli

4. Create your entry point — typically a JavaScript/TypeScript file that configures data sources and view definitions, then builds to static output.

5. Use discovery-cli serve for development, discovery-cli build for production static files.

Note: The README does not provide exhaustive configuration examples. Developers should expect to consult the Discovery.js tutorials and source code of established projects like Statoscope for implementation patterns.

Real Code Examples

The provided README does not contain embedded code snippets. This reflects the current state of the project's documentation rather than a limitation of the framework itself. The following guidance is derived from documented project structures and ecosystem conventions.

Basic project structure (inferred from ecosystem projects):

A typical discoveryjs/discovery project defines data loading, view configuration, and build output. While exact API details require source consultation, the pattern follows this shape:

// config.js — illustrative structure based on ecosystem conventions
const { createConfig } = require('@discoveryjs/discovery');

module.exports = createConfig({
  // Data source: static JSON file, API endpoint, or generated data
  data: {
    type: 'json',
    source: './data/bundle-stats.json'
  },
  
  // View definitions — custom pages, queries, visualizations
  pages: [
    {
      name: 'overview',
      view: 'page-dashboard'  // Built-in or custom view component
    }
  ]
});

Jora query integration (from Jora documentation project):

The Jora query language integrates deeply with discoveryjs/discovery for data transformation. A query might look like:

// Jora query example — syntax from Jora ecosystem
$..modules.(name, size, reasons)  // Extract nested webpack module data

This query syntax is used within discoveryjs/discovery views to reshape JSON before rendering. The Jora Docs site, itself built on discoveryjs/discovery, serves as both documentation and interactive playground.

Browser extension context (JsonDiscovery):

When used as the JsonDiscovery extension, no explicit code is required from the user — the extension automatically detects JSON responses and injects the discoveryjs/discovery interface. For developers extending this behavior, the extension source provides the integration pattern.

Developers seeking more comprehensive examples should reference the quick start tutorial and the open-source implementations of Statoscope, CPUpro, and react-native-bundle-discovery.

Advanced Usage & Best Practices

Start with static JSON, evolve to dynamic sources. The framework handles both, but static files reduce complexity during initial development. Once views are stable, swap in API endpoints or build-generated data.

Leverage the Jora query language for data shaping. Rather than preprocessing JSON in separate scripts, express transformations as Jora queries within your discoveryjs/discovery configuration. This keeps data logic colocated with presentation logic and enables interactive query editing in development.

Study existing projects for architectural patterns. The README's "Built using Discovery.js" section is a curated list of production implementations. Statoscope's source is particularly instructive for complex, multi-page analytical applications. CPUpro demonstrates time-series visualization patterns. The CSS reference sites show content-heavy, documentation-oriented configurations.

Consider the CLI tooling early. While the core framework is usable directly, Discovery CLI's serve and build commands handle development conveniences (hot reload, path resolution) and production optimizations (asset bundling, path prefixing) that become essential for non-trivial projects.

Plan for deployment as static assets. The server-less output is a feature, not a limitation — embrace it. Host on GitHub Pages, Vercel, Netlify, or S3 without configuring runtime environments. This dramatically reduces operational burden for internal tools and shared reports.

Comparison with Alternatives

discoveryjs/discovery occupies a specific position: more structured than raw D3, more flexible than fixed-format JSON viewers, and lighter than full BI platforms. The trade-off is that it requires more upfront configuration than turnkey solutions — you define views rather than selecting from preset chart types. For teams with consistent JSON analysis needs and TypeScript competency, this trade-off yields reusable, domain-specific tooling.

FAQ

What license does discoveryjs/discovery use? MIT License — permissive for commercial and personal use.

Is discoveryjs/discovery actively maintained? Last commit was June 8, 2026, per repository data. The ecosystem shows ongoing project development.

Do I need a backend to use discoveryjs/discovery? No. Outputs are static and server-less by design.

Can I use discoveryjs/discovery with non-JSON data? The framework is JSON-native. Other formats require preprocessing to JSON.

Is there a hosted/cloud version? No documented hosted service. Self-hosted static deployment is the intended model.

How does this relate to Jora? Jora is a companion query language. discoveryjs/discovery provides the visualization framework; Jora handles data transformation.

What browsers are supported? Modern browsers (Chrome, Edge, Firefox confirmed via JsonDiscovery extension support).

Conclusion

discoveryjs/discovery solves a genuinely under-addressed problem: the gap between "I have JSON" and "I can explore and share insights from this JSON." It is not a database, not a charting library, and not a low-code BI tool — it is a framework for building focused, interactive data interfaces with minimal infrastructure.

The tool best serves developers and teams who: regularly work with complex JSON outputs (build tools, APIs, profiles); need to share analytical views without operational overhead; and are comfortable with TypeScript and programmatic configuration. The ecosystem of established projects — Statoscope, CPUpro, JsonDiscovery — provides both validation and reference implementations.

If your workflow involves staring at large JSON files, manually collapsing nodes in browser dev tools, or maintaining one-off scripts to summarize data, discoveryjs/discovery merits evaluation. Start with the quick start tutorial, examine how Statoscope structures its configuration, and prototype against your own data.

Explore the repository, read the source of established projects, and determine whether its model of programmable, server-less JSON analysis fits your needs: https://github.com/discoveryjs/discovery

For related approaches to data exploration in JavaScript ecosystems, see [INTERNAL_LINK: json-query-tools-comparison].