7 New Tools: Image Resizer, HTML to JSX, JSON Path Finder & More

Seven New Tools: A Deep Dive into Each

ToolBox just shipped seven new tools covering some of the most-requested categories in web and software development: image editing, React development, JSON navigation, accessibility testing, CSS debugging, barcode generation, and data format conversion. Every tool runs entirely in your browser - no server uploads, no accounts, no waiting.

This post goes deep on each one: what it does, how it works, and how to use it effectively.

---

1. Image Resizer - Precise Dimensions, Zero Server Uploads

Images need to be resized constantly in web development and content creation. Profile pictures need square dimensions. Hero images need specific aspect ratios. App icons need exact pixel sizes. Social media images need platform-specific dimensions. Doing this in an image editor like Photoshop or GIMP is overkill for routine resizing tasks.

The Image Resizer handles all of it in your browser using the Canvas API.

Three Resize Modes

Exact dimensions: Specify width and height in pixels. Aspect ratio lock (on by default) adjusts one dimension automatically when you change the other, preventing distortion. You can unlock aspect ratio to force a specific size - useful for social media images that must be exactly 1200×628px regardless of the original ratio.

Percentage scaling: Scale relative to the original size. Entering 50% on a 2400×1600px image produces a 1200×800px result. Useful when you know you want "half the size" rather than a specific pixel dimension.

Preset dimensions: Common size presets for the most frequent use cases:

Output Format Options

Choose between PNG (lossless, supports transparency) and JPEG (lossy, smaller file size). For JPEG, a quality slider (1–100) controls the compression level. Most web use cases work well at 80–85% quality, which typically reduces file size by 60–70% compared to 100% quality.

The tool shows a file size comparison after resizing: original size vs. output size. This makes it immediately obvious whether your resize produced the size reduction you expected.

How the Canvas API Handles Resizing

// Simplified version of what happens internally
function resizeImage(imageFile, targetWidth, targetHeight, quality = 0.85) {
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(imageFile);

    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = targetWidth;
      canvas.height = targetHeight;

      const ctx = canvas.getContext('2d');
      // Use high-quality image scaling
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = 'high';

      ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

      canvas.toBlob((blob) => {
        URL.revokeObjectURL(url);
        resolve(blob);
      }, 'image/jpeg', quality);
    };

    img.src = url;
  });
}

The imageSmoothingQuality: 'high' setting tells the browser to use bilinear or bicubic interpolation when scaling, which produces sharper results than the default nearest-neighbor method.

When to Use Which Format

Use PNG when:
- Image has transparency (logos, icons with transparent backgrounds)
- Image is a screenshot or contains text (lossless preserves sharp edges)
- You need an exact pixel-perfect reproduction

Use JPEG when:
- Image is a photograph
- File size matters more than perfect reproduction
- Image will be displayed but not edited further

[Try Image Resizer](/tools/image-resizer)

---

2. HTML to JSX Converter - The React Migration Tool Every Developer Needs

Every React developer has been in this situation: you find a UI component in a template, a Bootstrap example, or a design handoff, and you need to use it in a React component. The HTML works as-is in a plain HTML file, but in JSX it breaks because of attribute naming differences.

The HTML to JSX Converter handles all the transformations automatically.

Complete Attribute Transformation Table

JSX is not HTML - it is JavaScript that looks like HTML. This means attributes that conflict with JavaScript reserved words or React's DOM model must be renamed:

Void Element Handling

HTML void elements (elements that cannot have children) do not need closing tags in HTML5. In JSX, every element must be self-closing if it has no children:

<!-- HTML -->
<br>
<hr>
<img src="photo.jpg" alt="A photo">
<input type="text" name="email">
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">

/* JSX */
<br />
<hr />
<img src="photo.jpg" alt="A photo" />
<input type="text" name="email" />
<link rel="stylesheet" href="styles.css" />
<meta charSet="UTF-8" />

Inline Style Conversion

