DEV Community: Imad Uddin

JSON to TOON — Reduce LLM API Costs by 30-60% With Token-Optimized Format

Imad Uddin — Thu, 09 Apr 2026 14:55:30 +0000

If you're feeding JSON into GPT-4, Claude, or Gemini — you're probably wasting tokens on whitespace and verbose keys.

TOON (Token-Optimized Object Notation) is a compact format designed to cut that overhead by 30-60%.

What TOON looks like

Standard JSON (verbose)

{
  "user_identifier": 12345,
  "first_name": "Alice",
  "last_name": "Smith",
  "account_status": "active",
  "subscription_tier": "premium"
}

TOON (compact)

uid:12345|fn:Alice|ln:Smith|status:active|tier:premium

Same data. Fraction of the tokens.

Why this matters for LLM costs

Model	Price	Impact
GPT-4o	~$5/1M input tokens	30-60% savings = significant
Claude Sonnet	~$3/1M input tokens	Same
Gemini 1.5	~$1.25/1M input tokens	Same

If you're processing thousands of records, the savings add up fast.

When to use TOON

✅ Sending structured data to LLMs for analysis
✅ RAG pipelines with large context windows
✅ Batch processing JSON records through AI APIs
❌ Not for APIs expecting standard JSON responses
❌ Not for human-readable config files

Convert your JSON

Use the free JSON to TOON converter — paste your JSON and get the token-optimized output immediately.

Full comparison with real cost calculations: JSON vs TOON — Complete Guide

How to Convert JSON to Excel — Python, Online Tool & No-Code Methods

Imad Uddin — Thu, 09 Apr 2026 14:54:29 +0000

Got JSON data you need in a spreadsheet? Here's how to get there.

Python with pandas (fastest)

import pandas as pd
import json

with open("data.json") as f:
    data = json.load(f)

df = pd.DataFrame(data)
df.to_excel("output.xlsx", index=False)
print("Done.")

Install deps first:

pip install pandas openpyxl

Handling nested JSON

Nested objects need flattening first:

from pandas import json_normalize

with open("data.json") as f:
    data = json.load(f)

df = json_normalize(data)  # flattens nested keys with dot notation
df.to_excel("output.xlsx", index=False)

Nested key address.city becomes column address.city in your spreadsheet.

Node.js option

const XLSX = require("xlsx");
const data = require("./data.json");

const ws = XLSX.utils.json_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "output.xlsx");

npm install xlsx

No-code option

The free JSON to Excel tool converts your JSON to a properly formatted .xlsx file in seconds — paste your JSON or upload a file, click convert, download.

No Python, no Node, no setup.

How to Convert JSON to JSONL (JSON Lines) — With Code Examples & Free Tool

Imad Uddin — Thu, 09 Apr 2026 14:53:05 +0000

JSONL (JSON Lines) puts one JSON object per line — no wrapping array, no commas between records. It's the standard format for LLM training data, log streaming, and big data pipelines.

JSON → JSONL

Python

import json

with open("data.json") as f:
    records = json.load(f)  # expects a JSON array

with open("data.jsonl", "w") as out:
    for record in records:
        out.write(json.dumps(record) + "\n")

jq -c '.[]' data.json > data.jsonl

The -c flag outputs compact (single-line) JSON. .[] iterates array items.

JSONL → JSON (reverse)

Python

import json

records = []
with open("data.jsonl") as f:
    for line in f:
        records.append(json.loads(line.strip()))

with open("data.json", "w") as out:
    json.dump(records, out, indent=2)

When to use JSONL

Use case	Why JSONL wins
LLM training data	One record per line = easy streaming
Log files	Append without modifying existing JSON
Big data (Spark, BigQuery)	Line-by-line processing = no full load
API streaming	Send records as they're ready

No-code conversion

Use the free JSON to JSONL tool — paste or upload your JSON array and download the JSONL file instantly. The JSONL to JSON tool handles the reverse.

6 Best JSON Editor Libraries for Angular in 2026

Imad Uddin — Thu, 09 Apr 2026 14:52:07 +0000

Angular's ecosystem has specific requirements — reactive forms, TypeScript, zone.js, AOT compilation. These 6 libraries actually meet them.

The libraries

