{
  "examples": {
    "hero": {
      "title": "Examples Showcase",
      "subtitle": "See how NoJS directives replace boilerplate and bring layouts to life using only semantic HTML attributes."
    },
    "cat1": { "title": "State & Binding", "subtitle": "Reactive state management with automatic DOM updates — no manual wiring needed." },
    "cat2": { "title": "Conditionals & Loops", "subtitle": "Control rendering with declarative attributes. Show, hide, iterate, and branch — all in HTML." },
    "cat3": { "title": "Data Fetching", "subtitle": "Built-in HTTP verbs with loading states, error handling, and caching — zero boilerplate." },
    "cat4": { "title": "Routing & Templates", "subtitle": "Client-side navigation and reusable template composition without a build step." },
    "counter": {
      "badge": "Interactive",
      "name": "Simple Counter",
      "desc": "Local reactive counter. Updates automatically when variables change. Pauses execution and highlights states cleanly."
    },
    "binding": {
      "badge": "Two-way",
      "name": "Live Input Binding",
      "desc": "Bind an input to state with <code>model</code> and render it elsewhere with <code>bind</code>. Changes propagate instantly."
    },
    "computed": {
      "badge": "Derived",
      "name": "Computed Values",
      "desc": "Define derived values with <code>computed</code> and <code>expr</code>. They recalculate automatically when dependencies change."
    },
    "search": {
      "badge": "Loops & Filters",
      "name": "Filtered Search List",
      "desc": "Filter array items interactively using two-way input bindings (<code>model</code>) and loops (<code>foreach</code>)."
    },
    "todo": {
      "badge": "CRUD",
      "name": "Todo List",
      "desc": "Add and remove items with <code>foreach</code>, <code>on:click</code>, and array methods. Full CRUD in pure HTML."
    },
    "switchCase": {
      "badge": "Branching",
      "name": "Switch / Case",
      "desc": "Render different content based on a value using <code>switch</code>, <code>case</code>, and <code>default</code> — like a native switch statement."
    },
    "fetch": {
      "badge": "HTTP / Fetching",
      "name": "API Fetcher with Skeleton",
      "desc": "Fetch and display API data. The designated skeleton element holds layout spacing and vanishes automatically when data arrives."
    },
    "formPost": {
      "badge": "Forms",
      "name": "Form Submission",
      "desc": "Submit form data with <code>post</code> and <code>body</code>. Combine with <code>model</code> for reactive form fields and inline validation."
    },
    "pagination": {
      "badge": "Pagination",
      "name": "Load More List",
      "desc": "Paginate API results with <code>get-trigger</code>, <code>get-page</code>, and <code>get-insert</code>. Append new items on button click."
    },
    "query": {
      "badge": "HTTP / QUERY",
      "name": "Search with QUERY",
      "desc": "Submit complex search filters with <code>query</code> — a safe, cacheable HTTP read that carries a request body (RFC 10008). Form fields become the body and results render reactively; no CSRF token is added."
    },
    "router": {
      "badge": "SPA",
      "name": "Basic Router",
      "desc": "Define routes with <code>route</code> and render them into <code>route-view</code>. Active links highlight with <code>route-active</code>."
    },
    "templates": {
      "badge": "Composition",
      "name": "Reusable Templates",
      "desc": "Compose UI with <code>use</code> and <code>&lt;slot&gt;</code>. Pass data via <code>state</code> — like components, but just HTML templates."
    },
    "dynamicStyles": {
      "badge": "Styling",
      "name": "Dynamic Classes & Styles",
      "desc": "Toggle classes with <code>class-*</code> and set inline styles with <code>style-*</code>. Both react to state changes automatically."
    }
  }
}