Inline styles in HTML are strings. In JSX, they must be JavaScript objects with camelCase property names and string values:

<!-- HTML -->
<div style="color: red; font-size: 14px; margin-top: 8px; background-color: #f0f0f0;">

/* JSX */
<div style={{ color: "red", fontSize: "14px", marginTop: "8px", backgroundColor: "#f0f0f0" }}>

Note that background-color becomes backgroundColor, font-size becomes fontSize, and margin-top becomes marginTop. Values that are not numbers must be quoted strings.

Event Handler Transformation

HTML event attributes use all-lowercase names. JSX event handlers use camelCase with on prefix:

<!-- HTML -->
<button onclick="handleClick()">Click</button>
<input onchange="handleChange(event)">
<form onsubmit="handleSubmit(event)">

/* JSX */
<button onClick={handleClick}>Click</button>
<input onChange={handleChange} />
<form onSubmit={handleSubmit}>

Note that in JSX, event handlers reference function values rather than strings of code.

Comment Transformation

<!-- HTML comment -->

{/* JSX comment */}

HTML comments cannot be used directly in JSX markup. They must be wrapped in curly braces and use the /* */ JavaScript comment syntax.

A Complete Example

<!-- Input HTML -->
<form class="login-form" onsubmit="handleSubmit(event)" novalidate>
  <label for="email" class="form-label">Email</label>
  <input
    type="email"
    id="email"
    name="email"
    class="form-input"
    placeholder="Enter your email"
    maxlength="255"
    autocomplete="email"
    required
  >
  <button type="submit" class="btn btn-primary" tabindex="0">
    Sign In
  </button>
</form>

/* Output JSX */
<form className="login-form" onSubmit={handleSubmit} noValidate>
  <label htmlFor="email" className="form-label">Email</label>
  <input
    type="email"
    id="email"
    name="email"
    className="form-input"
    placeholder="Enter your email"
    maxLength="255"
    autoComplete="email"
    required
  />
  <button type="submit" className="btn btn-primary" tabIndex="0">
    Sign In
  </button>
</form>

The transformation counter shows exactly how many changes were made (in this example: class→className ×2, for→htmlFor, onsubmit→onSubmit, novalidate→noValidate, input tag self-closed, maxlength→maxLength, autocomplete→autoComplete).

[Try HTML to JSX Converter](/tools/html-to-jsx)

---

3. JSON Path Finder - Navigate Complex API Responses

Modern APIs return deeply nested JSON structures. Navigating them manually to find the right path for a value - especially in responses with arrays of objects containing arrays of objects - is tedious and error-prone.

The JSON Path Finder renders JSON as an interactive tree and gives you the path to any value with a single click.

JSONPath Syntax

JSONPath is the standard syntax for referencing values in JSON, similar to XPath for XML:

Three Path Format Options

JSONPath (standard): $.data.users[0].profile.email

Dot notation: data.users.0.profile.email

Bracket notation: ["data"]["users"][0]["profile"]["email"]

Different contexts require different formats. JSONPath is used by libraries like jsonpath in Node.js. Dot notation is what many object accessors use. Bracket notation is valid JavaScript to access the value directly.

Using JSONPath in JavaScript

// After finding the path $.data.users[0].profile.email in the tool,
// you can access it in JavaScript like this:

const response = await fetch('/api/users');
const data = await response.json();

// Direct access using the path structure
const email = data.data.users[0].profile.email;

// Or use a JSONPath library for dynamic path evaluation
import { JSONPath } from 'jsonpath-plus';
const email = JSONPath({ path: '$.data.users[0].profile.email', json: data })[0];

Using JSONPath in Python

import jsonpath_ng
from jsonpath_ng import parse

# Parse the expression found in the tool
jsonpath_expr = parse('$.data.users[0].profile.email')

# Extract the value from your JSON data
matches = jsonpath_expr.find(data)
email = matches[0].value

Color-Coded Type Display

The tree view uses color coding to make different JSON value types immediately distinguishable:

