Json -a
Open Workspace
home / how-to-use

How to Use Json-a

A complete guide to navigating the Json-a workspace, mapping data pipelines, and exporting assets.

Getting Started

The Json-a workspace is divided into two primary zones: the JSON Gutter Editor on the left, and the Interactive Tabbed Tools on the right.

To begin, paste your raw data into the editor. If you do not have JSON on hand, click the Demo Data button in the top navigation bar to populate the workspace with a rich dataset containing objects, metrics, arrays, and configurations.

1. JSON Editor & Formatter

The editor validates syntax in real-time. If there is a syntax error (such as a trailing comma, missing quote, or open bracket), the bottom console will turn red and report the exact parsing error and line index:

  • Format (Beautify): Click "Format" in the editor header or use the shortcut to clean indentations to 2 spaces.
  • Minify: Click "Minify" to strip all line breaks and whitespace, preparing payloads for compact HTTP transmissions.
  • Uploading Files: Click "Upload JSON" in the header to parse local .json documents directly into your browser.

2. Tree view & JSON Path Finder

The Tree & Search tab displays nested JSON structures. Clicking branch arrows expands and collapses objects and arrays:

  • Visual Indicators: Objects display their key counts in curly braces (e.g. 3), and arrays display their length in brackets (e.g. [6]).
  • JSON Path Extraction: Hover over any tree element to reveal a "Copy Path" button. Clicking this copies the exact JavaScript dot or bracket accessor notation (e.g. root.metrics[0].requests) directly to your clipboard.
  • Search Bar: Type keys or values into the search field. The tool lists up to 20 matched segments with their paths and values. Click any result to copy its path.

3. Generating Code and Schemas

Switch to the Code Converters tab to map JSON schemas into strongly-typed language interfaces and representations:

  1. Select a target from the horizontal language selector (TypeScript, OpenAPI, YAML, Java, Kotlin, C#, Rust, Go, C++, Swift, Python).
  2. Adjust configuration options in the settings bar, such as custom Root Class Names or schema formats.
  3. Click "Copy Code" to copy the generated data model structures.

4. Plotting Data to SVG Charts

The Data Chart tab scans your JSON document for arrays of objects. To plot a dataset:

  1. Select a target array from the Data Source dropdown.
  2. Choose the property to display on the X-Axis (Label) (e.g., month, label).
  3. Choose the numeric property to graph on the Y-Axis (Value) (e.g., requests, latency).
  4. Toggle between Bar, Line, or Area charts. The SVG will render instantly with scaled grid lines and mouse-hover details.

5. Table Grid & Excel Spreadsheet Export

The Grid & Excel tab presents arrays in a spreadsheet table. Use the filter field to query rows:

  • Download CSV: Triggers a standard comma-separated values download compatible with all CLI tools and database imports.
  • Export to Excel: Generates a comma-delimited export file embedded with a UTF-8 BOM. Double-clicking this file opens Excel directly with preserved strings, dates, and column indexes.

6. Query Sandbox (jq & JSONPath)

The Query Sandbox tab offers inline filtering using either standard JSONPath (e.g., $.systemInfo.engine) or jq selectors (e.g., .metrics[] | select(.requests > 3000)).

  • Chaining with Pipes (|): Perform multi-stage mapping. For example, .metrics[] | .requests will map over the metrics array and extract only the list of request integers.
  • Filtering with select(): Filter objects based on conditional comparisons like >, <, ==, and !=.
  • Applying back to Editor: Once you've filtered down a huge payload to your desired subset, click Apply to Editor to replace the main workspace payload with the filtered results.

7. Side-by-Side JSON Diff

The JSON Diff tab offers structural comparisons of two payloads:

  • Loading current workspace: Click "Load Editor -> Original" to populate the left panel with the JSON currently in your main editor.
  • Structural Highlighting: Added lines are highlighted in green (right panel), and removed lines are highlighted in red (left panel). Structural formatting is automatically normalized to prevent spacing diff anomalies.

8. Smart Object Import (Java, Python, JS)

If you've copied a data representation from console logs, config properties, or language files, you don't need to format them manually. Paste them into the main editor and click the Convert Object button in the header. The parser will attempt to clean and normalize:

  1. JavaScript Object Literals: Resolves unquoted keys, single quotes, and basic JS expressions.
  2. Python Dictionaries: Maps keywords like True, False, and None to standard JSON boolean/null types.
  3. Java Map toString outputs: Fixes unquoted keys/values and translates maps formatted with = (e.g. {id=123, val=ok}) into standard JSON.
  4. Java Properties: Translates key=value configuration lines into structured key-value JSON objects.

Frequently Asked Questions

Is my data secure?

Yes, completely. Json-a uses local JavaScript compilers. No servers are contacted during formatting, searching, charting, or code conversions. Your files and datasets remain strictly on your local disk.

Can I import large datasets?

Yes. The tree views and grid systems are engineered for efficiency. However, payloads exceeding 25MB might experience rendering delays depending on your browser's JS engine capabilities.

Why are some keys missing in my chart selectors?

The Y-Axis dropdown displays keys containing numerical data. If a key is parsed as a string (e.g., "1200" instead of 1200), it won't be listed as a metric axis candidate. Format the values as numbers in your JSON.