11 Third-Party Integrations: Prettier, GitHub Gist, HIBP & More

Building with Third-Party Services Without Compromising Privacy

ToolBox has always been built around a single principle: every tool should run in your browser, not on a server. That principle avoids the usual trade-offs - your data stays with you, tools work offline, and there is nothing to pay for because there is no server infrastructure to maintain.

But "client-side only" does not have to mean "toy implementations." Production-quality tools need production-quality underlying technology. So we integrated 11 third-party services and libraries - each chosen because it could deliver professional-grade functionality without requiring your data to leave your machine.

Here is what changed, how each integration works, and why it matters.

---

1. Prettier WASM - Real Code Formatting, Not Regex Heuristics

Before this integration, the Code Formatter used a basic internal formatting approach that worked for simple cases but produced inconsistent results on complex code. It could not handle edge cases in JavaScript expression formatting, TypeScript generics, JSX multiline props, or complex CSS values.

Now it runs the real Prettier engine via its standalone WebAssembly build.

How Prettier WASM Works

WebAssembly (WASM) is a binary instruction format that runs at near-native speed in modern browsers. Prettier publishes a self-contained standalone.js bundle that includes the parser and printer for all supported languages. When this bundle loads, the full Prettier engine is available in your browser tab - no server required.

// How the integration works internally
import prettier from 'https://unpkg.com/prettier@3/standalone.js';
import parserBabel from 'https://unpkg.com/prettier@3/plugins/babel.js';

const formatted = await prettier.format(userCode, {
  parser: 'babel',
  plugins: [parserBabel],
  tabWidth: 2,
  singleQuote: true,
  semi: true,
  trailingComma: 'es5',
});

Supported Languages and Parsers

Configurable Options

The formatter exposes the most commonly used Prettier options:

• Tab width: 2 or 4 spaces (or tabs)
• Semicolons: always, never, or only where required to disambiguate
• Quotes: single or double for strings
• Trailing commas: none, ES5-only locations, or all valid positions
• Bracket spacing: spaces inside object literal braces
• Print width: the line length before Prettier wraps

Why This Matters

Before this integration, running the same code through the site's formatter and then through npx prettier in a real project would sometimes produce different results. Now they are identical - the formatter on the site is the formatter in your IDE extension and CI pipeline. What you see is exactly what npx prettier --write produces.

Your code never leaves the browser. The Prettier WASM bundle downloads once, is cached, and runs entirely locally for every subsequent format.

[Try Code Formatter](/tools/code-formatter)

---

2. MDN Browser Compat Data - Accurate Feature Support Tables

The browser compatibility tool previously used a hand-maintained dataset. That approach has an inherent problem: browsers ship new features constantly, and a hand-maintained dataset goes stale within weeks.

The MDN Browser Compat Data Package

The @mdn/browser-compat-data npm package is the authoritative source of browser compatibility information. It powers the compatibility tables on every MDN Web Docs page. The package is maintained by Mozilla with contributions from browser vendors and the web development community. It receives updates multiple times per week as new browser versions ship.

The dataset covers:

• CSS properties and values (including experimental ones)
• HTML elements and attributes
• JavaScript built-ins (Array.prototype.flatMap, Promise.allSettled, etc.)
• Web APIs (IntersectionObserver, ResizeObserver, WebSocket, etc.)
• HTTP headers, MIME types, and HTTP status codes
• SVG elements and attributes
• MathML elements
• WebAssembly features

What You Can Look Up

Search for any feature by name and see a compatibility table across major browsers:

The table also shows:

• Whether the feature is behind a flag in some browser versions
• Whether vendor prefixes are required (e.g., -webkit-)
• Features that were added and later removed
• Notes about partial support or known bugs

Example: Checking CSS Grid Support

Searching for CSS Grid Layout shows that it became available without flags in Chrome 57, Firefox 52, Safari 10.1, and Edge 16. The table also notes that subgrid (a later addition) has different support numbers, helping you decide whether to use it or provide a fallback.

/* Safe to use in modern browsers based on MDN compat data */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Subgrid has more limited support - check MDN compat data before using */
.nested {
  display: grid;
  grid-template-rows: subgrid;
}

The MDN data integration keeps the compatibility information current without manual maintenance.

[Try Browser Feature Support](/tools/browser-feature-support)

---

3. HIBP Password Check - The k-Anonymity Model Explained

The Have I Been Pwned (HIBP) Passwords API contains billions of password hashes collected from real data breaches. Checking whether a password appears in this dataset is one of the most useful security checks available.

The challenge: how do you check a password against a remote database without sending the password to that database?

The k-Anonymity Solution

HIBP implements a clever privacy model called k-Anonymity that solves this problem:

