⚡ Playground
Left: Send JSON → real API → receive JSON | Right: Send TOON → real API → receive TOON | All calls hit your backend
Input · JSON
POST /api/toon/send⬇
Response · JSON (round-tripped via real API)
Input · TOON
POST /api/toon/receive⬇
Response · TOON (round-tripped via real API)
📊 Size & Speed Benchmark
100 rows × 6 columns — real API calls to /api/toon/send & /api/toon/receive
🧠 How toonkit Works
Toggle between visual flow and code — see what happens behind the scenes
Supported Types
| Code | Type | Example |
|---|
| n | number | 25 |
| s | string | Manoj |
| b | boolean | true |
| nl | null | null |
| j | JSON object | {"a":1} |
| a | array | [1,2,3] |
📤 POST /api/toon/send — JSON → TOON (real API)
1
Client sends JSON via fetch()
Your frontend POST's JSON to /api/toon/send
await fetch("/api/toon/send", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ employees: [...] })
});
2
Server parses JSON & calls sendToon()
Next.js API route reads the body, passes to sendToon()
const json = await req.json();
const toonString = sendToon(json);
3
toonkit builds schema + flattens rows
detectType() infers types → schema header → CSV-like rows
employees[2]{id:n,name:s,salary:n}:
1,Riya,90000
2,John,80000
4
Server responds with TOON string
Content-Type: text/plain — compact payload sent back to client
return new Response(toonString, {
headers: { "Content-Type": "text/plain" }
});
📥 POST /api/toon/receive — TOON → JSON (real API)
1
Client sends TOON string via fetch()
POST TOON text to /api/toon/receive
await fetch("/api/toon/receive", {
method: "POST",
headers: { "Content-Type": "text/plain" },
body: toonString
});
2
Server reads text & calls receiveToon()
Next.js API route reads text body, passes to receiveToon()
const text = await req.text();
const data = receiveToon(text);
3
toonkit parses schema → casts each row
Extracts headers/types → splits CSV rows → castValue() for correct JS types
"1" → Number(1) // type "n"
"Riya" → "Riya" // type "s"
"true" → true // type "b"
4
Server responds with JSON
NextResponse.json() sends back the fully typed object
return NextResponse.json(data);
// { employees: [{ id: 1, name: "Riya", ... }] }