@dskripchenko/embed

Live components for any page

Players, diagrams, API references, process flows, live markdown and an editor — as HTML tags. One script from a CDN, one shared Vue, and the pieces talk to each other.

Loader · ~9 KB, the rest on demand
<script src="https://cdn.jsdelivr.net/npm/@dskripchenko/embed@1/dist/embed.js"></script>
Fat bundle · no import map
<script src="https://cdn.jsdelivr.net/npm/@dskripchenko/embed@1/dist/embed.bundle.js"></script>

A process that drives the API and the video

Click a step. The flow emits dsk:node; the page opens that step's operation, and media-target plays the step's chapter. Monitoring comes from poll-url.

Event bus

    Every element event is a bubbling dsk:* DOM event; DskEmbed.on() listens to them all.

    API reference, two specs

    The full reference with a spec switcher, from specs. Loaded on first sight (loading="lazy").

    Markdown with live blocks

    Fenced mermaid, openapi, flow and video blocks become widgets — the same registry serves the editor below.

    An editor in a plain form

    The WYSIWYG holds a live API block. name="body" keeps a hidden input in sync, so the form submits HTML without a line of script.

    The hidden input follows every edit.

    Audio, diagrams and HTML from a CMS

    A playlist with a waveform, a diagram from inline source, and DskEmbed.renderBlocks() turning stored HTML into widgets.

    Playlist

    Architecture

    flowchart LR Browser([Browser]) --> CDN[(jsDelivr)] Browser --> Shop[Shop backend] Shop --> Orders[Orders API] Shop --> Catalog[Catalog API] Orders --> Pay{{Payments}}

    Stored HTML

    This block is plain HTML, as a CMS stores it. One call makes its code blocks live:

    pie title Orders by status
  "Delivered" : 64
  "Shipping" : 41
  "Awaiting payment" : 17
  "Cancelled" : 6
    // Not registered: stays code.
DskEmbed.renderBlocks(document.querySelector('#cms'))