1. Your browser hashes the password using SHA-1
2. Only the first 5 characters of the resulting 40-character hex hash are sent to the HIBP API
3. The HIBP API returns all hash suffixes in its database that begin with those 5 characters - typically between 200 and 1,000 entries
4. Your browser checks locally whether the remaining 35 characters of your full hash appear in the returned list

// Simplified implementation of the k-Anonymity HIBP check
async function checkPasswordBreached(password) {
  // Step 1: Hash the password with SHA-1
  const encoder = new TextEncoder();
  const data = encoder.encode(password);
  const hashBuffer = await crypto.subtle.digest('SHA-1', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('').toUpperCase();

  // Step 2: Split the hash - prefix (5 chars) sent to API, suffix (35 chars) kept local
  const prefix = hashHex.substring(0, 5);
  const suffix = hashHex.substring(5);

  // Step 3: Send only the prefix to the API
  const response = await fetch(`https://api.pwnedpasswords.com/range/${prefix}`);
  const text = await response.text();

  // Step 4: Check locally whether our suffix appears in the returned list
  const hashes = text.split('\n');
  for (const line of hashes) {
    const [returnedSuffix, count] = line.split(':');
    if (returnedSuffix.trim() === suffix) {
      return parseInt(count.trim(), 10); // Returns how many times the password appeared in breaches
    }
  }

  return 0; // Not found in any breach
}

Why the First 5 Characters Are Safe to Transmit

A SHA-1 hash is 40 hexadecimal characters, giving 16^40 possible values. The first 5 characters represent only 16^5 = 1,048,576 possible prefixes. Knowing that your hash starts with a particular 5-character prefix narrows down the set of possible passwords to roughly 1 in a million - not enough to reconstruct the original password.

The API returns all matching suffixes, so the HIBP server never sees your full hash. The server cannot determine which specific password you are checking.

This technique was developed and published by Troy Hunt (creator of HIBP) and implemented across major password managers including 1Password, Bitwarden, and Firefox Monitor.

Interpreting the Results

• 0 occurrences: The password has not appeared in any known breach. This does not mean it is a strong password - just that it is not in HIBP's breach database.
• 1-10 occurrences: Rare - possibly from a small breach. Consider changing it.
• 100+ occurrences: Common password. Change it immediately.
• 10,000+ occurrences: Extremely common (e.g., "password123"). Never use it.

[Try Password Generator](/tools/password-generator)

---

4. Google Fonts - Live Font Pairing with Real Typography

Typography decisions are one of the most visually impactful choices in any design. The Font Pair Generator helps by providing curated combinations and rendering them live using actual Google Fonts.

How Font Loading Works

Google Fonts provides a CDN-hosted stylesheet that loads font files on demand. The integration uses the Google Fonts API to fetch font families and render them in the browser:

<!-- Example output from the Font Pair Generator -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@400;600&display=swap" rel="stylesheet">

/* CSS to apply the pairing */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

body {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 400;
}

Principles of Good Font Pairing

The curated pairings in the generator follow established typographic principles:

Contrast without conflict: A serif heading font paired with a sans-serif body font creates visual hierarchy. The two fonts look distinctly different but share compatible proportions.

Shared x-height: Fonts with similar x-heights (the height of lowercase letters relative to the cap height) feel balanced together.

Consistent weight range: If your heading font has thin and bold weights, your body font should too, so you have flexibility across the design.

Personality alignment: A playful display font does not pair well with a strict monospace body font. Fonts should share a general aesthetic register.

[Try Font Pair Generator](/tools/font-pair-generator)

---

5. GitHub Gist - Save and Share Formatted Output

The save-to-Gist integration closes a workflow gap: you format or process content in a tool, then want to share the result with a colleague or save it for later reference.

What Is a GitHub Gist?

A GitHub Gist is a lightweight code-sharing service. Unlike a full repository, a Gist is a single file (or small collection of files) with a shareable URL. Gists can be public (discoverable in search) or secret (accessible only to those with the URL). Both types are free.

How the Integration Works

The SaveToGist component handles the entire workflow:

1. Click "Save to Gist" in the tool
2. A GitHub authentication flow opens (OAuth)
3. After authenticating, the tool sends the formatted content to the GitHub Gist API
4. A shareable Gist URL is returned and displayed

// Simplified Gist creation via GitHub API
async function saveToGist(filename, content, description, isPublic = false) {
  const response = await fetch('https://api.github.com/gists', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${githubToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      description: description,
      public: isPublic,
      files: {
        [filename]: {
          content: content,
        },
      },
    }),
  });

  const gist = await response.json();
  return gist.html_url; // The shareable URL
}

Which Tools Support Gist Saving

