Embeddable music notation editor

You can use our JavaScript SDK to embed our editor anywhere. Load any MusicXML files or scores hosted on Flat, edit them directly on your webpage or app, then export them to MusicXML or MIDI directly in JavaScript. The embeddable editor requires an Embed plan that includes edit mode. Applications on the free plan can display scores but not edit them: they fall back to view mode.

The appId in these examples is ours, not yours

The examples on this page use a demo appId on a plan that includes edit mode, so they open the editor. Replacing it with the appId of an application without edit mode makes the same code render a read-only score: mode: 'edit' falls back to view and no error is raised. Check the plan of your application in your developer settings if the editor does not appear.

You can also use our code generator to generate the JavaScript initializing our embeddable editor with the customizations options you want.

Here is a simple example using the same score from our introduction as an editable template you can export once edited.

Here is how the example is done. You can view and edit this complete example on Code Sandbox.

<div id="embed-container"></div>
<button id="export-xml">Export to MusicXML</button>

<script src="https://prod.flat-cdn.com/embed-js/v1.5.1/embed.min.js"></script>
<script>
  var container = document.getElementById('embed-container');
  var embed = new Flat.Embed(container, {
    // The score hosted on Flat we use here as template.
    // You can also use `embed.loadMusicXML(file)` to load your files on the fly
    score: '56ae21579a127715a02901a6',
    embedParams: {
      mode: 'edit',
      appId: '59e7684b476cba39490801c2',
      // Simple customizations
      branding: false,
      controlsPosition: 'top',
    }
  });

  // Export the file when we click on the button
  document.getElementById('export-xml').addEventListener('click', function () {
    embed.getMusicXML({ compressed: true }).then(function (buffer) {
     // Exported MusicXML file in `buffer`
    });
  });
</script>

Real-life example

Another good example of application using this SDK with the editor is our Google Docs add-ons. They load some MusicXML templates, then export the score to MusicXML and PNG once the creation is done.