npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

peasy-formats-embed

v1.0.4

Published

Embed PeasyFormats widgets on any website. Lightweight (<8KB gzipped), zero dependencies, Shadow DOM isolation, 3 themes.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

dobestandobestan

Keywords

peasyembedwidgetshadow-domzero-dependenciesformatspeasyformats.comformatfile-formatspecificationcomparisonextension

Readme

peasy-formats-embed

npm License: MIT Zero Dependencies Size

Embed PeasyFormats widgets on any website or blog. File format encyclopedia — specs, comparisons, and conversion guides. 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-formats elements on the page and renders interactive widgets automatically, including support for dynamically added elements in single-page applications via MutationObserver.

PeasyFormats 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.peasyformats.com -- build, preview, and copy embed code for any widget type.

Table of Contents

Quick Start

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

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

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

Widget Types

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

Widget Options

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

| Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | data-peasy-formats | 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-formats="format" data-slug="json" data-theme="light"></div>

<!-- Dark theme -- dark background, light text -->
<div data-peasy-formats="format" data-slug="json" data-theme="dark"></div>

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

<!-- Auto theme -- follows prefers-color-scheme -->
<div data-peasy-formats="format" data-slug="json" data-theme="auto"></div>

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

CDN Options

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

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

npm (for bundlers like webpack, Vite, Rollup)

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

ESM import (for modern module-based setups)

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/peasy-formats-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.

<!-- PeasyFormats format info card with light theme -->
<div data-peasy-formats="format" data-slug="json" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/peasy-formats-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.

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

Search Box

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

<!-- Search across PeasyFormats tools and formats -->
<div data-peasy-formats="search"
  data-placeholder="Search PeasyFormats tools..."
  data-theme="light">
</div>
<script src="https://cdn.jsdelivr.net/npm/peasy-formats-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-formats="badge" data-slug="json"></div> format.</p>
<script src="https://cdn.jsdelivr.net/npm/peasy-formats-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 PeasyFormats tool -->
<div data-peasy-formats="interactive"
  data-slug="formats/example-tool"
  data-height="500"
  data-theme="light">
</div>
<script src="https://cdn.jsdelivr.net/npm/peasy-formats-embed@1/dist/embed.min.js"></script>

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

Glossary Tooltip

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

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

Compact Widget (Sidebar)

Use the compact size for sidebar placements.

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

Dark Theme

<div data-peasy-formats="format"
  data-slug="json"
  data-theme="dark"
  data-size="large">
</div>
<script src="https://cdn.jsdelivr.net/npm/peasy-formats-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: PeasyFormats 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 "PeasyFormats" backlink in the footer

Learn More

Visit peasyformats.com for the full PeasyFormats experience.

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.