1. ngx-json-editor
Wrapper around the popular JSON Editor library. Full tree/code/form/text modes.

Good Angular CLI integration
Two-way binding support

2. Monaco Editor (via ngx-monaco-editor)
VS Code quality inside Angular. Schema validation, autocomplete, diff view.

Heavy but powerful — lazy load it

3. Angular JSON Schema Form (@ajsf/core)
Generates forms from JSON Schema. Integrates with Angular reactive forms.

Best for: dynamic admin forms

4. ngx-codemirror
CodeMirror 5 wrapper for Angular. Lightweight, customizable.

5. @ng-select/ng-select + custom
Not a dedicated JSON editor but works for simple key-value editing scenarios.

6. react-jsonschema-form port
Community Angular port — handles complex schemas but maintenance varies.

What to check before picking

✅ ControlValueAccessor support (reactive forms)
✅ Zone.js compatibility
✅ AOT compilation support
✅ Bundle impact (run ng build --stats-json to check)

Full guide with Angular 15+ examples: 6 Best JSON Editor Libraries for Angular

7 Best JSON Editor Libraries for React in 2026 (With Bundle Size Notes)

Imad Uddin — Thu, 09 Apr 2026 14:51:17 +0000

Need JSON editing inside a React app? Here's what's worth using in 2026, with bundle sizes and honest tradeoffs.

The libraries

1. @monaco-editor/react
The VS Code editor inside React. Full syntax highlighting, schema validation, TypeScript support.

Bundle: ~2MB (lazy load it)
Best for: admin panels, dev tools

import Editor from "@monaco-editor/react";
<Editor height="400px" language="json" value={JSON.stringify(data, null, 2)} />

2. react-json-view
Collapsible tree view for reading and editing JSON. Lightweight and clean.

Bundle: ~150KB
Best for: dashboards, data inspection

3. react-json-editor-ajrm
Form-style JSON editor with validation. Good for user-facing config editors.

4. @rjsf/core (React JSON Schema Form)
Generates full forms from JSON Schema. Best when you want form inputs, not raw JSON editing.

Best for: dynamic form generation

5. json-edit-react
Newer library, simple API, decent tree editor with inline editing.

6. react-ace
Ace editor wrapper. Lighter than Monaco, still full-featured.

7. CodeMirror 6 (via @uiw/react-codemirror)
Highly customizable, modular, excellent performance.

Best for: custom-built editors

Quick pick guide

Need	Library
Full IDE experience	Monaco
Lightweight tree view	react-json-view
Form from schema	@rjsf/core
Custom editor	CodeMirror 6

Full comparison with React 18 examples: 7 Best JSON Editor Libraries for React

7 Best JSON Editor Extensions for VS Code in 2026

Imad Uddin — Thu, 09 Apr 2026 14:50:17 +0000

VS Code's built-in JSON support is decent. These 7 extensions make it exceptional.

The extensions

1. Prettier
Enforces consistent formatting across your whole team. Essential if multiple devs touch the same JSON configs.

2. JSON Tools
Adds sorting, minification, and format conversion (JSON → XML, YAML, CSV). Right-click menu integration.

3. Error Lens
Surfaces JSON errors inline, right on the line where they happen — not just in the Problems panel.

4. JSON Schema Store
Autocomplete based on 600+ public schemas — package.json, tsconfig.json, AWS CloudFormation, GitHub Actions, and more.

5. Paste JSON as Code
Paste any JSON and instantly generate TypeScript interfaces, Python dataclasses, Go structs, and more.

6. Rainbow Brackets
Color-codes matching bracket pairs. Lifesafe for deeply nested JSON structures.

7. JSON Crack (via browser)
Visualizes JSON as an interactive node graph. Great for understanding large or complex structures.

Install any of these

Ctrl + Shift + X → search the extension name → Install

Built-in VS Code JSON tips

Format document: Alt + Shift + F
Fold all sections: Ctrl + K, Ctrl + 0
Enable schema: add $schema key to your JSON file

Full review and setup guide: 7 Best JSON Editor Extensions for VS Code

9 Best Free JSON Editors for Windows in 2026

Imad Uddin — Thu, 09 Apr 2026 14:49:13 +0000

A bad JSON editor turns a 5-minute fix into an hour of debugging. Here's what actually works on Windows.