• Strings: green (with surrounding quotes)
• Numbers: blue
• Booleans: orange (true / false)
• Null: gray (null)
• Objects: collapsible, shows key count
• Arrays: collapsible, shows element count

For large JSON responses (hundreds of keys), the Search feature finds keys or values without manual expansion. Type any string and the tree highlights or filters to matching nodes.

[Try JSON Path Finder](/tools/json-path-finder)

---

4. Color Blindness Simulator - Design for Everyone

Approximately 8% of males and 0.5% of females have some form of color vision deficiency (CVD). If your design relies on color alone to convey information - red means error, green means success - a significant portion of your users cannot interpret it correctly.

The Color Blindness Simulator shows you exactly what your design looks like to people with each type of CVD.

The Four Types of Color Blindness

Protanopia (missing red cones, ~1% of males): Red appears dark/black. The red-green distinction is lost, with reds appearing similar to dark greens or blacks.

Deuteranopia (missing green cones, ~1% of males): Green appears shifted toward red. This is the most common form of color blindness. Red and green appear as the same brownish-yellow color.

Tritanopia (missing blue cones, ~0.003%): Blue appears greenish, yellow appears pinkish or reddish. This is rare and affects both sexes equally.

Achromatopsia (total color blindness, ~0.003%): No color perception at all - everything appears in shades of gray.

How the Simulation Works

The simulation applies scientifically derived transformation matrices to each pixel's RGB values. These matrices were developed from research into the spectral sensitivity of color-deficient observers:

// Simplified deuteranopia transformation
function simulateDeuteranopia(r, g, b) {
  // Transform matrix for deuteranopia
  const rOut = 0.625 * r + 0.375 * g + 0 * b;
  const gOut = 0.700 * r + 0.300 * g + 0 * b;
  const bOut = 0 * r + 0.300 * g + 0.700 * b;

  return [rOut, gOut, bOut];
}

// Applied to every pixel via Canvas API
const imageData = ctx.getImageData(0, 0, width, height);
for (let i = 0; i < imageData.data.length; i += 4) {
  const [r, g, b] = simulateDeuteranopia(
    imageData.data[i],
    imageData.data[i + 1],
    imageData.data[i + 2]
  );
  imageData.data[i] = r;
  imageData.data[i + 1] = g;
  imageData.data[i + 2] = b;
}

Two Modes

Color Palette mode: Enter individual hex colors or upload your brand palette. See each color as it appears under each CVD simulation. This helps identify problematic color combinations before committing to a design direction.

Image mode: Upload a screenshot, mockup, or design file. The tool shows four simulated versions side by side. You can immediately see whether your error states (red), success states (green), and warning states (yellow) remain distinguishable under each simulation.

Accessible Design Principles

After using the simulator, you may need to fix color combinations that fail. The key rule: never rely on color alone. Use additional cues:

• Add icons (a checkmark for success, an X for error)
• Add text labels ("Error: invalid email")
• Use patterns or shapes in addition to color
• Ensure sufficient contrast between elements regardless of color

The Color Contrast Checker is a useful companion tool - it checks whether your text color has sufficient contrast against its background, which matters for all users and is required for WCAG compliance.

[Try Color Blindness Simulator](/tools/color-blindness-simulator)

---

5. CSS Specificity Calculator - Stop Guessing Why Your Styles Break

CSS specificity is the algorithm browsers use to determine which rule wins when multiple rules target the same element. It is the most common cause of "why is my CSS not working?" debugging sessions.

How Specificity Is Calculated

Specificity is expressed as three numbers: (A, B, C)

Specificity is compared from left to right. A single ID selector (1,0,0) always beats any number of class selectors (0,N,0).

Examples

/* Specificity: (0, 0, 0) - the universal selector */
* { color: red; }

/* Specificity: (0, 0, 1) - one type selector */
p { color: blue; }

/* Specificity: (0, 1, 0) - one class selector */
.text { color: green; }

