DevToolbox Embed API v1.0

Embed 41 free developer tools on your website, documentation, or web application. No API key required. No rate limits. Every tool works via a simple iframe embed with optional JavaScript integration for advanced use cases.

Quick Start
Iframe Embed Reference
Customization Options
PostMessage API
Live Demo
Available Tools
Framework Integration Examples
Best Practices
Attribution

Quick Start

Get a tool running on your site in under 30 seconds. Copy the iframe snippet, paste it into your HTML, and you are done.

Pick a tool from the available tools list below. Each tool has a stable URL at https://devtoolbox.dedyn.io/tools/{tool-name}.
Add the iframe to your page. Set width and height to fit your layout. The tool renders fully within the frame.
Done. The tool is interactive and works immediately. No scripts, API keys, or backend setup needed.

<!-- Embed the JSON Formatter on your page -->
<iframe
  src="https://devtoolbox.dedyn.io/tools/json-formatter"
  width="100%"
  height="600"
  frameborder="0"
  loading="lazy"
  title="JSON Formatter & Validator"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe Embed Reference

Every tool on DevToolbox can be embedded using a standard HTML <iframe> element. Tools are full-page web applications that adapt to the iframe dimensions.

Basic Syntax

<iframe
  src="https://devtoolbox.dedyn.io/tools/{tool-name}"
  width="{width}"
  height="{height}"
  frameborder="0"
  title="{descriptive title}"
></iframe>

Iframe Attributes

Attribute	Type	Description
`src` Required	URL	The full URL of the tool. Format: `https://devtoolbox.dedyn.io/tools/{tool-name}`
`width` Optional	String	Width of the iframe. Use `"100%"` for responsive layouts or a fixed pixel value like `"800"`. Default: `300`
`height` Optional	String	Height of the iframe in pixels. Recommended: `500` - `800` depending on the tool. Default: `150`
`frameborder` Optional	String	Set to `"0"` to remove the default iframe border.
`loading` Optional	String	Set to `"lazy"` to defer loading until the iframe is near the viewport. Improves page performance when embedding multiple tools.
`title` Optional	String	Accessible title for screen readers. Required for WCAG compliance.
`sandbox` Optional	String	Security sandbox. Use `"allow-scripts allow-same-origin"` for full tool functionality. Omit to use browser defaults.

Customization Options

Responsive Sizing

For responsive layouts, wrap the iframe in a container with a percentage-based width and set the iframe to fill it:

<!-- Responsive container -->
<div style="width: 100%; max-width: 900px; margin: 0 auto;">
  <iframe
    src="https://devtoolbox.dedyn.io/tools/regex-tester"
    width="100%"
    height="650"
    frameborder="0"
    loading="lazy"
    title="Regex Tester"
  ></iframe>
</div>

Aspect Ratio Container

For a fully fluid embed that maintains a consistent aspect ratio across screen sizes:

<!-- 16:9 aspect ratio container -->
<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://devtoolbox.dedyn.io/tools/json-formatter"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    loading="lazy"
    title="JSON Formatter"
  ></iframe>
</div>

Recommended Sizes by Tool Type

Tool Category	Min Width	Recommended Height	Examples
Formatters / Validators	600px	600 - 700px	JSON Formatter, SQL Formatter, YAML Validator
Generators	400px	500 - 600px	UUID Generator, Password Generator, Lorem Ipsum
Converters / Encoders	500px	550 - 650px	Base64, URL Encoder, JSON to CSV
Visual Tools	600px	650 - 800px	Color Picker, CSS Gradient, Box Shadow
Text / Diff Tools	700px	600 - 700px	Diff Checker, Markdown Preview, Regex Tester

Dark Theme Integration

