Differences between Viz.js 2.x and 3.x

See the v3.0.0 release notes for a detailed list of changes.

The main differences between the two versions are:

• No separate "render script file". The Emscripten module is bundled with the Viz.js wrapper code in the same file.
• Usage of an instance() function instead of new Viz(). This returns a promise that resolves to an instance of the Viz class. Because Viz.js 3.x uses WebAssembly, it needs to call WebAssembly.instantiate at some point, which returns a promise.
• The render methods return results synchronously instead of returning promises.

Usage comparison

2.x usage

<script src="viz.js"></script>
<script src="full.render.js"></script>
<script>
  let viz = new Viz();
  
  viz.renderSVGElement("digraph { a -> b }")
    .then(element => {
      document.body.appendChild(element);
    })
    .catch(error => {
      console.error(error);
    });
</script>

3.x usage

<script src="viz-standalone.js"></script>
<script>
  Viz.instance()
    .then(viz => {
      document.body.appendChild(viz.renderSVGElement("digraph { a -> b }"));
    })
    .catch(error => {
      console.error(error);
    });
</script>

Here's one way to reuse the Viz instance in 3.x and avoid calling instance() until it's necessary:

<script src="viz-standalone.js"></script>
<script>
  let vizPromise;

  function render(src) {
    if (typeof vizPromise === "undefined") {
      vizPromise = Viz.instance();
    }

    return vizPromise.then(viz => viz.renderSVGElement(src));
  }

  render("digraph { a -> b }")
    .then(element => {
      document.body.appendChild(element);
    })
    .catch(error => {
      console.error(error);
    });
</script>