Skip to main content

Custom HTML Element

New Feature (v6.1.0): Custom HTML Elements.

Create View​

<wms-view id="viewId"></wms-view>

Bind Document​

<script>
    doc.bindElement("viewId");
</script>

Bind Paint​

<script>
    paint.bindElement("viewId");
</script>
💡
Paint is optional.

Set View Size

There are two ways to affect view size: zoom and staff size.

Set Zoom​

Set zoom:

<wms-view id="viewId" zoom="1.5"></wms-view>
💡
Default zoom if omitted is 1.0.

Set Staff Size​

Set view size with given distance between bottom and top staff lines:

<wms-view id="viewId" staff-size="40px"></wms-view>
💡
Library v6.3.4 fixed attribute names to kebab-case, e.g. staffSize => staff-size.
⚠️
Using units "cm", "mm", "in", etc. are not accurate and can give different result on devices.

Live Example​

💡
Use HTML/JS version without React.useEffect(), just add HTML elements before JS code.