/* Specificity: (0, 1, 1) - one class + one type */
p.text { color: orange; }

/* Specificity: (1, 0, 0) - one ID selector */
#main { color: purple; }

/* Specificity: (1, 1, 1) - one ID + one class + one type */
#main .text p { color: yellow; }

/* Specificity: (0, 2, 1) - two classes + one type */
.nav .item span { color: pink; }

Complex Selectors: :not(), :is(), :has(), :where()

These modern pseudo-classes have specificity rules that trip up many developers:

`:not(selector)`: The specificity of :not() itself is zero, but the selector inside contributes:

/* :not(.active) has specificity (0,1,0) */
.nav a:not(.active) { color: gray; }
/* = class(.nav) + pseudo-element :not() (0 itself) + class(.active) = (0,2,1) */

`:is(selector-list)`: Takes the specificity of its most specific argument:

/* :is(h1, h2, h3) has specificity of h1 = (0,0,1) */
:is(h1, h2, h3).title { font-size: 2rem; }
/* = (0,0,1) + (0,1,0) = (0,1,1) */

`:where(selector-list)`: Always has zero specificity:

/* :where(.container, .wrapper) has specificity (0,0,0) */
:where(.container, .wrapper) p { margin: 0; }
/* = (0,0,0) + (0,0,1) = (0,0,1) */

`:has(selector)`: Takes the specificity of its argument:

/* :has(.active) has specificity (0,1,0) */
.nav:has(.active) { background: blue; }
/* = (0,1,0) + (0,1,0) = (0,2,0) */

The CSS Specificity Calculator handles all of these cases correctly, which many other specificity tools do not.

Visual Comparison

Enter multiple selectors to compare them side by side. The tool renders bar charts showing the relative strength of each selector, making it immediately obvious which rule will win. This is useful when debugging why a specific style is not being applied - paste both the expected and unexpected winning rule and see exactly which has higher specificity.

[Try CSS Specificity Calculator](/tools/css-specificity-calculator)

---

6. Barcode Generator - Instant Barcodes in Your Browser

Barcodes appear in inventory management, product labeling, document tracking, shipping, and event ticketing. Generating them has traditionally required desktop software or paid online services.

The Barcode Generator creates Code 128B barcodes in your browser using pure JavaScript and the Canvas API.

Code 128B Format

Code 128 is one of the most widely used 1D barcode formats. Code 128B specifically encodes all 95 printable ASCII characters plus special control characters. It is supported by virtually all barcode scanners.

Code 128B is used in:

• Shipping labels (FedEx, UPS, USPS often use Code 128)
• Inventory and warehouse management
• Library systems
• Healthcare (medication barcodes, patient wristbands)
• Document management

Customization Options

Input text:    Any ASCII text (letters, numbers, symbols)
Bar width:     1x, 2x, or 3x scaling
Height:        Customizable in pixels
Bar color:     Any hex color (default: black)
Background:    Any hex color (default: white)
Human-readable text:  Toggle on/off below the barcode

Download and Use

Generated barcodes download as PNG files. The Canvas rendering uses full device pixel ratio, so barcodes are crisp on high-DPI displays and print clearly.

For applications that need dynamically generated barcodes in code:

// Using a JavaScript barcode library in your own project
import JsBarcode from 'jsbarcode';

JsBarcode('#barcode-element', 'SKU-12345678', {
  format: 'CODE128',
  width: 2,
  height: 80,
  displayValue: true,
  fontOptions: '',
  font: 'monospace',
  textAlign: 'center',
  textPosition: 'bottom',
  textMargin: 2,
  fontSize: 20,
  background: '#ffffff',
  lineColor: '#000000',
  margin: 10,
});

The ToolBox Barcode Generator lets you generate and download without any coding.

[Try Barcode Generator](/tools/barcode-generator)

---

7. JSON to XML Converter - Complete the Data Format Toolkit

