CSR - Developer Tools

Free online tools for web developers. Speed up your development workflow.

GitHub · Report Bug · Request Feature

Table of Contents

• Features
• Quick Start
• Tech Stack
• Project Structure
• Available Scripts
• Design System
• Key Features
• Privacy & Security
• Contributing
• License

Features

CSR Developer Tools is a collection of 78 tools across 12 categories that work entirely in your browser — no server required, ensuring your data stays private and secure.

Code

• CSS Formatter — Beautify or minify CSS stylesheets
• GraphQL Schema Viewer — Browse GraphQL SDL types, fields, arguments, and relationships
• HTML Formatter — Format and beautify HTML with proper indentation, or minify for production
• JavaScript Minifier — Minify or beautify JavaScript code with size comparison
• JSON Schema Validator — Validate JSON data against a JSON Schema (draft-07)
• JSONPath Evaluator — Evaluate JSONPath expressions against JSON with live results
• JSON to TypeScript — Generate TypeScript interfaces or types from JSON
• Markdown Preview — Live Markdown preview with HTML output
• Markdown Table Generator — Build Markdown tables visually with editable cells and configurable alignment
• Mermaid Renderer — Live SVG preview for Mermaid diagrams with SVG/PNG export
• Protobuf to JSON — Paste .proto definitions, browse message types, and generate sample JSON
• SQL Formatter — Format SQL queries with proper indentation (PostgreSQL, MySQL, SQLite, and more)
• TypeScript Playground — Real-time TypeScript type checking and JS transpilation via Monaco Editor

Color

• Color Converter — Convert between HEX, RGB, HSL, OKLCH, LAB, and LCH formats
• Color Palette Generator — Generate harmonious palettes (complementary, analogous, triadic, monochromatic)

CSS

• Border Radius Generator — Visually configure CSS border-radius with per-corner control
• Box Shadow Generator — Visually create CSS box-shadow values with a live preview
• CSS Animation Builder — Visually create CSS keyframe animations with live preview and configurable timing
• Flexbox Playground — Visual CSS flexbox layout builder with live preview
• Gradient Generator — Create CSS gradients visually with linear and radial support
• Grid Playground — Visual CSS Grid layout builder with rows, columns, gaps, and placement

Data

• Data URI Generator — Convert files to data URIs and decode data URIs back to files
• DB Diagram — Design entity-relationship diagrams with an interactive visual canvas
• ENV File Converter — Convert between .env, JSON, and YAML configuration formats
• Escaped JSON Stringifier — Escape JSON for embedding in strings and unescape back
• HTML Entity Converter — Encode text to HTML entities and decode back to text
• HTML to Markdown — Convert between HTML and Markdown formats
• HTTP Status Codes — Search and browse HTTP status codes with descriptions and use cases
• JSON Formatter — Format and validate JSON with clean indentation
• JSON to CSV — Convert between JSON arrays and CSV spreadsheet format
• JSON to YAML — Convert between JSON and YAML configuration formats
• OG Preview — Preview Open Graph social cards for Twitter, Facebook, and LinkedIn
• TOML to JSON — Convert between TOML and JSON formats
• XML to JSON — Convert between XML and JSON formats
• YAML Formatter — Format and validate YAML with configurable indentation and key sorting

Encoding

• Base64 Encoder — Encode and decode Base64 strings
• JWT Decoder — Decode JWT tokens to inspect header and payload
• Number Base Converter — Convert numbers between binary, octal, decimal, and hexadecimal
• URL Encoder/Decoder — Encode and decode URL strings
• URL Parser — Parse a URL into its components: protocol, host, port, path, query parameters, and fragment

Generator

• Password Generator — Generate random passwords with configurable length and character types
• QR Code Generator — Generate QR codes from text or URLs with customizable size, colors, and error correction
• UUID Generator — Generate random UUID v4 identifiers, single or in bulk

Image

• Background Remover — Remove image backgrounds using AI, fully in your browser
• Base64 to Image — Convert Base64 strings to downloadable images
• Favicon Generator — Generate favicons in all standard sizes and download as ZIP with HTML link tags
• Image Color Picker — Upload an image and click to extract colors in HEX, RGB, and HSL
• Image Compressor — Compress JPEG and WebP images with a quality slider and live size preview
• Image Converter — Convert between PNG, JPG, WebP, GIF, BMP, and AVIF formats
• Image Cropper — Crop images using freeform selection or common aspect ratio presets
• Image Resizer — Resize images to custom dimensions with aspect ratio control
• Image to Base64 — Convert images to Base64 data URIs for embedding in HTML or CSS
• Placeholder Image Generator — Generate placeholder images with custom dimensions, colors, and text
• Splash Screen Generator — Generate iOS splash screens, Android/PWA icons, and manifest files from a single image
• SVG Viewer — View and optimize SVG code with a live preview

