Simple Object
JSON:
{
"name": "My Site",
"id": "site_123",
"active": true
}
TOON:
name: My Site
id: site_123
active: true
Nested Object
JSON:
{
"site": {
"id": "site_abc",
"name": "Portfolio",
"settings": {
"theme": "dark",
"plugins": ["plugin1", "plugin2"]
}
}
}
TOON:
site
id: site_abc
name: Portfolio
settings
theme: dark
plugins
- plugin1
- plugin2
Array
JSON:
{
"pages": [
{ "id": "page_1", "title": "Home" },
{ "id": "page_2", "title": "About" }
]
}
TOON:
pages
-
id: page_1
title: Home
-
id: page_2
title: About
Complex Site Structure
JSON:
{
"id": "site_complex",
"name": "E-Commerce Site",
"pages": [
{
"id": "page_1",
"name": "Home",
"components": [
{
"id": "comp_1",
"type": "hero",
"props": {
"title": "Welcome",
"subtitle": "Shop now",
"titleFont": "Playfair Display"
}
}
]
}
]
}
TOON:
id: site_complex
name: E-Commerce Site
pages
-
id: page_1
name: Home
components
-
id: comp_1
type: hero
props
title: Welcome
subtitle: Shop now
titleFont: Playfair Display