Top picks

1. VS Code — Best overall

Built-in JSON validation and syntax highlighting
Auto-format with Alt + Shift + F
Schema validation via JSON Schema Store (600+ schemas)
Extensions: Prettier, JSON Tools, Error Lens

2. Notepad++ — Best lightweight option

Sub-second launch time
JSTool plugin for formatting
Portable — runs from USB, no install needed
Good for quick edits on restricted systems

3. IntelliJ IDEA — Best for Java/backend devs

Deep JSON support built-in
Schema-aware autocomplete
Integrated with project files and REST client

4. Sublime Text — Fast and extensible

Pretty JSON package for formatting
Handles large files well

5. JSONBuddy — Windows-only dedicated editor

Full JSON Schema editor
Grid view for tabular JSON data
Best for non-developers who need a GUI

Quick comparison

Editor	Best for	File size limit
VS Code	Developers	Large
Notepad++	Quick edits	Medium
IntelliJ	Java/backend	Large
JSONBuddy	GUI users	Medium
Sublime Text	Power users	Large

Full ranked review with performance benchmarks: 9 Best JSON Editors for Windows

After editing, use the free JSON Merger to combine your files or the JSON Splitter to break large ones apart.

How to Format JSON in Notepad++ — Plugin Setup & Keyboard Shortcut Guide

Imad Uddin — Thu, 09 Apr 2026 14:47:51 +0000

Minified JSON is unreadable. One plugin and one keyboard shortcut fixes that in Notepad++.