• JSON Formatter - save formatted and validated JSON
• Code Formatter - save Prettier-formatted code snippets
• Diff Checker - save a diff to reference later
• Markdown Preview - save Markdown source

The Sharing Workflow in Practice

Instead of:

1. Format JSON in a tool
2. Copy to clipboard
3. Open a new message or document
4. Paste and format
5. Send

With Gist integration:

1. Format JSON in the tool
2. Click "Save to Gist"
3. Copy the Gist URL and share it

The recipient opens the URL and sees the formatted content with syntax highlighting in their browser. They can also fork the Gist to make their own copy.

---

6. Frankfurter API - Real Exchange Rates from the European Central Bank

Currency conversion tools are only as useful as the rates they use. Many sites use rates that are hours or days old, or do not disclose their data source.

Why the European Central Bank

The European Central Bank (ECB) publishes official reference exchange rates every working day at 16:00 CET. These are the rates used in regulated financial reporting across the European Union. They are not mid-market rates from a commercial provider - they are the official rates published by a central bank.

The Frankfurter API wraps the ECB data in a clean REST interface with no API key required:

// Get today's EUR to USD rate
const response = await fetch('https://api.frankfurter.app/latest?from=EUR&to=USD');
const data = await response.json();
// data.rates.USD = current EUR/USD rate

// Get historical rate for a specific date
const historical = await fetch('https://api.frankfurter.app/2024-01-15?from=EUR&to=GBP');

// Get rate history for a date range (used for the chart)
const history = await fetch('https://api.frankfurter.app/2024-01-01..2024-12-31?from=EUR&to=JPY');

Supported Currencies

The tool supports all 32 currencies published by the ECB:

[Try Currency Converter](/tools/currency-converter)

---

7. Leaflet + OpenStreetMap - Interactive IP Geolocation Maps

When you look up an IP address, seeing the location on a map adds immediate context that coordinates alone cannot convey. The interactive map integration uses two open-source mapping libraries:

Leaflet.js

Leaflet is a lightweight JavaScript mapping library used across thousands of web applications. It handles map rendering, zoom controls, pan gestures, and marker placement. At approximately 40KB gzipped, it is much lighter than the Google Maps JavaScript API.

// How the IP map is initialized
import L from 'leaflet';

const map = L.map('map-container').setView([lat, lon], 10);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors',
}).addTo(map);

L.marker([lat, lon])
  .addTo(map)
  .bindPopup(`<b>Approximate location</b><br>${city}, ${country}`)
  .openPopup();

OpenStreetMap

OpenStreetMap (OSM) is the open-source collaborative world map maintained by a global community of contributors. It is used by Apple Maps, Foursquare, Wikipedia, and many other services. The tile layer is freely available for non-commercial and low-volume commercial use.

Unlike Google Maps, OpenStreetMap does not require an API key for basic usage, which keeps this integration free and without any authentication setup.

Geolocation Accuracy

IP geolocation is approximate. The accuracy depends on:

• ISP-level precision (most common): Places the location in the city where the ISP's infrastructure is located - may be accurate to within a few kilometers
• Region-level precision: For VPNs, proxies, and some mobile carriers, the location may show only the country or state
• Data center IPs: Show the location of the data center, not the user

The map shows the returned coordinates without claiming precise accuracy.

[Try IP Address Lookup](/tools/ip-address-lookup)

---

8. AI Regex Generator - Thirty-Plus Patterns Plus Optional AI

Regular expressions are notoriously difficult to write from scratch. A small mistake in a regex - a missing backslash, a greedy vs. non-greedy quantifier, a character class misconfiguration - can produce subtle bugs that are hard to diagnose.

The Built-In Pattern Library

The tool ships with 30+ pre-tested patterns covering the most common use cases:

Each pattern includes a plain-English explanation and example matches.

The Optional AI Enhancement

When the built-in patterns do not cover your specific need, you can describe what you want in plain English and the AI generates a regex. The BYOK model means your API key goes directly from your browser to OpenAI or Anthropic - it does not pass through ToolBox servers.

User prompt: "Match strings that start with 'SKU-' followed by exactly 8 uppercase letters or digits"
AI output: ^SKU-[A-Z0-9]{8}$
Explanation: Anchors at start (^) and end ($), literal 'SKU-', then exactly 8 characters
             from the set of uppercase letters A-Z and digits 0-9.

You can then test the generated regex immediately using the built-in test panel, or open the Regex Tester for more detailed testing.

[Try Regex Generator](/tools/regex-generator)

---

9. AI CSS Generator - Snippets Plus Optional AI

The CSS generator follows the same dual approach: a large library of ready-to-use snippets for common patterns, plus optional AI for custom requests.

Ready-to-Use CSS Snippet Categories

The 20+ built-in snippets cover patterns that developers look up repeatedly:

