@dskripchenko/embed

Video and audio players, Mermaid diagrams, OpenAPI references, process flows, live markdown and a WYSIWYG editor — as HTML tags on any page: plain HTML, a CMS, WordPress, Blade, React. One script from a CDN. The elements share one Vue and one UI kit, render each other's blocks, and talk through DOM events.

English · Русский · Deutsch · 中文

<head>
  <script src="https://cdn.jsdelivr.net/npm/@dskripchenko/embed@1/dist/embed.js"></script>
</head>
<body>
  <dsk-flow src="/process.json" poll-url="/process/state" openapi-target="#api" media-target="#tour"></dsk-flow>
  <dsk-video id="tour" src="/tour.mp4">
    <track kind="chapters" src="/tour.chapters.vtt" default>
  </dsk-video>
  <dsk-openapi id="api" src="/openapi.yaml" height="720"></dsk-openapi>

  <dsk-markdown>
    <script type="text/markdown">
      ```mermaid
      sequenceDiagram
        Shop->>Payments: charge
      ```
    </script>
  </dsk-markdown>

  <form method="post"><dsk-editor name="body"></dsk-editor></form>
</body>

Clicking a process step opens its API operation and plays its chapter of the video; the markdown's diagram is live; the editor submits HTML with the form.

Elements

All of them: attributes ↔ properties, dsk:* events, ready, loading="lazy", light DOM (your CSS applies); diagrams, processes, flows, boards and references open full screen. → Elements

Working together

• One runtime. The loader writes an import map pinning Vue, the kit and the plugin packages to the exact versions of the release; every element and live block renders in one Vue app context — one locale, one theme, one set of block renderers.
• Blocks. DskEmbed.blocks.register('chart', renderer) — the live-block contract of the kit and the editor — makes ```chart live in markdown, in the editor and in DskEmbed.renderBlocks(root), which turns stored HTML (<pre><code class="language-…">) into widgets. → Blocks
• Configuration. DskEmbed.configure({ theme: 'light' | 'dark' | 'system', locale: 'en' | 'ru' }), or just the page's <html data-theme lang>. → Configuration and events
• Events. DskEmbed.on('node', …), or addEventListener('dsk:node', …) on any ancestor; React and other hosts use refs and plain listeners. → Frameworks

Loader or bundle

What the loader fetches on demand (gzip -9 of the published files; jsDelivr serves Brotli, a little smaller):

The icons file (76 icons, one file) is shared: fetched once, by the first of openapi, flow and the editor.

→ Getting started: snippets, self-hosting, composing with your own import map, CSP, versioning.

Browsers

Current Chromium, Safari and Firefox. The loader needs import maps; there is no legacy build. Tested in Chromium and WebKit (Playwright): both builds, both themes, both languages, desktop and phone.

Known limitations

• The theme is page-wide (<html data-theme>): the kit's themes are defined on :root, and its menus and dialogs live in <body>.

Development

pnpm install
pnpm build              # dist/ and the size table
pnpm test               # unit tests (vitest, jsdom)
pnpm lint && pnpm typecheck
node scripts/fixtures.mjs           # media fixtures for the browser check (ffmpeg)
pnpm check:browser                  # Chromium + WebKit against a local mirror of the CDN
node scripts/mirror.mjs <dir>       # self-hosting: the runtime in the CDN's layout
node scripts/demo.mjs <dir> --local # the demo page (examples/demo) for a host site

The browser check serves node_modules the way jsDelivr serves npm (/npm/<pkg>@<version>/…, exact versions only) from a second origin, so the import map, cross-origin module loading and the version pins are exercised for real.

License

MIT