Skip to content

cenyi/neo-dev-toolkit

BranchesTags

Repository files navigation

JSON Formatter & Multi-Format Converter

Version License Astro Cloudflare

The Ultimate JSON Toolkit - 20+ Format Conversions & Code Generation

Features • Quick Start • Documentation • Demo

✨ Overview

A powerful, browser-based JSON toolkit that supports 20+ format conversions, code generation, and advanced JSON operations. 100% client-side processing - your data never leaves your browser!

🌟 Key Highlights

  • 🎯 Smart Input Detection: Auto-detects JSON, URL params, XML, YAML & 15+ formats
  • 🔄 20+ Conversions: JSON ↔ YAML/XML/CSV/HTML/PDF/Table & more
  • 💻 Code Generation: TypeScript, Dart, Go, Rust, Python, C, JSON Schema
  • 🔍 Advanced Tools: JSON compare, diff, field extraction, validation
  • 🌐 Bilingual: Full English & Chinese support
  • 📱 Mobile-Optimized: Perfect on all devices
  • 🔒 Privacy-First: 100% browser-based, no server uploads
  • ⚡ Lightning Fast: Handles 10MB+ JSON files effortlessly

🚀 Quick Start

Installation

# Clone the repository
git clone https://github.com/cenyi/neo-dev-toolkit.git

# Navigate to project directory
cd neo-dev-toolkit

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Quick Demo

  1. Open your browser and navigate to http://localhost:4321
  2. Paste any JSON into the editor
  3. Watch it auto-format and validate instantly
  4. Click any conversion button to transform your data

🎯 Features

Core JSON Operations

1. Smart Input Detection 🧠

Automatically detects and parses:

  • ✅ Standard JSON
  • ✅ URL Parameters (query strings)
  • ✅ XML documents
  • ✅ YAML files
  • ✅ JSON with comments
  • ✅ Minified JSON

Example: Just paste ?name=John&age=30 and it auto-converts to JSON!

2. JSON Formatting & Validation ✨

  • Real-time syntax highlighting
  • Error detection with line numbers
  • Auto-formatting on paste
  • Collapsible tree view
  • Line numbers navigation

3. JSON Comparison & Diff 🔄

  • Side-by-side comparison
  • Visual diff highlighting:
    • 🟢 Green: Added
    • 🔴 Red: Removed
    • 🟡 Yellow: Modified
  • Perfect for API testing and config changes

4. Field Extraction 🔍

Use JavaScript expressions to extract data:

// Extract nested field
obj => obj.user.name

// Extract from array
obj => obj.items[0].id

// Transform data
obj => obj.users.map(u => u.email)

// Filter and map
obj => obj.items.filter(i => i.price > 100).map(i => i.name)

🔄 Data Format Conversions

JSON to YAML

Convert JSON to YAML format with proper indentation:

name: John Doe
email: john@example.com
age: 30
address:
  street: 123 Main St
  city: New York

JSON to XML

Generate XML with proper structure and escaping.

JSON to CSV/Excel

  • Convert JSON arrays to CSV format
  • Handle nested objects
  • Excel-compatible output
  • One-click copy to clipboard

JSON to HTML

Generate formatted HTML with syntax highlighting:

<!DOCTYPE html>
<html>
<head><title>JSON Data</title></head>
<body>
<pre class="json-key">"name"</pre>: <pre class="json-string">"John"</pre>
...
</body>
</html>

JSON to PDF

Export JSON as PDF via browser print with formatting preserved.

JSON to Table

Visualize JSON data as beautiful HTML tables:

  • Arrays become row-based tables
  • Objects become key-value tables
  • Type-based color coding
  • Responsive design

💻 Code Generation

TypeScript Interface

interface UserData {
  name: string;
  email: string;
  age: number;
  address: {
    street: string;
    city: string;
  };
}

Dart Class (Flutter)

class UserData {
  String name;
  String email;
  int age;
  Address address;

  UserData({this.name, this.email, this.age, this.address});

  factory UserData.fromJson(Map<String, dynamic> json) {
    return UserData(
      name: json['name'],
      email: json['email'],
      age: json['age'],
      address: Address.fromJson(json['address']),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'email': email,
      'age': age,
      'address': address?.toJson(),
    };
  }
}

Go Struct

type UserData struct {
    Name    string  `json:"name"`
    Email   string  `json:"email"`
    Age     int     `json:"age"`
    Address Address `json:"address"`
}

Rust Struct

#[derive(Serialize, Deserialize)]
struct UserData {
    name: String,
    email: String,
    age: i64,
    address: Address,
}

Python Dataclass

from dataclasses import dataclass
from typing import Optional

@dataclass
class UserData:
    name: str
    email: str
    age: int
    address: Optional['Address'] = None

C Struct

typedef struct {
    char* name;
    char* email;
    int age;
    Address* address;
} UserData;

