A modern web application that converts JSON data into TOON (Token-Oriented Object Notation) format. TOON is a human-readable, tabular format optimized for LLM prompts and data representation.

TOON (Token-Oriented Object Notation) is a format designed to be more efficient for LLM processing than traditional JSON or YAML. It features:

• Tabular representation for arrays of objects with uniform structure
• Compact syntax that reduces token usage in LLM prompts
• Human-readable format that's easy to understand
• YAML-style indentation for nested structures

Learn more about the TOON specification: https://github.com/toon-format/toon

• ✨ Real-time JSON validation with error messages
• 🔄 Instant conversion from JSON to TOON format
• 📋 Copy to clipboard functionality
• 💾 Download as file (.toon extension)
• 🌙 Dark mode with system preference detection
• 📊 Visitor tracking to show usage statistics
• 🎨 Modern UI built with Tailwind CSS
• 📱 Responsive design for all screen sizes
• 🧪 Sample data button for quick testing

• Angular 21 - Modern Angular with standalone components
• TypeScript - Type-safe development
• Tailwind CSS 4 - Utility-first styling
• RxJS - Reactive programming
• Signals - Angular's new reactive state management
• Vitest - Unit testing framework

• Node.js (v18 or higher)
• npm (v10.9.2 or higher)

1. Clone the repository:

git clone https://github.com/manthanank/json-to-toon-converter.git cd json-to-toon-converter

1. Install dependencies:

npm install

1. Start the development server:

npm start

1. Open your browser and navigate to http://localhost:4200

npm run build

The build artifacts will be stored in the dist/ directory.

1. Enter JSON: Paste or type your JSON data into the input area
2. Validate: The app automatically validates your JSON as you type
3. Convert: Click the "Convert →" button to transform JSON to TOON
4. Copy or Download: Use the "Copy" button to copy to clipboard or "Download" to save as a .toon file

Input JSON:

{ "users": [ { "id": 1, "name": "Alice", "role": "admin" }, { "id": 2, "name": "Bob", "role": "user" } ], "tags": ["development", "production"] }

Output TOON:

users[2]{id,name,role}: 1,Alice,admin 2,Bob,user tags[2]: development,production 

• npm start - Start development server
• npm run build - Build for production
• npm run watch - Build and watch for changes
• npm test - Run unit tests

src/ ├── app/ │ ├── app.ts # Main component with conversion logic │ ├── app.html # Template │ ├── app.css # Component styles │ ├── app.routes.ts # Routing configuration │ ├── models/ # TypeScript models │ │ └── visit.model.ts │ └── services/ # Services │ └── track.ts # Visitor tracking service ├── environments/ # Environment configuration └── styles.css # Global styles 

• Real-time validation as you type
• Clear error messages for invalid JSON
• Visual feedback with red highlighting

• Handles all JSON types: objects, arrays, primitives
• Detects uniform object arrays and converts to tabular format
• Preserves nested structures with proper indentation
• Smart string quoting (only when necessary)

• Toggle between light and dark themes
• Remembers your preference in localStorage
• Respects system color scheme preference

Contributions are welcome! Please feel free to submit a Pull Request.

This project is private and not licensed for public use.