Step 1: Install Notepad++ (if you haven't)

Download from notepad-plus-plus.org. Run the installer — under a minute.

Step 2: Install the JSTool plugin

Open Notepad++
Go to Plugins → Plugins Admin
Search for JSTool
Check the box → click Install
Restart Notepad++

Step 3: Format your JSON

Open or paste your JSON into Notepad++
Select all: Ctrl + A
Go to Plugins → JSTool → JSFormat
Done — your JSON is now indented and readable

Optional: Set a keyboard shortcut

Go to Settings → Shortcut Mapper → Plugin commands → find JSFormat → assign Ctrl + Alt + M or whatever you prefer.

What JSTool does

Formats minified JSON into readable indented output
Basic syntax validation
Works on JavaScript too

Troubleshooting

Problem	Fix
JSTool not in menu after install	Restart Notepad++ completely
No color highlighting	Language menu → select JSON
Plugin missing from search	Update Notepad++ to latest version

Full setup guide with screenshots and tips: How to Format JSON in Notepad++

Need to merge or split JSON files after formatting? Use the free JSON Merger — no code required.

How to Add an Image to a JSON Object — 3 Methods with Examples

Imad Uddin — Thu, 09 Apr 2026 14:46:39 +0000

There's no native "image type" in JSON. But there are three practical ways to include image data — and each has a clear use case.

Method 1: URL reference (most common)

{
  "id": 1,
  "name": "Product A",
  "image_url": "https://cdn.example.com/images/product-a.jpg"
}

✅ Small payload, cacheable, CDN-friendly
❌ Requires internet access, image host must stay up

Use this for: REST APIs, e-commerce, any web app

Method 2: File path (local apps)

{
  "name": "Avatar",
  "image_path": "./assets/images/avatar.png"
}

✅ No internet needed, fast local access
❌ Path breaks on other machines, not portable

Use this for: Desktop apps, game engines, bundled assets

Method 3: Base64 encoding (self-contained)

// Convert image to base64 in Node.js
const fs = require("fs");
const base64 = fs.readFileSync("avatar.png").toString("base64");

const json = {
  name: "Avatar",
  image_data: `data:image/png;base64,${base64}`
};

{
  "name": "Avatar",
  "image_data": "data:image/png;base64,iVBORw0KGgoAAAANS..."
}

✅ Fully self-contained, works offline
❌ Bloats payload significantly, bad for many images

Use this for: Email templates, offline apps, single-file exports

Quick decision guide

Scenario	Method
Public web API	URL
Desktop/mobile app	File path
Offline / embedded	Base64

Full guide with best practices: How to Add an Image in JSON

How to Create a JSON File in Java — Jackson, Gson & JSON-P Examples

Imad Uddin — Thu, 09 Apr 2026 14:45:51 +0000

Three solid libraries, three different use cases. Here's the fastest path to creating JSON files in Java.

Option 1: Jackson (most popular)

<!-- pom.xml -->
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.15.2</version>
</dependency>

import com.fasterxml.jackson.databind.ObjectMapper;
import java.io.File;
import java.util.*;

public class CreateJson {
    public static void main(String[] args) throws Exception {
        ObjectMapper mapper = new ObjectMapper();

        Map<String, Object> student = new LinkedHashMap<>();
        student.put("name", "Alice");
        student.put("age", 21);
        student.put("courses", List.of("Math", "CS"));

        mapper.writerWithDefaultPrettyPrinter()
              .writeValue(new File("student.json"), student);

        System.out.println("JSON file created.");
    }
}

Option 2: Gson (lightweight, Google)

import com.google.gson.*;
import java.io.*;

Gson gson = new GsonBuilder().setPrettyPrinting().create();
JsonObject obj = new JsonObject();
obj.addProperty("name", "Alice");
obj.addProperty("age", 21);

try (Writer writer = new FileWriter("student.json")) {
    gson.toJson(obj, writer);
}

Which to pick?

Library	Best for
Jackson	Large projects, Spring Boot, complex types
Gson	Simple projects, Android, quick scripts
JSON-P	Java EE / Jakarta EE standard compliance

Full beginner-to-advanced guide: How to Create a JSON File in Java

How to Read a JSON File in JavaScript — Fetch API, Node.js & ES6 Imports

Imad Uddin — Thu, 09 Apr 2026 14:44:39 +0000

The approach depends entirely on where your code runs. This is the part that trips up most beginners.

In the Browser — use Fetch API

async function loadData() {
  try {
    const response = await fetch('./data.json');
    if (!response.ok) throw new Error(`Status: ${response.status}`);
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error("Failed to load JSON:", err.message);
  }
}

loadData();

⚠️ Browsers can't read files directly from disk. The JSON file must be served via a web server or local dev server.

In Node.js — use fs module

const fs = require("fs");

const raw = fs.readFileSync("./data.json", "utf8");
const data = JSON.parse(raw);
console.log(data);

Async version (recommended for large files):

const fs = require("fs/promises");

async function load() {
  const raw = await fs.readFile("./data.json", "utf8");
  const data = JSON.parse(raw);
  console.log(data);
}

ES6 static import (Node 17.5+ / bundlers)

import data from './data.json' assert { type: 'json' };
console.log(data);

Common errors

Error	Cause
`SyntaxError: Unexpected token`	Malformed JSON
`Failed to fetch`	File not on a server
`ENOENT: no such file`	Wrong file path in Node

Full guide with large file handling and advanced patterns: How to Read a JSON File in JavaScript

Need to merge or split JSON files? Try the free JSON Merger and JSON Splitter tools.

JSON vs XML vs YAML — Which Format Should You Use in 2026?

Imad Uddin — Thu, 09 Apr 2026 14:43:19 +0000

Three formats. All widely used. All solving different problems.

Quick syntax comparison

JSON

{
  "name": "Imad",
  "age": 22,
  "skills": ["Python", "JavaScript"]
}

XML

<user>
  <name>Imad</name>
  <age>22</age>
  <skills>
    <skill>Python</skill>
    <skill>JavaScript</skill>
  </skills>
</user>

YAML

name: Imad
age: 22
skills:
  - Python
  - JavaScript

When to use each

Format	Best for
JSON	REST APIs, web apps, data exchange
XML	Enterprise systems, SOAP, banking, EDI
YAML	DevOps configs, Kubernetes, Docker Compose, CI/CD

Performance

JSON parses fastest in browsers and most runtimes
YAML is slowest to parse (indentation-based, complex spec)
XML has the largest payload size due to verbose tags

Schema & validation

XML → XSD (most mature)
JSON → JSON Schema (widely used, growing fast)
YAML → borrows JSON Schema (no dedicated standard)

Bottom line

Building a REST API → JSON. Enterprise integration or document-heavy workflows → XML. Infrastructure config → YAML.

Full comparison with real-world examples: JSON vs XML vs YAML — Complete Guide