JSON Preview for VS Code
Open JSON and JSONC files as a read-only table beside your editor, with nested navigation and live updates as you edit.
Learn moreJSOC Grid
A headless engine that dynamically generates DataGrid configurations at runtime. Built for dynamic and unknown JSON structures.
Framework Agnostic
One engine. Every framework.
The Core Engine generates framework-agnostic schema from unknown JSON. Framework adapters expose it natively — hooks for React, composables for Vue, utilities for Vanilla JS. Here shown powering AG Grid across all three:
Unknown JSON Payload
Core Engine
@jsoc/grid-core
Basic.tsx
import { useGridStoreSelector } from "@jsoc/react-grid";
import { useGridStore } from "@jsoc/react-grid-ag";
import { AgGridReact } from "ag-grid-react";
// ...
// create grid store for managing schema
const gridStore = useGridStore(data);
const activeSchema = useGridStoreSelector(gridStore, (gridStore) =>
gridStore.getActiveSchema(),
);
// ...
// render the grid
<AgGridReact key={activeSchema.id} {...activeSchema.config} />Headless UI
Integrate your favourite UI library
JSOC Grid ships no custom HTML or CSS — you own the UI. The generated schema converts into native configurations with the help of UI plugins. Complete catalog of UI plugins can be found here.
AG Grid Integration
Basic.tsximport { basicJSON as data } from "@jsoc/grid-examples-core";
import { useGridStoreSelector } from "@jsoc/react-grid";
import { useGridStore } from "@jsoc/react-grid-ag";
import { AgGridReact } from "ag-grid-react";
export default function BasicExample() {
const gridStore = useGridStore(data);
const activeSchema = useGridStoreSelector(gridStore, (gridStore) =>
gridStore.getActiveSchema(),
);
return (
<AgGridReact key={activeSchema.id} {...activeSchema.config} />
);
}
Built for the dynamic, not the static
If your API schema is fixed and known, standard static configurations are recommended. JSOC Grid is specifically designed for scenarios where the data shape is unpredictable:
Unknown API Responses
Display data from APIs where the response schema is not known in advance, without any manual column definition.
Rapid Prototyping
Instantly visualize API data on the UI during early development stages when API designs are frequently changing.
Data Viewer Tools
The perfect underlying engine for building JSON file viewers, database inspection tools, or API response explorers.
Built with JSOC Grid
These extensions use JSOC Grid to turn unknown JSON structures into practical table previews in the tools developers already use.
Want to see or build a tool powered by JSOC Grid?
JSOC Grid turns unknown JSON structures into practical table previews. Get started in minutes, or head to the repo to talk through your use case.