Skip to main content

JSX/TSX React

Use WmsView​

Deprecated (v6.1.0): ReactUI.WmsView replaces ReactUI.MusicScoreView. ReactUI.MusicScoreView is deprecated and will be removed in a future major release. Existing code can be migrated by renaming ReactUI.MusicScoreView to ReactUI.WmsView.
// Create view and set document
const doc = new Score.DocumentBuilder().getDocument();
<ReactUI.WmsView doc={doc} />

// Deprecated (see Paint section): create view with paint
const paint = new Score.Paint();
<ReactUI.WmsView doc={doc} paint={paint} />

// Create view and set zoom (optional)
<ReactUI.WmsView doc={doc} zoom="1.5" />

// Create view and set staff size, the distance between bottom and top staff lines (optional)
<ReactUI.WmsView doc={doc} staffSize="40px" />
⚠️
Using staff size with units "cm", "mm", "in", etc. can give unpredictable result depending on device.

Live Example​