ToolBox already had an XML to JSON converter. The JSON to XML Converter completes the set by going the other direction.

When You Need JSON to XML

Enterprise systems, SOAP web services, configuration files for older systems, and Microsoft Office document formats all use XML. If you are working with a modern API that outputs JSON but need to feed data into an XML-consuming system, a converter saves manual transcription.

Conversion Rules

JSON and XML have different structural models. The converter applies these rules:

Objects become XML elements with child elements for each key:

{ "user": { "name": "Alice", "age": 30 } }

<root>
  <user>
    <name>Alice</name>
    <age>30</age>
  </user>
</root>

Arrays wrap each element in a child element (configurable name):

{ "users": ["Alice", "Bob", "Charlie"] }

<root>
  <users>
    <item>Alice</item>
    <item>Bob</item>
    <item>Charlie</item>
  </users>
</root>

Special characters are escaped to valid XML:

& → &
< → &lt;
> → &gt;
" → &quot;
' → &apos;

Configuration Options

• Root element name: Default is <root>. Change to match your target schema.
• Item element name: The element used to wrap array items. Default is <item>.
• Indentation: 2 or 4 spaces.
• XML declaration: Optionally include <?xml version="1.0" encoding="UTF-8"?> at the top.

A Real-World Example

Converting a JSON API response to XML for an enterprise data pipeline:

{
  "order": {
    "id": "ORD-12345",
    "customer": {
      "name": "Acme Corp",
      "email": "billing@acme.com"
    },
    "items": [
      { "sku": "WIDGET-A", "qty": 10, "price": 25.00 },
      { "sku": "GADGET-B", "qty": 5, "price": 49.99 }
    ],
    "total": 499.95
  }
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <order>
    <id>ORD-12345</id>
    <customer>
      <name>Acme Corp</name>
      <email>billing@acme.com</email>
    </customer>
    <items>
      <item>
        <sku>WIDGET-A</sku>
        <qty>10</qty>
        <price>25</price>
      </item>
      <item>
        <sku>GADGET-B</sku>
        <qty>5</qty>
        <price>49.99</price>
      </item>
    </items>
    <total>499.95</total>
  </order>
</root>

The output copies to clipboard or downloads as a .xml file.

[Try JSON to XML Converter](/tools/json-to-xml)

---

How These Tools Fit Into Common Workflows

The React Developer's Toolkit

A typical session for a React developer working on UI implementation:

1. Copy HTML from a Figma handoff, Bootstrap template, or existing HTML file
2. Paste into the HTML to JSX Converter to convert attributes
3. Paste the JSX into your component
4. Use the CSS Specificity Calculator to debug any style conflicts
5. Use the Color Blindness Simulator to check that your color choices are accessible

The API Integration Developer

Working with a new REST API that returns large JSON responses:

1. Paste the API response into the JSON Path Finder
2. Click through the tree to find the exact path to the values you need
3. Copy the JSONPath expression in the format appropriate for your language
4. Use CSV to JSON or JSON to XML if you need to convert the data format

The Accessibility Auditor

Checking that a design is accessible:

1. Use the Color Contrast Checker to verify text contrast ratios
2. Upload a screenshot or design mockup to the Color Blindness Simulator
3. Check all four CVD simulations
4. Revise the design to ensure information is conveyed by more than color alone

---

What All Seven Tools Have in Common

Every tool in this release shares one architectural characteristic: all processing happens in your browser.

• Image resizing: Canvas API
• HTML to JSX conversion: string manipulation in JavaScript
• JSON Path Finder: JavaScript tree rendering
• Color Blindness Simulator: Canvas pixel manipulation
• CSS Specificity Calculator: JavaScript parsing
• Barcode Generator: Canvas rendering
• JSON to XML Converter: JavaScript string building

No file is uploaded to a server. No text is transmitted. No account is required. The tools work offline after the initial page load.

That brings the total to 125+ tools in the ToolBox collection. Explore all of them from the homepage, and check the changelog for the full list of updates.