The Embeddable Widget Kit
Pick any Demystify playground, size it, match your theme, and the kit hands you the exact copy-paste snippet — a drop-in <iframe> plus a data-attribute <script> alternative — that embeds a live, sandboxed, no-login playable into any blog post, docs page, or academy. The moat is where the good stuff goes: instead of gating the working machinery behind one domain, the demystification travels to wherever your reader already is, and every embed footer-links home as a live backlink. Runs entirely in your browser (0 uploads, works offline).
How to use it
- Pick a playground from the embed-safe list — Runway Clock, Will It Fit, The Lock-in Detector, and friends.
- Drag the height slider (it clamps to a sane 320–1200px) and choose a theme — Auto follows the host page, or force Light/Dark to match your brand.
- Copy the iframe snippet for the simplest drop-in, or the script snippet if you prefer a data-attribute
<div>the loader hydrates. - Paste it into your page. The embed runs the same in-browser engine as this site — no key, no login, nothing uploaded.
What this clears up (the fundamentals)
- An embed is code you own, not a link you beg for — the
<iframe>string is complete and self-contained; there is no signup, no account, no server round-trip to make it work. - Two shapes, one result — an
<iframe>is the zero-JS drop-in; a data-attribute<div>+ async loader is the progressive-enhancement path. Same playable either way. - Theme is a contract, not a guess —
autoinherits the host page's colour scheme; an explicit theme rides adata-themeattribute and a?theme=query so it renders the same everywhere. - Distribution is the growth loop — because the machinery ships to the reader, every partner page becomes a live demo and a live backlink at zero outbound cost. That is the whole point of an embed kit.
Where it's used
The free distribution layer for the Demystify Playgrounds — guest blog placements, tenant academies, developer docs, a learner's own portfolio. It's a miatz build-lab concept playable: play the snippet generator here, then learn to build the sandboxed-iframe embed loader, the theme contract, and the CSP allow-list yourself.
FAQ
What's the difference between the iframe and the script snippet?
The <iframe> is a complete, zero-JavaScript drop-in — paste it and it works. The script snippet is a data-attribute <div> plus a small async loader that hydrates it in place; use it when you want the embed to progressively enhance or inherit page layout. Both load the same sandboxed playable.
Will the embed slow my page down?
No — the iframe carries loading="lazy", so the browser only fetches the playable when it scrolls near the viewport. It ships no third-party cookies and no tracking, and it runs the same on-device engine as the main site.
Do my visitors need to log in?
No. Every embed is a no-login, sandboxed instance. A visitor uses it exactly as on the main site, and a persistent "Powered by Demystify — try more" footer links back to the full gallery.
What about my Content-Security-Policy?
Both the demystifysystem.com and miatz.com origins are already allow-listed for framing, so the embed loads without CSP surgery on your side. The snippet tells you this inline.
Is anything uploaded?
No. The snippet is assembled entirely in your browser from the id, height, and theme you pick — nothing is transmitted, stored, or logged. Turn off your Wi-Fi and it still generates the code.
Limits
This kit generates the embed code; it doesn't host your page or preview the live playable inline. The height is clamped to a sensible range and the theme is a fixed set (auto/light/dark) — deliberately opinionated, not a full white-label styling console. Which playgrounds are embed-safe is a curated list, so a brand-new tool may not appear until it's cleared for embedding.
Related
Part of the Demystify Playgrounds. Explore the rest from the Playgrounds home.
Bookmark this page (Ctrl+D, or ⌘D on Mac) — it works offline the next time you need it.