JSON Schema

Generate standard JSON Schema for validation:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {"type": "string"},
    "email": {"type": "string"},
    "age": {"type": "number"}
  },
  "required": ["name", "email", "age"]
}

🛠️ Utility Tools

JSON Minify

  • Remove all whitespace
  • Compress to single line
  • Perfect for production APIs

JSON Escape

  • Escape special characters
  • Safe for string embedding
  • One-click copy

Comment Removal

  • Strip JSON5-style comments
  • Clean up for production
  • Preserve data integrity

History Management

  • Local storage persistence
  • Quick access to recent JSONs
  • Privacy-focused (local only)

📖 Usage Examples

Example 1: API Response Processing

{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "Alice", "email": "alice@example.com"},
      {"id": 2, "name": "Bob", "email": "bob@example.com"}
    ]
  }
}

Extract all emails:

obj => obj.data.users.map(u => u.email)

Result: ["alice@example.com", "bob@example.com"]

Example 2: Config File Conversion

YAML Input:

server:
  host: localhost
  port: 8080
  ssl: true

Auto-detects as YAML → Converts to JSON → Generate Go Struct → Copy to code

Example 3: JSON Comparison

Before:

{"name": "John", "age": 30, "city": "NYC"}

After:

{"name": "John", "age": 31, "city": "LA"}

Shows:

  • 🟡 age: 30 → 31
  • 🟡 city: "NYC" → "LA"

Example 4: URL Params Parsing

Input: ?search=json&page=1&limit=10

Auto-converts to:

{
  "search": "json",
  "page": 1,
  "limit": 10
}

Example 5: Array to Table

Input:

[
  {"product": "Laptop", "price": 999, "stock": 50},
  {"product": "Mouse", "price": 29, "stock": 200}
]

Generates Table:

product price stock
Laptop 999 50
Mouse 29 200

Example 6: Code Generation Workflow

  1. Paste API response JSON
  2. Click "JSON to TypeScript"
  3. Get interface definition
  4. Use in your TypeScript project
  5. Save hours of manual typing!

🎨 UI Features

Responsive Design

  • 🖥️ Desktop: Multi-column layout with side-by-side editors
  • 📱 Tablet: Optimized 2-column grid
  • 📲 Mobile: Single column with touch-friendly buttons

Button Organization

Buttons are grouped by functionality:

[Basics] | [Data Conversions] | [Code Generation] | [Analysis] | [Utilities]

Basics: Collapse, Expand, Remove Comments, Compress, Escape Data Conversions: XML, YAML, CSV, Excel, HTML, PDF Code Generation: TypeScript, Dart, C, Go, Rust, Python, Schema Analysis: Table, Compare Utilities: Clear, History, Font Size

Smart Features

  • 🎨 Syntax Highlighting: Monaco Editor (VS Code engine)
  • 🌓 Theme Support: Auto dark/light mode
  • 📏 Font Size Control: 11px - 16px adjustable
  • 🔤 Bilingual UI: Instant English/Chinese switch
  • ⌨️ Keyboard Shortcuts: Quick actions support

🔧 Technical Details

Technology Stack

Component Technology Version
Framework Astro 4.15+
Editor Monaco Editor Latest
Styling Native CSS -
Language JavaScript ES6+
Deployment Cloudflare Pages/Workers -

Architecture

┌─────────────────────────────────────────┐
│           User Browser                  │
│  ┌──────────────────────────────────┐  │
│  │    Astro Frontend Application    │  │
│  ├──────────────────────────────────┤  │
│  │  • Smart Input Detection          │  │
│  │  • Format Conversion Engine       │  │
│  │  • Code Generation Modules        │  │
│  │  • Monaco Editor Integration      │  │
│  │  • History Management (Local)     │  │
│  └──────────────────────────────────┘  │
│                                         │
│  100% Client-Side Processing           │
│  ❌ No Server Uploads                  │
│  ✅ Complete Privacy                   │
└─────────────────────────────────────────┘

Performance Optimizations

  • Lazy Loading: Monaco Editor loaded on demand
  • Debouncing: Smart input processing
  • Virtual Scrolling: Handle large JSON files
  • Local Storage: Instant history access
  • CSS Hardware Acceleration: Smooth animations
  • Minimal Bundle Size: Optimized dependencies

Browser Compatibility

Browser Version Status
Chrome/Edge 90+ ✅ Full Support
Firefox 88+ ✅ Full Support
Safari 14+ ✅ Full Support
Opera 76+ ✅ Full Support
Mobile Safari 14+ ✅ Full Support
Chrome Mobile 90+ ✅ Full Support

📦 File Structure