DevToolbox tools use a dark theme by default (background: #0f1117). If your site uses a dark theme, the tools will integrate seamlessly. For light-themed sites, you can add a subtle border to visually separate the embed:

<iframe
  src="https://devtoolbox.dedyn.io/tools/hash-generator"
  width="100%"
  height="600"
  frameborder="0"
  title="Hash Generator"
  style="border: 1px solid #e5e7eb; border-radius: 8px;"
></iframe>

PostMessage API

For advanced integrations, DevToolbox tools support the window.postMessage API. This lets your parent page communicate with embedded tools programmatically -- sending input data and receiving processed output.

How It Works

The parent page sends a message to the iframe using postMessage(). The embedded tool processes the data and sends a response back. Your page listens for the response using a message event listener.

Sending Data to a Tool

// Get a reference to the iframe
const iframe = document.getElementById('devtoolbox-embed');

// Send data to the embedded tool
iframe.contentWindow.postMessage({
  type: 'devtoolbox:setInput',
  data: '{"name": "DevToolbox", "version": 1}'
}, 'https://devtoolbox.dedyn.io');

Receiving Data from a Tool

// Listen for messages from the embedded tool
window.addEventListener('message', function(event) {
  // Always verify the origin for security
  if (event.origin !== 'https://devtoolbox.dedyn.io') return;

  const message = event.data;

  if (message.type === 'devtoolbox:output') {
    console.log('Tool output:', message.data);
  }

  if (message.type === 'devtoolbox:resize') {
    // Tool is requesting a height change
    document.getElementById('devtoolbox-embed').style.height = message.height + 'px';
  }
});

Message Types

Message Type	Direction	Description	Payload
`devtoolbox:setInput`	Parent → Tool	Set the input value of the tool	`{ type, data: string }`
`devtoolbox:getOutput`	Parent → Tool	Request the current output from the tool	`{ type }`
`devtoolbox:output`	Tool → Parent	Tool sends its processed output	`{ type, data: string }`
`devtoolbox:resize`	Tool → Parent	Tool requests an iframe height change	`{ type, height: number }`
`devtoolbox:ready`	Tool → Parent	Tool has finished loading and is ready to receive messages	`{ type, tool: string }`

Full Integration Example

Here is a complete example that embeds the JSON Formatter, sends it data when a button is clicked, and displays the formatted output:

<!DOCTYPE html>
<html>
<head>
  <title>DevToolbox Integration Example</title>
</head>
<body>
  <h2>JSON Formatter</h2>
  <textarea id="json-input" rows="5" cols="60">{"name":"DevToolbox","tools":41,"free":true}</textarea>
  <br>
  <button onclick="sendToFormatter()">Format JSON</button>

  <iframe
    id="formatter"
    src="https://devtoolbox.dedyn.io/tools/json-formatter"
    width="100%"
    height="600"
    frameborder="0"
    title="JSON Formatter"
  ></iframe>

  <div id="output"></div>

  <script>
    const iframe = document.getElementById('formatter');

    function sendToFormatter() {
      const input = document.getElementById('json-input').value;
      iframe.contentWindow.postMessage({
        type: 'devtoolbox:setInput',
        data: input
      }, 'https://devtoolbox.dedyn.io');
    }

    window.addEventListener('message', function(event) {
      if (event.origin !== 'https://devtoolbox.dedyn.io') return;

      if (event.data.type === 'devtoolbox:output') {
        document.getElementById('output').textContent = event.data.data;
      }

      if (event.data.type === 'devtoolbox:ready') {
        console.log(event.data.tool + ' is ready');
      }
    });
  </script>
</body>
</html>

Live Demo

Here is the JSON Formatter embedded live on this page. Try pasting JSON into it -- it works exactly as it does on the standalone tool page.

Live Embed Preview

The embed code for the demo above:

<iframe
  src="https://devtoolbox.dedyn.io/tools/json-formatter"
  width="100%"
  height="550"
  frameborder="0"
  loading="lazy"
  title="JSON Formatter"
></iframe>

Available Tools

All 41 tools are available for embedding. Every URL follows the pattern https://devtoolbox.dedyn.io/tools/{slug}. Free No API key required.

Formatters & Validators

JSON Formatter

/tools/json-formatter

SQL Formatter

/tools/sql-formatter

HTML Beautifier

/tools/html-beautifier

CSS Minifier

/tools/css-minifier

JS Minifier

/tools/js-minifier

YAML Validator

/tools/yaml-validator

TOML Validator

/tools/toml-validator

JSON Schema Validator

/tools/json-schema-validator

Markdown Preview

/tools/markdown-preview

Encoders & Converters

Base64 Encoder/Decoder

/tools/base64

URL Encoder/Decoder

/tools/url-encode

JSON to CSV

/tools/json-to-csv

HTML Entity Encoder

/tools/html-entity

Number Base Converter

/tools/number-base-converter

Base64 Image Encoder

/tools/base64-image

Image to Base64

/tools/image-to-base64

Generators

UUID Generator

/tools/uuid-generator

Password Generator

/tools/password-generator

Hash Generator

/tools/hash-generator

Lorem Ipsum Generator

/tools/lorem-ipsum

QR Code Generator

/tools/qr-code-generator

ASCII Art Generator

/tools/ascii-art

Security & Authentication

JWT Decoder

/tools/jwt-decoder

JWT Generator

/tools/jwt-generator

Chmod Calculator

/tools/chmod-calculator

Text & Comparison

Diff Checker

/tools/diff-checker

JSON Diff

/tools/json-diff

Regex Tester

/tools/regex-tester

Regex Debugger

/tools/regex-debugger

Text Case Converter

/tools/text-case-converter

Markdown Table Generator

/tools/markdown-table

Visual & CSS Tools

Color Picker

/tools/color-picker

CSS Gradient Generator

/tools/css-gradient

Box Shadow Generator

/tools/box-shadow

SVG Optimizer

/tools/svg-optimizer

Code Screenshot

/tools/code-screenshot

Utilities

Unix Timestamp Converter

/tools/timestamp

Cron Expression Parser

/tools/cron-parser

IP Address Lookup

/tools/ip-lookup

HTTP Request Tester

/tools/http-tester

JSON Path Finder

/tools/json-path-finder

Framework Integration Examples

Examples for embedding DevToolbox tools in popular web frameworks.

React

import React from 'react';

function DevToolboxEmbed({ tool, height = 600, title }) {
  return (
    <iframe
      src={`https://devtoolbox.dedyn.io/tools/${tool}`}
      width="100%"
      height={height}
      frameBorder="0"
      loading="lazy"
      title={title || tool}
      sandbox="allow-scripts allow-same-origin"
    />
  );
}

// Usage
function App() {
  return (
    <div>
      <h2>JSON Formatter</h2>
      <DevToolboxEmbed tool="json-formatter" height={650} title="JSON Formatter" />

      <h2>Regex Tester</h2>
      <DevToolboxEmbed tool="regex-tester" height={700} title="Regex Tester" />
    </div>
  );
}

Vue

<template>
  <div>
    <h2>{{ title }}</h2>
    <iframe
      :src="`https://devtoolbox.dedyn.io/tools/${tool}`"
      width="100%"
      :height="height"
      frameborder="0"
      loading="lazy"
      :title="title"
      sandbox="allow-scripts allow-same-origin"
    ></iframe>
  </div>
</template>

<script setup>
defineProps({
  tool: { type: String, required: true },
  height: { type: Number, default: 600 },
  title: { type: String, default: 'DevToolbox' }
});
</script>

<!-- Usage: <DevToolboxEmbed tool="hash-generator" :height="550" title="Hash Generator" /> -->

Svelte

<script>
  export let tool;
  export let height = 600;
  export let title = 'DevToolbox';
</script>

<iframe
  src="https://devtoolbox.dedyn.io/tools/{tool}"
  width="100%"
  {height}
  frameborder="0"
  loading="lazy"
  {title}
  sandbox="allow-scripts allow-same-origin"
/>

<!-- Usage: <DevToolboxEmbed tool="uuid-generator" height={500} title="UUID Generator" /> -->

Static HTML / Jekyll / Hugo

<!-- Embed in any static page, blog post, or documentation -->
<div style="margin: 2rem 0;">
  <iframe
    src="https://devtoolbox.dedyn.io/tools/base64"
    width="100%"
    height="600"
    frameborder="0"
    loading="lazy"
    title="Base64 Encoder/Decoder"
    style="border: 1px solid #333; border-radius: 8px;"
  ></iframe>
  <p style="text-align: center; font-size: 0.85rem; margin-top: 0.5rem;">
    Powered by <a href="https://devtoolbox.dedyn.io">DevToolbox</a>
  </p>
</div>

Best Practices

Performance

Always use loading="lazy" when embedding multiple tools on the same page. This prevents unnecessary network requests for tools below the fold.
Set explicit width and height attributes to prevent layout shifts (CLS) during page load.
Avoid embedding more than 3-4 tools on a single page. Each iframe is a separate browsing context with its own memory footprint.

Security

When using the PostMessage API, always verify event.origin === 'https://devtoolbox.dedyn.io' before processing messages.
Use the sandbox attribute with allow-scripts allow-same-origin to restrict the iframe's capabilities to only what the tools need.
All tools run entirely client-side. No data is sent to any server. User input stays in the browser.

Accessibility

Always include a descriptive title attribute on the iframe. Screen readers use this to announce the embedded content.
Ensure sufficient contrast between the iframe border and your page background.
Consider providing a direct link to the tool as a fallback: <a href="https://devtoolbox.dedyn.io/tools/json-formatter">Open JSON Formatter</a>

SEO

Iframe content is not indexed as part of your page. Add your own descriptive text around the embed to provide context for search engines.
Use semantic HTML headings (<h2>, <h3>) before each embedded tool.
Link back to the tool page in surrounding text so search engines can discover the relationship.

Attribution

You are free to embed any DevToolbox tool on your site at no cost. There are no API keys, usage limits, or licensing fees. All tools run client-side in the browser.

If you find these tools useful, we appreciate a link back to DevToolbox. A small attribution helps us continue building and maintaining free developer tools.

Suggested Attribution

<p>Powered by <a href="https://devtoolbox.dedyn.io">DevToolbox</a> — free developer tools</p>

Or in Markdown:

Powered by [DevToolbox](https://devtoolbox.dedyn.io) - free developer tools

Embed DevToolbox on Your Site

All 41 tools are free to embed. No signup, no API keys, no rate limits. Just copy the iframe code and paste it into your page. If you embed a tool, consider linking back to devtoolbox.dedyn.io -- it helps us keep the tools free and maintained.

Browse All Tools

DevToolbox Embed API v1.0

Contents

Quick Start

Iframe Embed Reference

Basic Syntax

Iframe Attributes

Customization Options

Responsive Sizing

Aspect Ratio Container

Recommended Sizes by Tool Type

Dark Theme Integration

PostMessage API

Sending Data to a Tool

Receiving Data from a Tool

Message Types

Full Integration Example

Live Demo

Available Tools

Formatters & Validators

Encoders & Converters

Generators

Security & Authentication

Text & Comparison

Visual & CSS Tools

Utilities

Framework Integration Examples

React

Vue

Svelte

Static HTML / Jekyll / Hugo

Best Practices

Performance

Security

Accessibility

SEO

Attribution

Suggested Attribution

Embed DevToolbox on Your Site