Network

• IP Subnet Calculator — Calculate IPv4 subnet details from CIDR notation or IP and subnet mask

Security

• AES Encrypt/Decrypt — Encrypt and decrypt text using AES-256-GCM with a password
• Bcrypt Hasher — Hash passwords with bcrypt and verify plaintext against hashes
• Certificate Decoder — Decode PEM-encoded X.509 certificates with full detail inspection
• Chmod Calculator — Convert between symbolic, octal, and visual chmod notations
• Hash Generator — Compute hash values from text using MD5, SHA-1, SHA-256, and SHA-512
• HMAC Generator — Generate HMAC signatures using SHA-256, SHA-384, or SHA-512
• RSA Key Generator — Generate RSA 2048/4096-bit key pairs in browser via Web Crypto API
• SSH Key Fingerprint — Compute SHA256 and MD5 fingerprints from SSH public keys

Text

• Lorem Ipsum Generator — Generate placeholder text with configurable paragraphs, sentences, or words
• Regex Tester — Test regex patterns against sample text with live match highlighting
• String Escape/Unescape — Escape and unescape strings for HTML, JavaScript, JSON, URL, and XML
• Text Case Converter — Convert text between camelCase, PascalCase, snake_case, kebab-case, and more
• Text Diff — Compare two text blocks and see line-by-line differences highlighted
• Text Sort & Dedupe — Sort lines alphabetically, numerically, or by length and remove duplicates
• User Agent Parser — Parse user agent strings into browser, OS, device type, and engine details
• Word Counter — Count words, characters, sentences, paragraphs, and reading time

Time

• Cron Parser — Parse cron expressions into human-readable text and see next scheduled run times
• Crontab Generator — Visually build cron expressions with field selectors and next run times
• Timezone Converter — Convert date and time between IANA timezones with DST handling
• Unix Timestamp — Convert between Unix timestamps and human-readable dates

Unit

• Aspect Ratio Calculator — Calculate dimensions while preserving aspect ratios
• PX to REM — Convert between PX and REM units with configurable base font size

Navigation & Discovery

• Sidebar — Collapsible, categorized navigation for all tools
• Command Palette — Fuzzy search any tool with Cmd+K / Ctrl+K
• Dedicated URLs — Each tool has its own route for bookmarking and sharing
• Drag-and-drop dashboard — Organize your most-used tools on the home page
• Persistent layout — Dashboard remembers your preferences

Quick Start

Prerequisites

• Node.js >= 24.5.0
• pnpm 10.11.0 (recommended package manager)

Installation

1. Clone the repository

   git clone https://github.com/boengai/csr-dev-tools.git
   cd csr-dev-tools

2. Install dependencies

   pnpm install

3. Start development server

   pnpm dev

4. Open your browser

   http://localhost:5173
   

Building for Production

# Build the application
pnpm build

# Preview the build locally
pnpm preview

Tech Stack

Core Technologies

• React 19 — Latest React with modern features
• TypeScript — Type-safe development
• Vite — Fast build tool and dev server
• TanStack Router — Client-side routing with per-tool routes

UI & Styling

• Tailwind CSS v4 — Utility-first CSS framework
• Radix UI — Unstyled, accessible components
• Motion — Smooth animations and transitions
• Tailwind Variants — Component variant management
• Monaco Editor — VS Code editor component (TypeScript Playground)
• React Flow — Interactive node-based diagrams (DB Diagram)

State Management

• Zustand — Lightweight state management

AI & Processing

• Hugging Face Transformers.js — On-device AI models (background removal)
• Mermaid — Diagram and chart rendering from text
• GraphQL.js — GraphQL schema parsing and introspection
• Protobuf.js — Protocol Buffer definition parsing
• JSZip — Client-side ZIP file generation and processing

Security & Cryptography

• bcryptjs — Bcrypt password hashing
• @peculiar/x509 — X.509 certificate parsing

Development Tools

• oxlint — Fast code linting
• oxfmt — Fast code formatting
• Vitest — Unit testing framework
• Playwright — E2E testing framework
• GitHub Actions — CI/CD pipeline with Lighthouse CI

Project Structure