neo-dev-toolkit/
├── src/
│   ├── pages/
│   │   ├── index.astro          # English homepage
│   │   └── zh/
│   │       └── index.astro      # Chinese homepage
│   ├── components/
│   │   ├── JsonEditor.astro     # Editor component
│   │   ├── JsonTreeView.astro   # Tree view component
│   │   └── Sidebar.astro        # Navigation sidebar
│   ├── layouts/
│   │   └── BaseLayout.astro     # Base layout
│   └── i18n/
│       └── locales.js           # Translations (EN/ZH)
├── public/                      # Static assets
├── dist/                        # Build output
├── astro.config.mjs             # Astro configuration
├── package.json                 # Dependencies
├── README.md                    # This file
├── README.zh.md                 # Chinese version
└── FEATURES_SUMMARY.md          # Feature summary

🚢 Deployment

Cloudflare Pages (Recommended)

Option 1: Direct Upload

# Build the project
npm run build

# Deploy using Wrangler CLI
npm install -g wrangler
wrangler login
wrangler pages deploy dist

Option 2: Git Integration

  1. Push code to GitHub/GitLab
  2. Connect repository to Cloudflare Pages
  3. Configure build settings:
    • Framework: Astro
    • Build Command: npm run build
    • Output Directory: dist
    • Node.js Version: 18 or 20
  4. Deploy automatically on push

Other Platforms

Vercel

npm install -g vercel
vercel

Netlify

npm install -g netlify-cli
netlify deploy --prod

Environment Variables

No environment variables required! The app runs entirely in the browser.

🔑 SEO Keywords

This tool is optimized for the following keywords:

Core Keywords

  • json formatter
  • json validator
  • json parser
  • json viewer
  • json editor
  • json beautifier
  • json minify
  • json compare
  • json diff

Conversion Keywords

  • json to yaml
  • json to xml
  • json to csv
  • json to excel
  • json to html
  • json to pdf
  • json to table
  • json to dart
  • json to go
  • json to rust
  • json to python
  • json to c
  • json to typescript

Feature Keywords

  • json schema
  • json escape
  • json stringify
  • json pretty print
  • json format
  • json lint
  • json viewer online
  • json formatter online

Chinese Keywords (中文)

  • json格式化
  • json在线解析
  • json在线格式化
  • json 整形
  • json美化
  • json转yaml
  • json转表格

🎓 Use Cases

For Developers

  • ✅ Debug API responses
  • ✅ Generate TypeScript interfaces
  • ✅ Convert config files
  • ✅ Compare JSON differences
  • ✅ Generate data models

For Data Analysts

  • ✅ Convert JSON to CSV/Excel
  • ✅ Visualize data as tables
  • ✅ Extract specific fields
  • ✅ Validate data structure

For QA Engineers

  • ✅ Compare API responses
  • ✅ Validate JSON schemas
  • ✅ Format error messages
  • ✅ Test data transformation

For Students/Learners

  • ✅ Learn JSON structure
  • ✅ Understand data formats
  • ✅ Practice data conversion
  • ✅ Study code generation

🌟 Key Features Summary

Feature Description Status
Smart Input Auto-detects 15+ formats ✅
JSON Validation Real-time error checking ✅
Format Conversions 10+ output formats ✅
Code Generation 7 programming languages ✅
JSON Compare Visual diff tool ✅
Field Extraction JavaScript expressions ✅
Table View HTML table generation ✅
History Local storage ✅
Mobile Support Responsive design ✅
Bilingual English + Chinese ✅
Privacy 100% client-side ✅
Offline Works without internet ✅

🤝 Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

Development Setup

# Fork the repository
# Clone your fork
git clone https://github.com/YOUR-USERNAME/neo-dev-toolkit.git

# Create a feature branch
git checkout -b feature/amazing-feature

# Make your changes
# Commit your changes
git commit -m 'Add amazing feature'

# Push to branch
git push origin feature/amazing-feature

# Create a Pull Request

📊 Performance

  • ⚡ Format Speed: < 100ms for 1MB JSON
  • 📦 Bundle Size: < 500KB (gzipped)
  • 🚀 Load Time: < 2s on 3G
  • 💾 Memory Usage: < 100MB for 10MB JSON
  • 🔄 Conversion Speed: < 500ms for most formats

🔒 Privacy & Security

  • ✅ No Server Uploads: All processing in browser
  • ✅ No Analytics: No tracking code
  • ✅ No Cookies: No user tracking
  • ✅ HTTPS: Secure connection
  • ✅ Open Source: Fully auditable code
  • ✅ Local Storage: History stays on your device

📝 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

📞 Support

Made with ❤️ by the JSON Tools Team

⭐ Star us on GitHub — it helps!

🔗 Live Demo • 📖 Docs • 🐛 Issues

About

A powerful JSON formatter, validator, and converter that supports 20+ format conversions and code generation.

tojsons.com

Topics

json json-viewer json-schema json-parser json-to-csv json-to-pdf json-to-html json-to-xml json-to-excel json-formatter json-to-yaml yaml-to-json

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages