Put a live JSON table in your own page
The embed is the Visualizer with the input screen removed: a searchable, sortable table with
the stats sidebar, the pivot and the timeline, inside an iframe you size. Your page hands it
the data with one postMessage call. The data stays inside the frame, nothing is
written to the visitor's browser, and the embed page can request nothing but its own files.
Configure it below, then copy the snippet.
Live preview
Paste this into your page
Driving it from your own page
The embed answers postMessage, so your page's own controls can steer it: switch
to the pivot when the text starts comparing people, search for the row a paragraph is about,
or hide a column your readers do not need. Press these to drive the preview above and watch
what comes back.
The whole contract
Handing over the data
Wait for the embed's ready message, then post
{ type: 'jsonstudio:load', data } to the iframe's window with
https://jsonstudio.neorgon.com as the target origin. data is an
object, an array or a JSON string. Post it again whenever your data changes; the table
re-renders in place. The embed never reads the URL for data and never stores what it was sent.
URL settings
| view | table (default), pivot or tree. Pivot falls back to the table when the data has no period metrics to pivot. |
|---|---|
| title | A caption above the table. |
| toolbar | off removes the search bar and the view buttons; your page drives it instead. |
| stats | off removes the stats sidebar. |
| hide | Comma-separated column names to hide. |
| sort | col or col:desc. |
| pivot | user,metric. Either side may be blank; implies view=pivot. |
| chart | timeline shows the pivot as a chart. |
| fit | content grows with the data and posts height messages, instead of filling the iframe and scrolling inside it. |
| bg | Six-digit hex background, to blend with your page. |
Messages you can send
| jsonstudio:load | { data } |
|---|---|
| jsonstudio:view | { view: 'table' | 'pivot' | 'tree' } |
| jsonstudio:search | { q: 'text' } |
| jsonstudio:sort | { col: 'name', dir: 'asc' | 'desc' }, col: null clears |
| jsonstudio:columns | { hide: ['email'] }, the full list of hidden columns |
| jsonstudio:pivot | { user, metric, chart }, each optional |
| jsonstudio:state | ask it to report what it is showing |
Messages it sends back
Every message carries source: 'jsonstudio'. Types are ready,
loaded (mode, row count, group names, columns with their types, whether the
data can pivot), state after every command (view, search, sort, hidden columns,
visible rows, pivot selection), row when the visitor clicks one,
height with fit=content, and error. After your page
has sent its first message, replies go only to your page's origin.
What it will not do
The embed stores nothing, writes nothing into its URL, loads no analytics and has a Content
Security Policy that names no host but its own. A reader can verify that from the page
source of embed.html. It also cannot be restricted to your site: anyone may
embed it, the same as any public tool.