peasy-dev-embed

Embed PeasyDev widgets on any website or blog. Developer tools — JSON, YAML, regex, diff, and code formatting. Each widget is completely isolated via Shadow DOM, requires zero dependencies, and supports 3 built-in themes (light, dark, sepia). The self-executing script finds all data-peasy-dev elements on the page and renders interactive widgets automatically, including support for dynamically added elements in single-page applications via MutationObserver.

PeasyDev is part of the Peasy Tools ecosystem, providing 11 widget types for embedding file format information, tool cards, conversion guides, glossary terms, search boxes, and interactive tools directly into your pages.

Try the interactive widget builder at widget.peasydev.com -- build, preview, and copy embed code for any widget type.

Table of Contents

• Quick Start
• Widget Types
• Widget Options
• Themes
• CDN Options
• Examples
  • Format Info Card
  • Tool Card
  • Search Box
  • Format Badge (Inline)
  • Interactive Tool
  • Glossary Tooltip
  • Compact Widget (Sidebar)
  • Dark Theme
• Technical Details
• Learn More
• Peasy Tools Family
• License

Quick Start

<!-- 1. Place a widget element where you want it -->
<div data-peasy-dev="tool"
  data-slug="json-formatter"
  data-theme="light">
</div>

<!-- 2. Load the embed script once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

That's it. The script will find all data-peasy-dev elements, fetch data from the PeasyDev API, and render each widget with full Shadow DOM style isolation.

Widget Types

PeasyDev supports 11 widget types -- 11 common types available on all Peasy sites.

| Type | Description | Usage | |------|-------------|-------| | format | File format info card with specs, MIME type, and use cases | <div data-peasy-dev="format" data-slug="..."></div> | | tool | Tool card with description and direct launch link | <div data-peasy-dev="tool" data-slug="..."></div> | | convert | Conversion card showing input/output format pair | <div data-peasy-dev="convert" data-slug="..."></div> | | compare | Side-by-side comparison of two formats or tools | <div data-peasy-dev="compare" data-slug="..."></div> | | glossary | Glossary term tooltip with definition on hover | <div data-peasy-dev="glossary" data-slug="..."></div> | | gallery | Grid gallery of available tools for a category | <div data-peasy-dev="gallery" data-slug="..."></div> | | guide | Guide/tutorial card with summary and read-more link | <div data-peasy-dev="guide" data-slug="..."></div> | | usecase | Use-case card showing when and why to use a tool | <div data-peasy-dev="usecase" data-slug="..."></div> | | badge | Inline badge showing format type or tool category | <div data-peasy-dev="badge" data-slug="..."></div> | | search | Search box with autocomplete for tools and formats | <div data-peasy-dev="search" data-slug="..."></div> | | interactive | Embedded interactive tool via iframe | <div data-peasy-dev="interactive" data-slug="..."></div> |

Widget Options

All options are set via data-* attributes on the widget element.

| Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | data-peasy-dev | format, tool, convert, compare, glossary, gallery, guide, usecase, badge, search, interactive | required | Widget type to render | | data-slug | any valid slug | -- | Format or tool slug (format, tool, glossary, guide, usecase widgets) | | data-from | format slug | -- | Source format for conversion widget | | data-to | format slug | -- | Target format for conversion widget | | data-a | slug | -- | First item for comparison widget | | data-b | slug | -- | Second item for comparison widget | | data-category | category slug | -- | Filter gallery by category | | data-url | full URL | -- | Tool URL for interactive (iframe) widget | | data-height | e.g. "500px" | "400px" | Iframe height for interactive widget | | data-label | any string | slug | Display label for badge widget | | data-placeholder | any string | "Search tools..." | Search input placeholder text | | data-theme | light, dark, sepia, auto | light | Visual theme for the widget | | data-size | compact, default, large | default | Widget size variant | | data-lang | en, ko, ja, es, etc. | en | Language for widget labels | | data-track | true, false | false | Send anonymous usage analytics |

Themes

Three built-in themes are available, plus an auto mode that follows the user's OS preference.

<!-- Light theme (default) -- clean white background -->
<div data-peasy-dev="tool" data-slug="json-formatter" data-theme="light"></div>

<!-- Dark theme -- dark background, light text -->
<div data-peasy-dev="tool" data-slug="json-formatter" data-theme="dark"></div>

<!-- Sepia theme -- warm, paper-like appearance -->
<div data-peasy-dev="tool" data-slug="json-formatter" data-theme="sepia"></div>

<!-- Auto theme -- follows prefers-color-scheme -->
<div data-peasy-dev="tool" data-slug="json-formatter" data-theme="auto"></div>

