JLint - JSON Validator & Formatter

A lightweight, client-side JSON validation and formatting tool built with Astro, TypeScript, and Tailwind CSS. Features beautiful Catppuccin theming (Mocha/Latte), syntax highlighting, compress/prettify toggle, and responsive design. Inspired by jsonlint.com but with modern styling and enhanced UX.

✨ Features

• Client-side processing - No data leaves your browser
• Beautiful Catppuccin theming - Toggle between Mocha (dark) and Latte (light) themes
• Syntax highlighting - Color-coded JSON output for better readability
• Line numbers - Visual line numbers in the input area for easy error tracking
• Compress/Prettify toggle - Switch between formatted and minified JSON
• Copy to clipboard - One-click copying of formatted output
• Responsive design - Works on desktop and mobile
• Real-time validation - Instant feedback on JSON validity
• Modern UX - Clean, intuitive interface

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Clone the repository:

git clone https://github.com/sva-s1/jlint.git
cd jlint

2. Install dependencies:

npm install

3. Copy the example environment file:

cp .env.example .env

(The default values work out of the box, but you can customize them if needed)

4. Start the development server:

npm run dev

5. Open http://localhost:4321 in your browser

📖 How to Use

1. Paste your JSON - Copy and paste your JSON data into the left input area
2. Validate & Format - Click the "Validate & Format" button to check syntax and prettify
3. Toggle compression - Use the "Compress" button to minify or "Prettify" to format with indentation
4. Copy results - Click the "Copy" button to copy the formatted JSON to your clipboard
5. Switch themes - Use the toggle in the top-right corner to switch between light and dark themes
6. Clear workspace - Click "Clear" to reset both input and output areas

Features in Detail

• Real-time validation: Get instant feedback if your JSON has syntax errors
• Syntax highlighting: Keys, strings, numbers, booleans, and null values are color-coded
• Line numbers: Visual line numbers with synchronized scrolling help locate errors quickly
• Error reporting: Clear error messages with line and column information, word-wrapped for full visibility
• Theme persistence: Your preferred theme is saved and restored on future visits
• Privacy-focused: All processing happens in your browser - no data is sent to any server

🛠️ Development

Commands

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying

Project Structure

/
├── .env                     # Environment configuration
├── .env.example             # Environment template
├── README.md                # Project documentation
├── astro.config.mjs         # Astro configuration
├── package-lock.json        # Dependency lock file
├── package.json             # Project dependencies and scripts
├── tailwind.config.mjs      # Tailwind CSS configuration
├── tsconfig.json            # TypeScript configuration
├── public/
│   └── favicon.svg          # Site favicon
└── src/
    ├── pages/
    │   └── index.astro      # Main application page
    └── styles/
        └── global.css       # Catppuccin theme styles

🎨 Theming

JLint uses the beautiful Catppuccin color palette with two variants:

• Mocha - Dark theme with warm, cozy colors
• Latte - Light theme with soft, creamy tones

The theme toggle is located in the top-right corner and remembers your preference.

🔧 Configuration

Environment variables can be configured in .env:

Core Site Configuration

• JLINT_SITE_NAME - Application name (displayed in footer)
• JLINT_SITE_AUTHOR - Author name
• JLINT_SITE_AUTHOR_URL - Author website/profile URL
• REFERRER - Organization/entity name (e.g., "A DataDocs Tool")
• REFERRER_URL - Organization website URL

External References

• JSONLINT_URL - Original jsonlint.com URL for attribution
• CATPPUCCIN_URL - Catppuccin theme URL for credits
• NETLIFY_URL - Netlify hosting URL for credits

Additional Site Info (Currently Unused)

• JLINT_SITE_URL - Production URL (not implemented yet)
• JLINT_SITE_DESCRIPTION - Site description (not implemented yet)
• JLINT_SITE_VERSION - Application version (not implemented yet)

🌐 Deployment

Build the project for production:

npm run build

The built site will be in the ./dist/ directory, ready to deploy to any static hosting service like Netlify, Vercel, or GitHub Pages.

🎯 Inspiration

• jsonlint.com - The original JSON validation tool
• Catppuccin - Beautiful color palette
• Font Awesome - Icons

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

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

---

🗺️ Roadmap

v1.1.0 - Enhanced Features

• Line numbers - Visual line numbers in input area with synchronized scrolling
• GitHub icon in top-right corner linking to project repository
• "Edit this page" or "Contribute to this project" widget/button
• Dynamic icon/favicon that changes based on validation state or theme
• GitHub Actions workflow for automated Lighthouse performance testing
• JSON schema validation
• Import/export functionality for JSON files
• Keyboard shortcuts (Ctrl+Enter to validate, Ctrl+C to copy)
• Multiple format support (YAML, XML conversion)
• JSON path explorer

v1.2.0 - Advanced Tools

• JSON diff/comparison tool
• Batch validation for multiple JSON objects
• Custom validation rules
• JSON minification statistics
• History of validated JSONs (local storage)

v1.3.0 - Developer Experience

• API for programmatic validation
• Browser extension
• CLI version
• Integration with popular IDEs
• Export formatted JSON as image

Future Considerations

• Collaborative editing features
• Plugin system for custom validators
• Advanced syntax highlighting themes
• Performance optimizations for large JSON files
• Accessibility improvements

---

Privacy: All JSON processing happens client-side. No data is sent to any server.