csr-dev-tools/
├── public/                  # Static assets
├── src/
│   ├── components/
│   │   ├── common/          # Shared UI (button, card, sidebar, command-palette, toast, ...)
│   │   ├── feature/         # Tool components by category
│   │   │   ├── code/        #   CSS/HTML/JS/SQL formatters, Markdown, JSON Schema,
│   │   │   │                #   JSON->TS, GraphQL, JSONPath, Mermaid, Protobuf, TS Playground
│   │   │   ├── color/       #   Color Converter, Color Palette Generator
│   │   │   ├── css/         #   Box Shadow, Gradient, Flexbox, Grid, Animation, Border Radius
│   │   │   ├── data/        #   JSON Formatter, JSON<->YAML/CSV, XML/TOML<->JSON, HTML<->MD,
│   │   │   │                #   HTTP Codes, OG Preview, DB Diagram, ENV, YAML Formatter, ...
│   │   │   ├── encoding/    #   Base64, URL Encoder, JWT Decoder, Number Base, URL Parser
│   │   │   ├── generator/   #   UUID, Password, QR Code
│   │   │   ├── image/       #   Converter, Compressor, Cropper, Resizer, Color Picker, SVG,
│   │   │   │                #   Base64<->Image, Favicon, Background Remover, Placeholder, Splash Screen
│   │   │   ├── network/     #   IP Subnet Calculator
│   │   │   ├── security/    #   AES, Bcrypt, Certificate, Chmod, Hash, HMAC, RSA Key, SSH
│   │   │   ├── text/        #   Text Diff, Regex, Case Converter, Lorem Ipsum, Word Counter,
│   │   │   │                #   Sort/Dedupe, Escape, User Agent
│   │   │   ├── time/        #   Unix Timestamp, Cron Parser, Crontab Generator, Timezone
│   │   │   └── unit/        #   PX to REM, Aspect Ratio Calculator
│   │   └── index.ts
│   ├── constants/           # Tool registry, routes, image constants
│   ├── hooks/               # Custom hooks (copy, debounce, SEO, keyboard shortcuts)
│   │   ├── persist/         # Persistence hooks
│   │   └── state/           # Zustand stores
│   ├── pages/
│   │   ├── home/            # Dashboard with drag-and-drop layout
│   │   ├── showcase/        # Feature showcase
│   │   └── tool/            # Dynamic tool page (renders from registry)
│   ├── types/               # TypeScript type definitions
│   ├── utils/               # Utility functions
│   ├── App.tsx
│   ├── main.tsx
│   ├── routes.tsx
│   └── index.css
├── e2e/                     # Playwright E2E tests
├── CONTRIBUTING.md          # Contributor guide
├── package.json
├── vite.config.ts
├── tsconfig.json
├── .oxlintrc.json
└── .oxfmtrc.json

Available Scripts

Command	Description
pnpm dev	Start development server on port 5173
pnpm build	Build for production
pnpm preview	Preview production build
pnpm lint	Run oxlint
pnpm lint:fix	Run oxlint with auto-fix
pnpm format	Format source files with oxfmt
pnpm format:check	Check formatting without writing
pnpm test	Run unit tests (Vitest)
pnpm test:e2e	Run E2E tests (Playwright)
pnpm test:e2e:ui	Run E2E tests with Playwright UI

Design System

This project follows a comprehensive design system built on:

Component Architecture

• Radix UI as the foundation for accessible, unstyled components
• Tailwind CSS v4 with tv() (Tailwind Variants) for component styling
• motion/react for smooth animations and transitions
• TanStack Router for routing with lazy-loaded tool components
• Centralized Tool Registry — single source of truth for all tool metadata, routes, and components

Code Standards

• TypeScript strict mode for type safety
• Functional components with React hooks
• Composition over inheritance design pattern
• Mobile-first responsive design approach

File Naming Conventions

• kebab-case for utility files (app-version.ts)
• PascalCase for component files (HomePage.tsx)
• camelCase for hooks and utilities (useAppVersion.ts)

Key Features

Client-Side Only

• 100% client-side processing — your data never leaves your browser
• No server dependencies — works offline after initial load
• Privacy-focused — no data collection or tracking
• On-device AI — background removal runs locally using WebGPU/WASM

Modern Development

• React 19 with latest features and optimizations
• TypeScript strict mode for type safety
• TanStack Router for routing with automatic code splitting
• Hot module replacement for instant feedback during development
• Optimized build with tree shaking and lazy loading
• 1,500+ unit tests and E2E tests with Playwright

Accessible & Responsive

• WCAG-compliant — aria-live regions, keyboard navigation, semantic markup
• Mobile-first approach with Tailwind CSS
• Touch-friendly interface for mobile devices

Privacy & Security

• No data collection — all processing happens locally
• No external API calls for core functionality
• No cookies or tracking — respects user privacy
• Offline capable — works without internet connection

License

This project is licensed under the MIT License — see the LICENSE file for details.

Contributing

Contributions are welcome! See CONTRIBUTING.md for the complete guide — including how to add a new tool step-by-step, code conventions, testing instructions, and the PR checklist.

Bug Reports

If you discover a bug, please open an issue with:

• A clear description of the bug
• Steps to reproduce the issue
• Expected vs actual behavior
• Browser and OS information
• Screenshots if applicable

Feature Requests

Have an idea for a new tool? Open an issue with:

• A clear description of the feature
• Use case and benefits
• Any relevant examples or mockups

---

Made with love for the developer community

Star this repo if you find it useful!