Each theme sets CSS custom properties inside the Shadow DOM. The accent color (#0891B2) is consistent across all themes, providing brand recognition for PeasyDev.

CDN Options

jsDelivr (recommended -- global CDN, auto-updates with npm)

<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

npm (for bundlers like webpack, Vite, Rollup)

npm install peasy-dev-embed

// Just import -- the script self-executes and activates all widgets
import 'peasy-dev-embed';

ESM import (for modern module-based setups)

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.esm.js';
</script>

Examples

Format Info Card

Display detailed information about a file format including MIME type, extensions, and use cases.

<!-- PeasyDev format info card with light theme -->
<div data-peasy-dev="format" data-slug="json-formatter" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Tool Card

Show a tool card with its description, category, and a direct link to launch the tool.

<!-- PeasyDev tool card -->
<div data-peasy-dev="tool" data-slug="json-formatter" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Search Box

Add a search widget with autocomplete for finding tools and formats.

<!-- Search across PeasyDev tools and formats -->
<div data-peasy-dev="search"
  data-placeholder="Search PeasyDev tools..."
  data-theme="light">
</div>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Format Badge (Inline)

Display a compact inline badge showing a format type or tool category.

<p>This file is in <div data-peasy-dev="badge" data-slug="json-formatter"></div> format.</p>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Interactive Tool

Embed a full interactive tool via iframe. Use the data-slug attribute with the format category/tool-name.

<!-- Embed an interactive PeasyDev tool -->
<div data-peasy-dev="interactive"
  data-slug="dev/example-tool"
  data-height="500"
  data-theme="light">
</div>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Note: The data-slug value uses the format category-slug/tool-slug. Find available tools at peasydev.com/api/v1/tools/.

Glossary Tooltip

Show a glossary term with its definition, rendered as a tooltip-style card.

<div data-peasy-dev="glossary" data-slug="lossless" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Compact Widget (Sidebar)

Use the compact size for sidebar placements.

<div data-peasy-dev="format"
  data-slug="json-formatter"
  data-theme="light"
  data-size="compact">
</div>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Dark Theme

<div data-peasy-dev="format"
  data-slug="json-formatter"
  data-theme="dark"
  data-size="large">
</div>
<script src="https://cdn.jsdelivr.net/npm/peasy-dev-embed@1/dist/embed.min.js"></script>

Technical Details

• Shadow DOM: Complete CSS isolation -- widget styles never leak into your page, and your page styles never affect the widget
• Zero dependencies: No jQuery, React, Alpine, or any external library required
• System fonts: Uses the system font stack -- no Google Fonts request, instant text rendering
• Self-executing: Include the script tag and add data attributes -- no initialization code needed
• MutationObserver: Automatically detects and renders widgets added dynamically (SPA-compatible)
• Lazy loading: Widgets outside the viewport use IntersectionObserver for deferred initialization
• CORS: PeasyDev API has CORS enabled for all origins
• Bundle size: < 8KB gzipped (IIFE) -- minimal impact on page load
• Accessibility: Semantic HTML, proper ARIA attributes, keyboard navigation support
• Powered by: Each widget includes a subtle "PeasyDev" backlink in the footer

Learn More

Visit peasydev.com for the full PeasyDev experience.

• All Tools: peasydev.com
• Formats: peasydev.com/formats/
• Glossary: peasydev.com/glossary/
• Guides: peasydev.com/guides/
• API Documentation: peasydev.com/developers/
• OpenAPI Spec: peasydev.com/api/openapi.json
• Widget Builder: widget.peasydev.com
• npm Package: npmjs.com/package/peasy-dev-embed

Peasy Tools Family

Part of Peasy Tools -- simple, fast, free developer tools.

| Site | Domain | npm | Focus | |------|--------|-----|-------| | PeasyPDF | peasypdf.com | npm | PDF tools, conversion, compression, merging, and splitting | | PeasyImage | peasyimage.com | npm | Image conversion, compression, resizing, and format tools | | PeasyVideo | peasyvideo.com | npm | Video conversion, compression, trimming, and format tools | | PeasyAudio | peasyaudio.com | npm | Audio conversion, compression, trimming, and format tools | | PeasyCSS | peasycss.com | npm | CSS tools, minification, formatting, color conversion, and previews | | PeasyText | peasytext.com | npm | Text tools, word counting, encoding, hashing, and formatting | | PeasyTools | peasytools.com | npm | The Peasy Tools hub | | PeasyFormats | peasyformats.com | npm | File format encyclopedia | | PeasyDev | peasydev.com | npm | Developer tools | | PeasyDesign | peasydesign.com | npm | Design tools | | PeasyQR | peasyqr.com | npm | QR code generation, scanning, and customization tools | | PeasySEO | peasyseo.com | npm | SEO analysis tools | | PeasySafe | peasysafe.com | npm | Security tools | | PeasySocial | peasysocial.com | npm | Social media tools | | PeasyMath | peasymath.com | npm | Math tools | | PeasyGen | peasygen.com | npm | Generator tools |

License

MIT -- see LICENSE.

Built by Peasy Tools.