Layout patterns:

/* CSS Grid: 3-column responsive layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

Visual effects:

/* Glassmorphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Animations:

/* Skeleton loading animation */
@keyframes skeleton-loading {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

The snippets are accompanied by live previews wherever applicable, using the same pattern as the other CSS tools on ToolBox like the Border Radius Generator and Box Shadow Generator.

[Try CSS Generator](/tools/css-generator)

---

10. Live OG Fetcher - Real Open Graph Tag Preview

The Open Graph protocol determines how your pages appear when shared on social media. A poorly configured og:image that is the wrong size, an og:description that is too long, or a missing og:title can make your content look broken or untrustworthy when shared.

What the OG Fetcher Does

Enter any live URL, and a server-side proxy fetches the page's HTML and extracts the <meta> tags. The tool then renders preview cards showing exactly how the link would appear on different platforms.

<!-- The meta tags the tool reads and previews -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A description of your page content" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A description for Twitter" />
<meta name="twitter:image" content="https://yoursite.com/twitter-image.png" />

Platform-Specific Requirements

The OG Preview tool checks your tags against these requirements and highlights issues.

[Try OG Preview](/tools/og-preview)

---

11. NPM Package Explorer - Evaluate Dependencies Before Adding Them

Adding an npm package is a decision that affects your bundle size, security surface area, and long-term maintainability. The NPM Package Explorer helps you evaluate packages before committing.

What to Check Before Adding a Dependency

Bundle size: A package that adds 200KB to your bundle for a small utility function is rarely worth it. Bundlephobia shows the minified + gzipped size and compares it to alternatives.

Download count: High weekly downloads indicate a package is actively used and maintained. A package with 100 downloads per week may be abandoned.

License: Check that the license is compatible with your project. MIT and Apache 2.0 are permissive. GPL requires your project to be open source if distributed.

Last publish date: A package last updated 4 years ago may have unpatched vulnerabilities or be incompatible with modern tooling.

Dependencies: A small package that depends on 50 other packages brings all those packages into your project.

# What the tool shows vs. what you'd run locally

# Bundle size (shown in tool via Bundlephobia)
npx bundlephobia lodash@4.17.21
# → minified: 70.7 KB, gzipped: 24.7 KB

# CDN link (shown in tool - copy and paste)
https://unpkg.com/lodash@4.17.21/lodash.min.js
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
https://esm.sh/lodash@4.17.21

# Weekly downloads (shown in tool via npm registry API)
# → 47 million downloads per week

The tool surfaces all this information in one place, saving the multiple browser tabs you would otherwise need to open.

[Try NPM Package Explorer](/tools/npm-explorer)

---

12. Stock Photo Search - Unsplash Integration with BYOK

High-quality images are essential for presentations, blog posts, documentation, and design mockups. Unsplash provides a large library of high-resolution photos under a permissive license.

The BYOK Approach

Unsplash requires an API key, but the free tier allows 50 requests per hour - enough for regular developer use. Rather than proxying requests through ToolBox servers (which would require storing your credentials server-side), the tool uses the BYOK model: you enter your Unsplash API key once, it is saved in localStorage, and all requests go directly from your browser to the Unsplash API.

Your API key never touches ToolBox infrastructure.

[Try Stock Photo Search](/tools/stock-photo-search)

---

Privacy Architecture Across All 11 Integrations

A common thread runs through every integration: privacy was not an afterthought.

This architecture means ToolBox never sees your code, your passwords, your API keys, or your personal data. The tools work with your data on your machine.

---

Using These Integrations Together

The integrations are designed to complement each other in real workflows:

JavaScript package evaluation workflow:

1. Search the NPM Package Explorer to evaluate bundle size and license
2. Copy the CDN link directly into your project or prototype
3. Format your code with the Code Formatter (Prettier WASM) after integration

Password security workflow:

1. Generate a strong password with the Password Generator
2. Check it against HIBP to verify it has not appeared in a breach
3. Store the generated password in your password manager

Open Graph optimization workflow:

1. Set up your meta tags with the Meta Tag Generator
2. Preview them with the OG Preview fetcher to see exactly how they render
3. Adjust until all platform previews look correct

---

What These Integrations Represent

Each integration took time to evaluate, implement, and verify. The question for each one was not "can we add this?" but "does this genuinely make the tool more useful without making it less private?"

Prettier WASM passes: it makes the code formatter produce professional-grade output with no server involvement. HIBP with k-Anonymity passes: it adds real security value with a clever privacy-preserving protocol. Frankfurter passes: it adds accurate, current data from a trustworthy public source.

Every integration in this list passed that evaluation. You can explore all of them from the homepage or check the changelog for the complete list of updates.