Skip to main content

Custom HTML Element

New Feature (v6.1.0): Custom HTML element <wms-view>.

Add View in HTML​

<!-- Add view in HTML -->
<wms-view id="viewId"></wms-view>

<!-- Add view with zoom (optional) ->
<wms-view id="viewId" zoom="1.5"></wms-view>

<!-- Add view with staff size, the distance between bottom and top staff lines (optional) -->
<wms-view id="viewId" staff-size="40px"></wms-view>
⚠️
Using staff size with units "cm", "mm", "in", etc. are not accurate and can give different result on devices.
💡
Library v6.3.4 fixed attribute names to kebab-case (e.g. staffSize => staff-size). Old attribute names have no effect.

Bind View in JavaScript​

<script>
    // Bind document to view
    const doc = new Score.DocumentBuilder().getDocument();
    doc.bindElement("viewId");

    // Deprecated (see Paint section): bind paint to element
    const paint = new Score.Paint();
    paint.bindElement("viewId");
</script>

Live Example​