How to use "additionalModules" of Viewer?


I am trying to cuztomize the Viewer’s canvas. I am trying to do so using the additionalModules of Viewer in a similar fashion that has been done for Modeler, in angular.

But it does not seem to work. I am getting errors like canvas.getContainer ia not a function.
Can anyone help me with this? It’s kind of urgent.


Can you share some code so it’s easier to understand what you’re trying to do? Are you trying to replace the canvas?

import * as _Canvas from 'diagram-js/lib/core/canvas.js';

export class CustomCanvas {
  constructor() {


  createContainer(options) {
    options = _Canvas.assign({}, { width: '100%', height: '800px' }, options);

    const container = options.container || document.body;

    // create a <div> around the svg element with the respective size
    // this way we can always get the correct container size
    // (this is impossible for <svg> elements at the moment)
    const parent = document.createElement('div');
    parent.setAttribute('class', 'djs-container');

    _Canvas.assign(, {
      position: 'relative',
      overflow: 'scroll',
      width: _Canvas.ensurePx(options.width),
      height: _Canvas.ensurePx(options.height)


    return parent;

I am trying to override Canvas yes. I created a custom Canvas.
Basically i tried overriding the createContainer() function because i saw somewhere that if you change “hidden” to “scroll” on overflow, your viewer has a scroll.
And then i tried adding it to additionalModules.

Here is how i tried adding it:

const viewer = new Viewer({
      container: '#canvas',
      additionalModules: [
        {'canvas': ['type', CustomCanvas ]}

I should mention I am using Angular, just in case.


This is a duplicate of this thread, right?


Yes because nobody was answering. And it’s kinda urgent. So i tried asking in a different way.