Embed a PolyMeter widget
Every PolyMeter form factor doubles as an embeddable widget. Drop one into any page with a placeholder + one script tag — no build step, no dependencies. It loads in an iframe and is preloaded with whatever program / settings string you give it.
Drop-in (recommended)
<div data-varasys-metronome="micro"
data-patch="v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2"></div>
<script src="https://metronome.varasys.io/embed.js"></script>
The script replaces the <div> with an auto-sizing iframe. Here it is, live on this page:
Or a plain iframe
<iframe src="https://metronome.varasys.io/micro.html?embed=1#p=v1;t120;kick:4"
width="360" height="300" style="border:0"></iframe>
Form factors — data-varasys-metronome
| value | widget |
|---|---|
| editor | PM_E‑1 PolyMeter Editor (full app) |
| initial | PM_C‑1 Concept (idealized device) |
| teacher | PM_T‑1 Teacher (studio / lesson console) |
| micro | PM_P‑1 Practice (inline practice bar) |
Configuration / settings string
| attribute | what |
|---|---|
| data-patch | A PolyMeter program string, e.g. v1;t120;kick:4;snare:4=.X.X;hatClosed:4/2. Copy it from the editor's program field. |
| data-setlist | A base64url set‑list code (a whole set list) — share it from the editor. |
| data-width / data-height | iframe size (default 100% × 300; height auto‑grows to the widget). |
Under the hood the loader builds <page>?embed=1#p=<patch>; the page's ?embed=1 mode strips the
site chrome so only the widget shows. That's the same way our own Concept & Info pages embed it.