hasnat.dev
← cd ../#projects
#Next.js 16#React 19#@toon-format/toon#Shadcn UI#Google Analytics#Microsoft Clarity#SSG

JSON to TOON

Free converter that reduces LLM token costs by 30-60% with TOON serialization

Full Stack Developer·Aug 2024 – ongoing·↗ live

Overview

jsontotoon is a client-side developer utility and format conversion platform that transforms JSON data into TOON (Token-Oriented Object Notation)—a compact serialization format designed to reduce LLM API token consumption by 30–60%. Operating entirely within the browser with zero data transmission, the tool supports bidirectional conversion, real-time token savings statistics, conversion history, customizable delimiters, and official SDK packages across JavaScript/TypeScript, Python, Go, and PHP.

The Problem & Challenges

While the core client-side converter functioned well, the application needed a robust content and infrastructure layer to drive organic adoption and ensure high performance:

  • Organic Developer Reach: The site needed an SEO-optimized technical blog featuring proper author attribution and specification guides to attract developers searching for LLM optimization techniques.
  • Runtime Compute Overhead: Supporting information pages (About, FAQ, Contact, Privacy, Terms) and blog archives relied on redundant runtime data fetching that degraded load predictability.
  • Analytics Visibility: The team lacked quantitative and behavioral visibility into how developers interacted with the conversion tool and its documentation.
  • AI Crawler Efficiency: AI answer engines and crawlers needed instant access to site context and social share previews without incurring request-time compute costs.

Solution & Architecture

I engineered a high-speed static content layer paired with deep analytics integrations and edge-rendered discovery assets:

  • Dynamic Blog with Author Attribution: Built a dynamic, SEO-optimized blog publishing system featuring structured author attribution, specification guides, and category filtering.
  • Static Site Generation (SSG) Architecture: Migrated blog posts and supporting content pages (About, FAQ, Contact, Privacy, Terms) to full Static Site Generation, removing redundant Incremental Static Regeneration (ISR) configuration for instant, predictable loading.
  • Pre-Rendered AI & Social Assets: Pre-rendered the /llms.txt AI discovery route and dynamic Open Graph image generation at build time, allowing crawlers and social share previews to be served instantly from the edge without executing runtime application logic.
  • Dual Analytics Integration: Integrated Google Analytics alongside Microsoft Clarity to capture comprehensive quantitative usage metrics and interactive user behavioral heatmaps.
  • UI/UX Sitewide Polish: Executed targeted UI consistency enhancements across the interactive converter tool and all supporting documentation pages.

Key Features & Contributions

  • Client-Side TOON Conversion: Zero-latency, browser-based serialization cutting LLM token overhead by up to 60%.
  • Static Content Architecture: Fully static generation for blog posts, FAQ, and documentation for instant loading.
  • Pre-Rendered AI & Social Assets: Build-time generation of /llms.txt and Open Graph images avoiding runtime server cost.
  • Dynamic Blog System: SEO-optimized publishing engine with structured author attribution and category filtering.
  • Dual Analytics Suite: Deep behavioral and quantitative tracking via Google Analytics and Microsoft Clarity.
  • Consistent UI/UX Polish: Unified design language across interactive tools and supporting documentation.

Tech Stack

  • Framework: Next.js 16 (App Router), React 19
  • Language: TypeScript
  • Conversion Engine: @toon-format/toon
  • UI & Styling: Tailwind CSS, Shadcn UI
  • Analytics & Rendering: Google Analytics, Microsoft Clarity, Static Site Generation (SSG)

Outcome & Impact

Migrating content pages to Static Site Generation eliminated runtime server overhead and delivered instant, predictable load times during traffic spikes. Pre-rendering AI discovery files and Open Graph assets improved social sharing presence and LLM crawler indexing without increasing request-time compute costs. Dual analytics integrations provided actionable visibility into developer tool interaction and conversion funnels.

share: