5 New Tools: Regex Playground, JSON Schema Generator & More

# 5 New Tools: Regex Playground, JSON Schema Generator & More

ToolBox just shipped five new tools: Regex Playground, JSON Schema Generator, Email Signature Generator, Git Commit Message Generator, and Tailwind Component Preview. This post covers each one in depth - what problem it solves, how to use it effectively, and practical examples you can adapt to your own work.

---

Regex Playground

Regular expressions are one of the most powerful tools in a developer's toolkit and one of the most error-prone to write from memory. The Regex Playground goes beyond simple pattern-matching to give you a complete regex development environment in the browser.

What Makes It Different From a Basic Regex Tester

A basic regex tester tells you whether a pattern matches. The Regex Playground tells you:

• Which parts of each match correspond to which capture groups
• Where each match starts and ends (character indices)
• What your pattern looks like with all matches highlighted inline
• What your replaced output looks like using a find-and-replace mode

This level of detail is what you need when building or debugging a complex pattern - not just "yes it matched" but "why did it match that way."

Real-Time Match Highlighting

Type a regex pattern and a test string, and the tool instantly highlights every match in the test string with color-coded underlining. Each match is a different color when multiple capture groups are involved.

For example, with the pattern (\w+)\s+(\w+):

Test string: "hello world foo bar"
Match 1: "hello world"
  Group 1: "hello" (indices 0-4)
  Group 2: "world" (indices 6-10)
Match 2: "foo bar"
  Group 1: "foo" (indices 12-14)
  Group 2: "bar" (indices 16-18)

The visual highlighting makes it immediately obvious where each group captures, eliminating the need to manually count character positions.

Capture Group Extraction

Below the highlighted test string, the tool shows a table of all matches with each capture group's value and index range. This view is particularly useful for:

• Named capture groups ((?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})) - see each group's name and value
• Multiple matches - every match listed with all its groups
• Nested groups - see both the outer and inner capture values

Find-and-Replace Mode

Toggle from match mode to replace mode and enter a replacement string. The tool shows the full replaced output, with capture group references ($1, $2) expanded. This lets you verify your replacement logic before applying it to real data.

Pattern: (\w+)@(\w+)\.com
Replacement: $2/$1
Test: alice@example.com and bob@company.com
Result: example/alice and company/bob

Built-In Pattern Library

The Playground ships with a library of tested common patterns:

Select any pattern to load it into the Playground with a matching test string. Use it as a starting point for your own pattern.

All JavaScript Regex Flags

The Playground supports all standard JavaScript regex flags:

Multiple flags can be combined. Most real-world patterns need at least g for matching all occurrences.

Practical Regex Examples

#### Extracting Data From a Log Format

Pattern: \[(?<level>\w+)\]\s+(?<timestamp>\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})\s+(?<message>.+)
Flags: gm

Test string:
[ERROR] 2026-03-02T14:32:11 Database connection failed
[INFO]  2026-03-02T14:32:15 Retry attempt 1
[ERROR] 2026-03-02T14:32:20 Database connection failed

Named groups extracted:
  Match 1: level=ERROR, timestamp=2026-03-02T14:32:11, message=Database connection failed
  Match 2: level=INFO, timestamp=2026-03-02T14:32:15, message=Retry attempt 1
  Match 3: level=ERROR, timestamp=2026-03-02T14:32:20, message=Database connection failed

#### Validating and Extracting Semantic Versions

Pattern: (?<major>0|[1-9]\d*)\.(?<minor>0|[1-9]\d*)\.(?<patch>0|[1-9]\d*)(?:-(?<prerelease>[^+]+))?
Flags: g

Test: "version 2.14.0 and 3.0.0-alpha.1 and 1.2.3"
Groups: major, minor, patch, prerelease (if present)

For all your regex needs, Regex Playground is the tool to have open while developing patterns. For simpler match/no-match checks, Regex Tester is a lighter alternative.

---

JSON Schema Generator

JSON Schema is the standard for describing the structure, types, and constraints of JSON documents. It is used for API documentation, runtime validation, editor autocomplete, and generating code. Writing schemas by hand is tedious and error-prone. The JSON Schema Generator eliminates that work.

What It Generates

Paste any JSON object or array into the tool. It instantly produces a valid JSON Schema draft-07 document that:

• Identifies the correct type for every value (string, number, integer, boolean, null, array, object)
• Handles nested objects and arrays recursively to any depth
• Lists all detected properties in the required array (since all present properties are assumed required by default)
• Generates array item schemas based on the first element's structure

Example: Simple API Response

Input JSON:

{
  "id": 42,
  "username": "alice",
  "email": "alice@example.com",
  "is_active": true,
  "score": 9.8,
  "tags": ["admin", "beta-tester"],
  "created_at": "2026-01-15T10:30:00Z"
}

Generated Schema:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["id", "username", "email", "is_active", "score", "tags", "created_at"],
  "properties": {
    "id": { "type": "integer" },
    "username": { "type": "string" },
    "email": { "type": "string" },
    "is_active": { "type": "boolean" },
    "score": { "type": "number" },
    "tags": {
      "type": "array",
      "items": { "type": "string" }
    },
    "created_at": { "type": "string" }
  }
}

Handling Nested Objects

The generator recurses into nested objects and arrays:

Input:

{
  "user": {
    "id": 1,
    "name": "Alice",
    "address": {
      "street": "123 Main St",
      "city": "Springfield",
      "zip": "12345"
    }
  },
  "orders": [
    {
      "id": 100,
      "total": 49.99,
      "status": "shipped"
    }
  ]
}

Generated Schema (abbreviated):

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "user": {
      "type": "object",
      "properties": {
        "id": { "type": "integer" },
        "name": { "type": "string" },
        "address": {
          "type": "object",
          "properties": {
            "street": { "type": "string" },
            "city": { "type": "string" },
            "zip": { "type": "string" }
          }
        }
      }
    },
    "orders": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "id": { "type": "integer" },
          "total": { "type": "number" },
          "status": { "type": "string" }
        }
      }
    }
  }
}

After Generation: Refining the Schema

The generated schema is a starting point, not a finished artifact. Common refinements to make after generation:

Add format hints for strings:

"email": { "type": "string", "format": "email" },
"created_at": { "type": "string", "format": "date-time" },
"website": { "type": "string", "format": "uri" }

Add constraints:

"username": { "type": "string", "minLength": 3, "maxLength": 50 },
"age": { "type": "integer", "minimum": 0, "maximum": 120 },
"score": { "type": "number", "minimum": 0, "maximum": 10 }

Mark optional properties:

Remove properties from the required array that the API may legitimately omit.

Add enum constraints:

"status": { "type": "string", "enum": ["pending", "processing", "shipped", "delivered"] }

Use Cases

• API documentation - Paste a sample response, generate the schema, add it to your OpenAPI spec
• Request validation - Generate a schema from a sample request body, use it with ajv or zod for runtime validation
• Editor autocomplete - JSON Language Server uses schemas to provide autocomplete in VS Code for JSON files
• Code generation - Tools like json-schema-to-typescript generate TypeScript interfaces from schemas
• Testing - Schema validators can verify that all API responses match the expected structure

For formatting and validating the generated output, use JSON Formatter.

---

Email Signature Generator

Professional email signatures are small HTML documents that need to be compatible with Outlook, Gmail, Apple Mail, and a dozen other clients. Getting them right without deep knowledge of email HTML quirks is genuinely difficult. The Email Signature Generator handles the HTML complexity so you do not have to.

The Email HTML Challenge

Email clients do not support modern CSS. Flexbox, Grid, CSS variables, and external stylesheets are all either partially or completely unsupported in major email clients. Signatures must be built with:

• HTML tables for layout (not <div> with flex)
• Inline styles on every element (not classes or external CSS)
• Absolute image URLs (not relative or base64 inline in many clients)
• font-face avoided in favor of web-safe fonts

The generator handles all of this automatically. It generates table-based layouts with fully inlined styles that are tested across the major email clients.

Three Template Styles

Minimal

Clean, text-focused layout. Name and title on the first line, contact information on subsequent lines, separated by small pipe characters. A narrow accent bar in the chosen color appears on the left side. Appropriate for most professional contexts.

Alice Johnson | Senior Developer
alice@example.com | +1 555 0100
github.com/alice

Corporate

Two-column layout with a profile image or company logo on the left and contact details on the right. Includes company name as a separate prominent line. Suitable for enterprise and client-facing contexts.

Creative

More visual design with a full accent header bar, social media icon links (LinkedIn, Twitter, GitHub), and a banner image slot. Better for design agencies, startups, and roles where personality is part of the brand.

Configuration Options

• Name, title, company - Basic identity fields
• Email, phone, website - Contact information (each is optional)
• Social links - LinkedIn, Twitter/X, GitHub (optional; only appear if you fill them in)
• Profile image URL - Remote image URL for templates that include a photo
• Accent color - A color picker for the template's primary brand color
• Template style - Minimal, Corporate, or Creative

What You Get

The generator outputs complete HTML with:

• All styles inlined using style attributes
• Table-based layout compatible with Outlook 2016+, Gmail, Apple Mail, and other major clients
• A plain-text version for email clients that do not render HTML

Installing Your Signature

Gmail:

1. Go to Settings > See all settings > General > Signature
2. Click "Create new"
3. Click the source code button (<>) in the editor
4. Paste the generated HTML
5. Click Done and save settings

Outlook (desktop):

1. File > Options > Mail > Signatures
2. Click "New" and name your signature
3. In the editor, click "Source" or use HTML paste mode
4. Paste the HTML

Apple Mail:

1. Preferences > Signatures > Add signature
2. Right-click the signature preview area and select "Edit Signature"
3. Replace the content with the generated HTML

---

Git Commit Message Generator

Writing good commit messages is a discipline that improves codebase maintainability over time. The Git Commit Message Generator implements the Conventional Commits specification through a guided form, producing properly formatted messages without requiring memorization of the format.

The Conventional Commits Specification

Conventional Commits is a lightweight convention for commit messages with this structure:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

The type describes the category of the change. The specification defines these standard types:

The Generator Form

Fill in:

1. Type - dropdown of the standard Conventional Commits types
2. Scope - optional, the area of the codebase affected (e.g., auth, api, ui)
3. Description - short summary in imperative present tense ("add feature", not "added feature")
4. Body - optional, longer explanation of motivation and context
5. Breaking change - toggle and description (adds a ! to the type and a BREAKING CHANGE: footer)
6. Additional footers - for issue references, reviewer credits, etc.

Generated Output Examples

Simple feature commit:

feat(auth): add OAuth2 login with GitHub

Implement GitHub OAuth2 flow using the authorization code grant type.
Users can now sign in with their GitHub accounts without creating
a separate password.

Closes #142

Breaking change:

feat(api)!: change response format to JSON:API spec

BREAKING CHANGE: The API response format has changed from a flat JSON
object to the JSON:API format. Clients must be updated to use the
`data` envelope and `attributes` sub-object.

Migration guide: https://docs.example.com/api-migration

Simple bug fix:

fix(parser): handle null values in nested objects

Closes #237

Why Good Commit Messages Matter

Commit messages are searchable documentation. In six months, when a bug appears in production and you run git log --grep="auth", the quality of commit messages determines how quickly you find the relevant commit. When you use git bisect to find which commit introduced a regression, readable messages save hours.

Conventional Commits also enables tooling:

• Changelogs - tools like conventional-changelog automatically generate changelogs from commit types
• Semantic versioning - feat bumps the minor version, fix bumps patch, feat! or BREAKING CHANGE bumps major
• Release automation - commit type determines whether a CI release is triggered

Even if you never set up the tooling, consistently formatted commit messages are more useful than inconsistent ones. The generator makes consistency effortless.

---

Tailwind Component Preview

Tailwind CSS is a utility-first CSS framework where you compose styles by combining utility classes directly in HTML. Writing Tailwind components requires a feedback loop - you add classes, check the result, adjust. The Tailwind Component Preview gives you that feedback loop without needing to set up a project.

How It Works

The Preview loads the Tailwind CSS CDN version, which includes the full utility set. You write HTML in the editor with Tailwind classes. The preview pane renders the HTML live as you type, using the real Tailwind CSS.

No build step. No PostCSS. No configuration. Just HTML with Tailwind classes and an instant rendered result.

Pre-Built Component Snippets

The tool ships with a library of ready-to-use component examples:

Buttons:

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
  Primary Button
</button>

<button class="border border-gray-300 hover:border-gray-400 text-gray-700 font-semibold py-2 px-4 rounded-lg transition-colors">
  Secondary Button
</button>

<button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors">
  Danger Button
</button>

Card:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200" alt="Card image">
  <div class="p-6">
    <h2 class="text-xl font-bold text-gray-900 mb-2">Card Title</h2>
    <p class="text-gray-600 text-sm leading-relaxed">
      A short description that explains what this card is about.
    </p>
    <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-blue-700 transition-colors">
      Learn More
    </button>
  </div>
</div>

Navbar:

<nav class="bg-white shadow-sm border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <span class="text-xl font-bold text-gray-900">Logo</span>
      <div class="flex gap-6">
        <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium transition-colors">Home</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium transition-colors">Features</a>
        <a href="#" class="text-gray-600 hover:text-gray-900 text-sm font-medium transition-colors">Pricing</a>
      </div>
      <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
        Sign Up
      </button>
    </div>
  </div>
</nav>

Alert variants:

<div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center gap-2">
  <span class="font-semibold">Success:</span>
  <span>Your changes have been saved.</span>
</div>

<div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center gap-2">
  <span class="font-semibold">Error:</span>
  <span>Something went wrong. Please try again.</span>
</div>

<div class="bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg flex items-center gap-2">
  <span class="font-semibold">Warning:</span>
  <span>This action cannot be undone.</span>
</div>

Responsive Breakpoint Testing

The Preview includes breakpoint controls that let you simulate different viewport widths:

Click any breakpoint button to resize the preview pane. Responsive classes like md:grid-cols-2 and lg:flex activate at the appropriate widths, so you can verify your responsive design without a full browser resize.

Dark Mode Toggle

Click the dark mode toggle to switch the preview pane to dark mode. Dark mode in Tailwind adds a dark class to the <html> element, activating all dark: variant classes.

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-8">
  <h1 class="text-2xl font-bold">Dark mode aware card</h1>
  <p class="text-gray-600 dark:text-gray-300 mt-2">
    This content adapts to the current mode.
  </p>
</div>

Toggle the dark mode switch in the Preview and watch the component switch between themes in real time.

Arbitrary Value Testing

One of Tailwind's power features is arbitrary values - custom sizes, colors, or measurements that fall outside the predefined scale:

<!-- Custom width, height, and color not in the default scale -->
<div class="w-[720px] h-[calc(100vh-4rem)] bg-[#1a2b3c] text-[#f0f0f0]">
  Custom dimensions and colors
</div>

<!-- Custom top offset for a sticky element below a 57px navbar -->
<div class="fixed top-[57px] w-full bg-white shadow">
  Sticky below navbar
</div>

The Preview renders arbitrary values correctly because it uses the Tailwind CDN's just-in-time engine.

Copying the HTML

When your component is ready, click "Copy HTML" to copy the full markup to your clipboard. Paste it directly into your project. If you are using a build-time Tailwind setup with PurgeCSS/content configuration, the classes in the pasted HTML will be included in your production CSS as long as the file is in the content paths.

For converting existing CSS to Tailwind, use the Tailwind to CSS converter tool.

---

Stability and Platform Improvements

Alongside the five new tools, this release included infrastructure work that improves the experience across all 139 tools.

Error Boundaries

Every tool page now has an error boundary - a React component that catches rendering errors within the tool and displays a recovery UI instead of a blank page.

The global error boundary shows a full-page error state with a Retry button that attempts to re-render the component. Each tool also has its own local error boundary so that an error in one tool does not affect the rest of the application.

Loading Skeletons

Tool pages and heavy components now show pulsing skeleton placeholders while loading. This is especially important on slower connections where tools that load external resources (fonts, browser compatibility data, currency rates) might take a moment to appear.

The skeletons match the approximate shape of the content that will appear, reducing layout shift and making the loading state feel intentional.

Cache Headers

Static asset caching has been configured for optimal performance:

• JavaScript and CSS bundles - Cache-Control: public, max-age=31536000, immutable (1 year). These include content hashes in filenames, so new deploys immediately serve updated files.
• API routes - Cache-Control: public, s-maxage=3600 (1 hour at CDN). Rate-limited APIs (currency exchange, browser compat data) are cached to reduce external API calls.
• Tool pages - Stale-while-revalidate strategy: serve cached HTML immediately, refresh in the background.

Enhanced PWA Manifest

The Progressive Web App manifest now includes app shortcuts - quick-access links that appear when you long-press the ToolBox icon on Android or right-click on desktop:

• JSON Formatter
• Diff Checker
• Base64 Encoder/Decoder
• Hash Generator

These shortcuts let you jump directly to a frequently-used tool without navigating through the home page.

---

Try the New Tools

All five tools are live now:

• Regex Playground - Real-time match highlighting, capture group extraction, find-and-replace mode, and a pattern library
• JSON Schema Generator - Paste JSON, get a draft-07 schema in one click
• Email Signature Generator - Email-client-compatible HTML signatures with three template styles
• Git Commit Message Generator - Conventional Commits format with a guided form
• Tailwind Component Preview - Live Tailwind HTML renderer with responsive breakpoints and dark mode

No signup, no cost, all client-side. Start with any of the five and bring the output into the rest of your workflow - the JSON Formatter for the schema output, the Diff Checker to compare component variants, or the Tool Chainer for text processing pipelines.