diff --git a/packages/core/src/editor/mxEditor.js b/packages/core/src/editor/mxEditor.js
index 9ee029c2b..c67d23da7 100644
--- a/packages/core/src/editor/mxEditor.js
+++ b/packages/core/src/editor/mxEditor.js
@@ -13,7 +13,7 @@ import CompactTreeLayout from '../view/layout/layout/CompactTreeLayout';
 import mxDefaultToolbar from './mxDefaultToolbar';
 import StackLayout from '../view/layout/layout/StackLayout';
 import EventObject from '../view/event/EventObject';
-import utils, { getOffset } from '../util/Utils';
+import { getOffset } from '../util/Utils';
 import mxCodec from '../util/serialization/mxCodec';
 import mxWindow, { error } from '../util/gui/mxWindow';
 import mxForm from '../util/gui/mxForm';
@@ -40,7 +40,7 @@ import RootChange from '../view/model/RootChange';
 import ValueChange from '../view/cell/ValueChange';
 import CellAttributeChange from '../view/cell/CellAttributeChange';
 import PrintPreview from '../view/printing/PrintPreview';
-import mxClipboard from '../util/storage/mxClipboard';
+import mxClipboard from '../util/storage/Clipboard';
 import mxLog from '../util/gui/mxLog';
 import { isNode } from '../util/DomUtils';
 import { getViewXml, getXml } from '../util/XmlUtils';
@@ -1292,10 +1292,7 @@ class mxEditor extends EventSource {
       const current = editor.graph.getView().scale * 100;
       const scale =
         parseFloat(
-          prompt(
-            Resources.get(editor.askZoomResource) || editor.askZoomResource,
-            current
-          )
+          prompt(Resources.get(editor.askZoomResource) || editor.askZoomResource, current)
         ) / 100;
 
       if (!isNaN(scale)) {
@@ -1362,8 +1359,7 @@ class mxEditor extends EventSource {
    */
   // resetFirstTime(): void;
   resetFirstTime() {
-    document.cookie =
-      'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/';
+    document.cookie = 'mxgraph=seen; expires=Fri, 27 Jul 2001 02:47:11 UTC; path=/';
   }
 
   /**
@@ -1677,10 +1673,8 @@ class mxEditor extends EventSource {
 
         if (
           change instanceof RootChange ||
-          (change instanceof ValueChange &&
-            change.cell === this.graph.model.root) ||
-          (change instanceof CellAttributeChange &&
-            change.cell === this.graph.model.root)
+          (change instanceof ValueChange && change.cell === this.graph.model.root) ||
+          (change instanceof CellAttributeChange && change.cell === this.graph.model.root)
         ) {
           this.fireEvent(new EventObject(InternalEvent.ROOT));
           break;
@@ -1801,9 +1795,7 @@ class mxEditor extends EventSource {
       this.addListener(InternalEvent.SAVE, () => {
         const tstamp = new Date().toLocaleString();
         this.setStatus(
-          `${
-            Resources.get(this.lastSavedResource) || this.lastSavedResource
-          }: ${tstamp}`
+          `${Resources.get(this.lastSavedResource) || this.lastSavedResource}: ${tstamp}`
         );
       });
 
@@ -1811,10 +1803,9 @@ class mxEditor extends EventSource {
       // when new files are opened
       this.addListener(InternalEvent.OPEN, () => {
         this.setStatus(
-          `${
-            Resources.get(this.currentFileResource) ||
-            this.currentFileResource
-          }: ${this.filename}`
+          `${Resources.get(this.currentFileResource) || this.currentFileResource}: ${
+            this.filename
+          }`
         );
       });
     }
@@ -2045,15 +2036,7 @@ class mxEditor extends EventSource {
 
     post(url, `${this.postParameterName}=${data}`, (req) => {
       this.fireEvent(
-        new EventObject(
-          InternalEvent.POST,
-          'request',
-          req,
-          'url',
-          url,
-          'data',
-          data
-        )
+        new EventObject(InternalEvent.POST, 'request', req, 'url', url, 'data', data)
       );
     });
   }
@@ -2292,11 +2275,7 @@ class mxEditor extends EventSource {
           // model, which will also make the change
           // part of the current transaction
           for (let i = 0; i < attrs.length; i += 1) {
-            const edit = new CellAttributeChange(
-              cell,
-              attrs[i].nodeName,
-              texts[i].value
-            );
+            const edit = new CellAttributeChange(cell, attrs[i].nodeName, texts[i].value);
             model.execute(edit);
           }
 
@@ -2446,8 +2425,7 @@ class mxEditor extends EventSource {
       frame.style.backgroundColor = 'white';
 
       const w = document.body.clientWidth;
-      const h =
-        document.body.clientHeight || document.documentElement.clientHeight;
+      const h = document.body.clientHeight || document.documentElement.clientHeight;
 
       const wnd = new mxWindow(
         Resources.get(this.helpResource) || this.helpResource,
@@ -2716,13 +2694,7 @@ class mxEditor extends EventSource {
 
     this.cycleAttribute(vertex);
     this.fireEvent(
-      new EventObject(
-        InternalEvent.BEFORE_ADD_VERTEX,
-        'vertex',
-        vertex,
-        'parent',
-        parent
-      )
+      new EventObject(InternalEvent.BEFORE_ADD_VERTEX, 'vertex', vertex, 'parent', parent)
     );
 
     model.beginUpdate();
@@ -2741,9 +2713,7 @@ class mxEditor extends EventSource {
     if (vertex != null) {
       this.graph.setSelectionCell(vertex);
       this.graph.scrollCellToVisible(vertex);
-      this.fireEvent(
-        new EventObject(InternalEvent.AFTER_ADD_VERTEX, 'vertex', vertex)
-      );
+      this.fireEvent(new EventObject(InternalEvent.AFTER_ADD_VERTEX, 'vertex', vertex));
     }
 
     return vertex;
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index f037fe939..3a809025b 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -104,28 +104,28 @@ import RhombusShape from './view/geometry/shape/node/RhombusShape';
 import StencilShape from './view/geometry/shape/node/StencilShape';
 import StencilShapeRegistry from './view/geometry/shape/node/StencilShapeRegistry';
 
-import * as mxConstants from './util/Constants';
-import mxGuide from './util/Guide';
+import * as Constants from './util/Constants';
+import Guide from './util/Guide';
 import Resources from './util/Resources';
 import utils from './util/Utils';
-import * as mxCloneUtils from './util/CloneUtils';
-import * as mxDomUtils from './util/DomUtils';
-import * as mxEventUtils from './util/EventUtils';
-import * as mxGestureUtils from './util/GestureUtils';
-import * as mxStringUtils from './util/StringUtils';
-import * as mxXmlUtils from './util/XmlUtils';
+import * as CloneUtils from './util/CloneUtils';
+import * as DomUtils from './util/DomUtils';
+import * as EventUtils from './util/EventUtils';
+import * as GestureUtils from './util/GestureUtils';
+import * as StringUtils from './util/StringUtils';
+import * as XmlUtils from './util/XmlUtils';
 
 import mxAnimation from './util/animate/mxAnimation';
 import mxEffects from './util/animate/mxEffects';
 import mxMorphing from './util/animate/mxMorphing';
 
-import mxAbstractCanvas2D from './util/canvas/AbstractCanvas2D';
-import mxSvgCanvas2D from './util/canvas/SvgCanvas2D';
+import AbstractCanvas2D from './util/canvas/AbstractCanvas2D';
+import SvgCanvas2D from './util/canvas/SvgCanvas2D';
 import mxXmlCanvas2D from './util/canvas/mxXmlCanvas2D';
 
 import Dictionary from './util/Dictionary';
 import Geometry from './view/geometry/Geometry';
-import mxObjectIdentity from './util/mxObjectIdentity';
+import ObjectIdentity from './util/ObjectIdentity';
 import Point from './view/geometry/Point';
 import Rectangle from './view/geometry/Rectangle';
 
@@ -147,11 +147,11 @@ import InternalMouseEvent from './view/event/InternalMouseEvent';
 
 import mxForm from './util/gui/mxForm';
 import mxLog from './util/gui/mxLog';
-import mxPopupMenu from './util/gui/mxPopupMenu';
+import PopupMenu from './util/gui/PopupMenu';
 import mxToolbar from './util/gui/mxToolbar';
 import mxWindow from './util/gui/mxWindow';
 
-import Image from './view/image/ImageBox';
+import ImageBox from './view/image/ImageBox';
 import ImageBundle from './view/image/ImageBundle';
 import ImageExport from './view/image/ImageExport';
 
@@ -159,7 +159,7 @@ import mxUrlConverter from './util/network/mxUrlConverter';
 import mxXmlRequest from './util/network/mxXmlRequest';
 
 import mxAutoSaveManager from './util/storage/mxAutoSaveManager';
-import mxClipboard from './util/storage/mxClipboard';
+import Clipboard from './util/storage/Clipboard';
 
 import UndoableEdit from './view/model/UndoableEdit';
 import mxUndoManager from './util/mxUndoManager';
@@ -176,9 +176,8 @@ import TemporaryCellStates from './view/cell/TemporaryCellStates';
 import ConnectionConstraint from './view/connection/ConnectionConstraint';
 import Multiplicity from './view/validation/Multiplicity';
 
-import graph from './view/Graph';
+import Graph from './view/Graph';
 import Model from './view/model/Model';
-import mxGraphSelectionModel from './view/selection/mxGraphSelectionModel';
 import GraphView from './view/view/GraphView';
 import LayoutManager from './view/layout/LayoutManager';
 import Outline from './view/Outline';
@@ -190,124 +189,124 @@ import '../css/common.css';
 export default {
   mxClient,
   mxLog,
-  mxObjectIdentity,
-  mxDictionary: Dictionary,
-  mxResources: Resources,
-  mxPoint: Point,
-  mxRectangle: Rectangle,
+  ObjectIdentity,
+  Dictionary,
+  Resources,
+  Point,
+  Rectangle,
   mxEffects,
-  mxUtils: utils,
-  mxConstants,
-  mxEventObject: EventObject,
-  mxMouseEvent: InternalMouseEvent,
-  mxEventSource: EventSource,
-  mxEvent: InternalEvent,
+  utils,
+  Constants,
+  EventObject,
+  InternalMouseEvent,
+  EventSource,
+  InternalEvent,
   mxXmlRequest,
-  mxClipboard,
+  Clipboard,
   mxWindow,
   mxForm,
-  mxImage: Image,
+  Image,
   mxDivResizer,
-  mxDragSource: DragSource,
+  DragSource,
   mxToolbar,
-  mxUndoableEdit: UndoableEdit,
+  UndoableEdit,
   mxUndoManager,
   mxUrlConverter,
-  mxPanningManager: PanningManager,
-  mxPopupMenu,
+  PanningManager,
+  PopupMenu,
   mxAutoSaveManager,
   mxAnimation,
   mxMorphing,
-  mxImageBundle: ImageBundle,
-  mxImageExport: ImageExport,
-  mxAbstractCanvas2D,
+  ImageBox,
+  ImageBundle,
+  ImageExport,
+  AbstractCanvas2D,
   mxXmlCanvas2D,
-  mxSvgCanvas2D,
-  mxGuide,
-  mxShape: Shape,
-  mxStencil: StencilShape,
-  mxStencilRegistry: StencilShapeRegistry,
-  mxMarker: Marker,
-  mxActor: Actor,
-  mxCloud: CloudShape,
-  mxRectangleShape: RectangleShape,
-  mxEllipse: EllipseShape,
-  mxDoubleEllipse: DoubleEllipseShape,
-  mxRhombus: RhombusShape,
-  mxPolyline: Polyline,
-  mxArrow: Arrow,
-  mxArrowConnector: ArrowConnector,
-  mxText: TextShape,
-  mxTriangle: TriangleShape,
-  mxHexagon: HexagonShape,
-  mxLine: Line,
-  mxImageShape: ImageShape,
-  mxLabel: Label,
-  mxCylinder: CylinderShape,
-  mxConnector: Connector,
-  mxSwimlane: SwimlaneShape,
-  mxGraphLayout: GraphLayout,
-  mxStackLayout: StackLayout,
-  mxPartitionLayout: PartitionLayout,
-  mxCompactTreeLayout: CompactTreeLayout,
-  mxRadialTreeLayout: RadialTreeLayout,
-  mxFastOrganicLayout: MxFastOrganicLayout,
-  mxCircleLayout: CircleLayout,
-  mxParallelEdgeLayout: ParallelEdgeLayout,
-  mxCompositeLayout: CompositeLayout,
-  mxEdgeLabelLayout: EdgeLabelLayout,
-  mxGraphAbstractHierarchyCell: MxGraphAbstractHierarchyCell,
-  mxGraphHierarchyNode: GraphHierarchyNode,
-  mxGraphHierarchyEdge: GraphHierarchyEdge,
-  mxGraphHierarchyModel: GraphHierarchyModel,
-  mxSwimlaneModel: SwimlaneModel,
-  mxHierarchicalLayoutStage: MxHierarchicalLayoutStage,
-  mxMedianHybridCrossingReduction: MedianHybridCrossingReduction,
-  mxMinimumCycleRemover: MinimumCycleRemover,
-  mxCoordinateAssignment: CoordinateAssignment,
+  SvgCanvas2D,
+  Guide,
+  Shape,
+  StencilShape,
+  StencilShapeRegistry,
+  Marker,
+  Actor,
+  CloudShape,
+  RectangleShape,
+  EllipseShape,
+  DoubleEllipseShape,
+  RhombusShape,
+  Polyline,
+  Arrow,
+  ArrowConnector,
+  TextShape,
+  TriangleShape,
+  HexagonShape,
+  Line,
+  ImageShape,
+  Label,
+  CylinderShape,
+  Connector,
+  SwimlaneShape,
+  GraphLayout,
+  StackLayout,
+  PartitionLayout,
+  CompactTreeLayout,
+  RadialTreeLayout,
+  MxFastOrganicLayout,
+  CircleLayout,
+  ParallelEdgeLayout,
+  CompositeLayout,
+  EdgeLabelLayout,
+  MxGraphAbstractHierarchyCell,
+  GraphHierarchyNode,
+  GraphHierarchyEdge,
+  GraphHierarchyModel,
+  SwimlaneModel,
+  MxHierarchicalLayoutStage,
+  MedianHybridCrossingReduction,
+  MinimumCycleRemover,
+  CoordinateAssignment,
   mxSwimlaneOrdering,
   mxHierarchicalLayout,
-  mxSwimlaneLayout: SwimlaneLayout,
-  mxGraphModel: Model,
-  mxCell: Cell,
-  mxGeometry: Geometry,
-  mxCellPath: CellPath,
-  mxPerimeter: Perimeter,
-  mxPrintPreview: PrintPreview,
-  mxStylesheet: Stylesheet,
-  mxCellState: CellState,
-  mxGraphSelectionModel,
-  mxCellEditor: CellEditor,
-  mxCellRenderer: CellRenderer,
-  mxEdgeStyle: EdgeStyle,
-  mxStyleRegistry: StyleRegistry,
-  mxGraphView: GraphView,
-  mxGraph: graph,
-  mxCellOverlay: CellOverlay,
-  mxOutline: Outline,
-  mxMultiplicity: Multiplicity,
-  mxLayoutManager: LayoutManager,
-  mxSwimlaneManager: SwimlaneManager,
-  mxTemporaryCellStates: TemporaryCellStates,
-  mxCellStatePreview: CellStatePreview,
-  mxConnectionConstraint: ConnectionConstraint,
-  mxGraphHandler: GraphHandler,
-  mxPanningHandler: PanningHandler,
-  mxPopupMenuHandler: PopupMenuHandler,
-  mxCellMarker: CellMarker,
-  mxSelectionCellsHandler: SelectionCellsHandler,
-  mxConnectionHandler: ConnectionHandler,
-  mxConstraintHandler: ConstraintHandler,
-  mxRubberband: RubberBand,
-  mxHandle: VertexHandle,
-  mxVertexHandler: VertexHandler,
-  mxEdgeHandler: EdgeHandler,
-  mxElbowEdgeHandler: ElbowEdgeHandler,
-  mxEdgeSegmentHandler: EdgeSegmentHandler,
+  SwimlaneLayout,
+  Model,
+  Cell,
+  Geometry,
+  CellPath,
+  Perimeter,
+  PrintPreview,
+  Stylesheet,
+  CellState,
+  CellEditor,
+  CellRenderer,
+  EdgeStyle,
+  StyleRegistry,
+  GraphView,
+  Graph,
+  CellOverlay,
+  Outline,
+  Multiplicity,
+  LayoutManager,
+  SwimlaneManager,
+  TemporaryCellStates,
+  CellStatePreview,
+  ConnectionConstraint,
+  GraphHandler,
+  PanningHandler,
+  PopupMenuHandler,
+  CellMarker,
+  SelectionCellsHandler,
+  ConnectionHandler,
+  ConstraintHandler,
+  RubberBand,
+  VertexHandle,
+  VertexHandler,
+  EdgeHandler,
+  ElbowEdgeHandler,
+  EdgeSegmentHandler,
   mxKeyHandler,
-  mxTooltipHandler: TooltipHandler,
-  mxCellTracker: CellTracker,
-  mxCellHighlight: CellHighlight,
+  TooltipHandler,
+  CellTracker,
+  CellHighlight,
   mxDefaultKeyHandler,
   mxDefaultPopupMenu,
   mxDefaultToolbar,
@@ -328,22 +327,22 @@ export default {
   // mxDefaultToolbarCodec,
   // mxDefaultPopupMenuCodec,
   // mxEditorCodec,
-  mxCloneUtils,
-  mxDomUtils,
-  mxEventUtils,
-  mxGestureUtils,
-  mxStringUtils,
-  mxXmlUtils,
+  CloneUtils,
+  DomUtils,
+  EventUtils,
+  GestureUtils,
+  StringUtils,
+  XmlUtils,
   mxDomHelpers,
-  mxCellAttributeChange: CellAttributeChange,
-  mxChildChange: ChildChange,
-  mxCollapseChange: CollapseChange,
-  mxCurrentRootChange: CurrentRootChange,
-  mxGeometryChange: GeometryChange,
-  mxRootChange: RootChange,
-  mxSelectionChange: SelectionChange,
-  mxStyleChange: StyleChange,
-  mxTerminalChange: TerminalChange,
-  mxValueChange: ValueChange,
-  mxVisibleChange: VisibleChange,
+  CellAttributeChange,
+  ChildChange,
+  CollapseChange,
+  CurrentRootChange,
+  GeometryChange,
+  RootChange,
+  SelectionChange,
+  StyleChange,
+  TerminalChange,
+  ValueChange,
+  VisibleChange,
 };
diff --git a/packages/core/src/util/CloneUtils.js b/packages/core/src/util/CloneUtils.js
index e4ae0a52a..c3d804a68 100644
--- a/packages/core/src/util/CloneUtils.js
+++ b/packages/core/src/util/CloneUtils.js
@@ -1,4 +1,4 @@
-import mxObjectIdentity from "./mxObjectIdentity";
+import ObjectIdentity from './ObjectIdentity';
 
 /**
  * Function: clone
@@ -26,7 +26,7 @@ export const clone = function _clone(obj, transients, shallow) {
 
     for (const i in obj) {
       if (
-        i != mxObjectIdentity.FIELD_NAME &&
+        i != ObjectIdentity.FIELD_NAME &&
         (transients == null || transients.indexOf(i) < 0)
       ) {
         if (!shallow && typeof obj[i] === 'object') {
@@ -39,4 +39,4 @@ export const clone = function _clone(obj, transients, shallow) {
   }
 
   return clone;
-};
\ No newline at end of file
+};
diff --git a/packages/core/src/util/gui/mxToolbar.js b/packages/core/src/util/gui/mxToolbar.js
index 4c4fa441a..4052660c6 100644
--- a/packages/core/src/util/gui/mxToolbar.js
+++ b/packages/core/src/util/gui/mxToolbar.js
@@ -5,10 +5,9 @@
  * Type definitions from the typed-mxgraph project
  */
 
-import utils from '../Utils';
 import InternalEvent from '../../view/event/InternalEvent';
 import Point from '../../view/geometry/Point';
-import mxPopupMenu from './mxPopupMenu';
+import PopupMenu from './PopupMenu';
 import EventSource from '../../view/event/EventSource';
 import EventObject from '../../view/event/EventObject';
 import mxClient from '../../mxClient';
@@ -109,7 +108,7 @@ class mxToolbar extends EventSource {
       }
     }
 
-    const mouseHandler = evt => {
+    const mouseHandler = (evt) => {
       if (pressedIcon != null) {
         img.setAttribute('src', icon);
       } else {
@@ -121,7 +120,7 @@ class mxToolbar extends EventSource {
     // while it is being clicked with the mouse
     InternalEvent.addGestureListeners(
       img,
-      evt => {
+      (evt) => {
         if (pressedIcon != null) {
           img.setAttribute('src', pressedIcon);
         } else {
@@ -131,7 +130,7 @@ class mxToolbar extends EventSource {
         // Popup Menu
         if (factoryMethod != null) {
           if (this.menu == null) {
-            this.menu = new mxPopupMenu();
+            this.menu = new PopupMenu();
             this.menu.init();
           }
 
@@ -146,10 +145,7 @@ class mxToolbar extends EventSource {
             this.currentImg = img;
             this.menu.factoryMethod = factoryMethod;
 
-            const point = new Point(
-              img.offsetLeft,
-              img.offsetTop + img.offsetHeight
-            );
+            const point = new Point(img.offsetLeft, img.offsetTop + img.offsetHeight);
             this.menu.popup(point.x, point.y, null, evt);
 
             // Sets and overrides to restore classname
@@ -209,7 +205,7 @@ class mxToolbar extends EventSource {
     select.className = style || 'mxToolbarCombo';
     this.addOption(select, title, null);
 
-    InternalEvent.addListener(select, 'change', evt => {
+    InternalEvent.addListener(select, 'change', (evt) => {
       const value = select.options[select.selectedIndex];
       select.selectedIndex = 0;
 
@@ -266,7 +262,7 @@ class mxToolbar extends EventSource {
       img.setAttribute('title', title);
     }
 
-    InternalEvent.addListener(img, 'click', evt => {
+    InternalEvent.addListener(img, 'click', (evt) => {
       let tmp = this.selectedMode.altIcon;
 
       if (tmp != null) {
@@ -333,12 +329,12 @@ class mxToolbar extends EventSource {
     }
 
     if (this.enabled && toggle) {
-      InternalEvent.addListener(img, 'click', evt => {
+      InternalEvent.addListener(img, 'click', (evt) => {
         this.selectMode(img, funct);
         this.noReset = false;
       });
 
-      InternalEvent.addListener(img, 'dblclick', evt => {
+      InternalEvent.addListener(img, 'dblclick', (evt) => {
         this.selectMode(img, funct);
         this.noReset = true;
       });
diff --git a/packages/core/src/util/serialization/mxObjectCodec.js b/packages/core/src/util/serialization/mxObjectCodec.js
index 2dab2cf0b..0d9ef1803 100644
--- a/packages/core/src/util/serialization/mxObjectCodec.js
+++ b/packages/core/src/util/serialization/mxObjectCodec.js
@@ -5,12 +5,12 @@
  * Type definitions from the typed-mxgraph project
  */
 
-import mxObjectIdentity from '../mxObjectIdentity';
+import ObjectIdentity from '../ObjectIdentity';
 import mxLog from '../gui/mxLog';
 import Geometry from '../../view/geometry/Geometry';
 import Point from '../../view/geometry/Point';
 import { NODETYPE_ELEMENT } from '../Constants';
-import utils, { isInteger, isNumeric } from '../Utils';
+import { isInteger, isNumeric } from '../Utils';
 import { getTextContent } from '../DomUtils';
 import { load } from '../network/mxXmlRequest';
 
@@ -303,7 +303,7 @@ class mxObjectCodec {
   /**
    * Returns true if the given attribute is to be ignored by the codec. This
    * implementation returns true if the given fieldname is in {@link exclude} or
-   * if the fieldname equals {@link mxObjectIdentity.FIELD_NAME}.
+   * if the fieldname equals {@link ObjectIdentity.FIELD_NAME}.
    *
    * @param obj Object instance that contains the field.
    * @param attr Fieldname of the field.
@@ -313,9 +313,7 @@ class mxObjectCodec {
    */
   // isExcluded(obj: any, attr: string, value: any, write?: boolean): boolean;
   isExcluded(obj, attr, value, write) {
-    return (
-      attr == mxObjectIdentity.FIELD_NAME || this.exclude.indexOf(attr) >= 0
-    );
+    return attr == ObjectIdentity.FIELD_NAME || this.exclude.indexOf(attr) >= 0;
   }
 
   /**
@@ -495,9 +493,7 @@ class mxObjectCodec {
 
       node.appendChild(child);
     } else {
-      mxLog.warn(
-        `mxObjectCodec.encode: No node for ${this.getName()}.${name}: ${value}`
-      );
+      mxLog.warn(`mxObjectCodec.encode: No node for ${this.getName()}.${name}: ${value}`);
     }
   }
 
@@ -532,9 +528,7 @@ class mxObjectCodec {
    */
   // isBooleanAttribute(enc: mxCodec, obj: any, name: string, value: any): boolean;
   isBooleanAttribute(enc, obj, name, value) {
-    return (
-      typeof value.length === 'undefined' && (value == true || value == false)
-    );
+    return typeof value.length === 'undefined' && (value == true || value == false);
   }
 
   /**
@@ -576,8 +570,7 @@ class mxObjectCodec {
           attr.name === 'y' ||
           attr.name === 'width' ||
           attr.name === 'height')) ||
-      (obj.constructor === Point &&
-        (attr.name === 'x' || attr.name === 'y')) ||
+      (obj.constructor === Point && (attr.name === 'x' || attr.name === 'y')) ||
       isNumeric(attr.value);
 
     return result;
@@ -782,10 +775,7 @@ class mxObjectCodec {
     while (child != null) {
       const tmp = child.nextSibling;
 
-      if (
-        child.nodeType === NODETYPE_ELEMENT &&
-        !this.processInclude(dec, child, obj)
-      ) {
+      if (child.nodeType === NODETYPE_ELEMENT && !this.processInclude(dec, child, obj)) {
         this.decodeChild(dec, child, obj);
       }
 
diff --git a/packages/core/src/view/Graph.ts b/packages/core/src/view/Graph.ts
index f6adce424..afbd9e662 100644
--- a/packages/core/src/view/Graph.ts
+++ b/packages/core/src/view/Graph.ts
@@ -203,6 +203,10 @@ type PartialDragDrop = Pick<
   'isDropEnabled' | 'isAutoScroll' | 'isAutoExtend' | 'isSplitEnabled' | 'isSplitTarget'
 >;
 type PartialSwimlane = Pick<GraphSwimlane, 'getDropTarget'>;
+type PartialPorts = Pick<
+  GraphPorts,
+  'isPort' | 'getTerminalForPort' | 'isPortsEnabled' | 'setPortsEnabled'
+>;
 type PartialClass = PartialEvents &
   PartialSelection &
   PartialCells &
@@ -220,6 +224,7 @@ type PartialClass = PartialEvents &
   PartialZoom &
   PartialDragDrop &
   PartialSwimlane &
+  PartialPorts &
   EventSource;
 
 export type MaxGraph = Graph & PartialClass;
diff --git a/packages/core/src/view/Outline.ts b/packages/core/src/view/Outline.ts
index 929e92fdc..49eb4cda1 100644
--- a/packages/core/src/view/Outline.ts
+++ b/packages/core/src/view/Outline.ts
@@ -15,7 +15,7 @@ import {
 import Point from './geometry/Point';
 import Rectangle from './geometry/Rectangle';
 import RectangleShape from './geometry/shape/node/RectangleShape';
-import graph from './Graph';
+import graph, { MaxGraph } from './Graph';
 import ImageShape from './geometry/shape/node/ImageShape';
 import InternalEvent from './event/InternalEvent';
 import utils from '../util/Utils';
@@ -71,7 +71,7 @@ import EventSource from './event/EventSource';
  * ```
  */
 class Outline {
-  constructor(source: graph, container: HTMLElement | null = null) {
+  constructor(source: MaxGraph, container: HTMLElement | null = null) {
     this.source = source;
 
     if (container != null) {
@@ -224,7 +224,7 @@ class Outline {
   /**
    * Reference to the source {@link graph}.
    */
-  source: graph;
+  source: MaxGraph;
 
   /**
    * Reference to the {@link graph} that renders the outline.
@@ -576,10 +576,7 @@ class Outline {
       this.active = true;
       const sourceContainer = <HTMLElement>this.source.container;
 
-      if (
-        this.source.useScrollbarsForPanning &&
-        hasScrollbars(this.source.container)
-      ) {
+      if (this.source.useScrollbarsForPanning && hasScrollbars(this.source.container)) {
         this.dx0 = sourceContainer.scrollLeft;
         this.dy0 = sourceContainer.scrollTop;
       } else {
diff --git a/packages/core/src/view/cell/datatypes/CellState.ts b/packages/core/src/view/cell/datatypes/CellState.ts
index 824e0cd5e..5d1c266e7 100644
--- a/packages/core/src/view/cell/datatypes/CellState.ts
+++ b/packages/core/src/view/cell/datatypes/CellState.ts
@@ -13,7 +13,7 @@ import Shape from '../../geometry/shape/Shape';
 import TextShape from '../../geometry/shape/node/TextShape';
 import Dictionary from '../../../util/Dictionary';
 import { NONE } from '../../../util/Constants';
-import { CellStateStyles } from 'packages/core/src/types';
+import { CellStateStyles } from 'core/types';
 import RectangleShape from '../../geometry/shape/node/RectangleShape';
 import CellOverlay from '../CellOverlay';
 
diff --git a/packages/core/src/view/cell/edge/EdgeHandler.ts b/packages/core/src/view/cell/edge/EdgeHandler.ts
index 29b7d3260..36d5b6892 100644
--- a/packages/core/src/view/cell/edge/EdgeHandler.ts
+++ b/packages/core/src/view/cell/edge/EdgeHandler.ts
@@ -59,7 +59,7 @@ import {
 import Graph, { MaxGraph } from '../../Graph';
 import CellState from '../datatypes/CellState';
 import Shape from '../../geometry/shape/Shape';
-import { CellHandle, ColorValue, Listenable } from 'packages/core/src/types';
+import { CellHandle, ColorValue, Listenable } from 'core/types';
 import InternalMouseEvent from '../../event/InternalMouseEvent';
 import Cell from '../datatypes/Cell';
 import ImageBox from '../../image/ImageBox';
diff --git a/packages/core/src/view/cell/vertex/GraphVertex.ts b/packages/core/src/view/cell/vertex/GraphVertex.ts
index 10d595fd1..99837a07f 100644
--- a/packages/core/src/view/cell/vertex/GraphVertex.ts
+++ b/packages/core/src/view/cell/vertex/GraphVertex.ts
@@ -1,7 +1,6 @@
 import Cell from '../datatypes/Cell';
 import Geometry from '../../geometry/Geometry';
-import CellArray from '../datatypes/CellArray';
-import { autoImplement } from 'packages/core/src/util/Utils';
+import { autoImplement } from 'core/util/Utils';
 
 import type GraphCells from '../GraphCells';
 
diff --git a/packages/core/src/view/cell/vertex/VertexHandle.ts b/packages/core/src/view/cell/vertex/VertexHandle.ts
index 798ef7179..693af9546 100644
--- a/packages/core/src/view/cell/vertex/VertexHandle.ts
+++ b/packages/core/src/view/cell/vertex/VertexHandle.ts
@@ -26,7 +26,7 @@ import CellState from '../datatypes/CellState';
 import CellArray from '../datatypes/CellArray';
 
 import type { MaxGraph } from '../../Graph';
-import type { CellHandle, CellStateStyles } from 'packages/core/src/types';
+import type { CellHandle, CellStateStyles } from 'core/types';
 
 /**
  * Implements a single custom handle for vertices.
diff --git a/packages/core/src/view/cell/vertex/VertexHandler.ts b/packages/core/src/view/cell/vertex/VertexHandler.ts
index 19a2eb3df..40feaf16f 100644
--- a/packages/core/src/view/cell/vertex/VertexHandler.ts
+++ b/packages/core/src/view/cell/vertex/VertexHandler.ts
@@ -33,7 +33,7 @@ import Graph, { MaxGraph } from '../../Graph';
 import CellState from '../datatypes/CellState';
 import Image from '../../image/ImageBox';
 import Cell from '../datatypes/Cell';
-import { CellHandle, Listenable } from 'packages/core/src/types';
+import { CellHandle, Listenable } from 'core/types';
 import Shape from '../../geometry/shape/Shape';
 import InternalMouseEvent from '../../event/InternalMouseEvent';
 import VertexHandle from './VertexHandle';
diff --git a/packages/core/src/view/geometry/shape/Actor.ts b/packages/core/src/view/geometry/shape/Actor.ts
index 8f66e8cb3..a5b547b55 100644
--- a/packages/core/src/view/geometry/shape/Actor.ts
+++ b/packages/core/src/view/geometry/shape/Actor.ts
@@ -7,8 +7,8 @@
 import Rectangle from '../Rectangle';
 import Shape from './Shape';
 import SvgCanvas2D from '../../../util/canvas/SvgCanvas2D';
-import { ColorValue } from 'packages/core/src/types';
-import { NONE } from 'packages/core/src/util/Constants';
+import { ColorValue } from 'core/types';
+import { NONE } from 'core/util/Constants';
 
 /**
  * Extends {@link Shape} to implement an actor shape. If a custom shape with one
diff --git a/packages/core/src/view/geometry/shape/Shape.ts b/packages/core/src/view/geometry/shape/Shape.ts
index fc5d453fb..aa4e20263 100644
--- a/packages/core/src/view/geometry/shape/Shape.ts
+++ b/packages/core/src/view/geometry/shape/Shape.ts
@@ -23,7 +23,7 @@ import {
   SHADOW_OFFSET_Y,
 } from '../../../util/Constants';
 import Point from '../Point';
-import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
+import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
 import SvgCanvas2D from '../../../util/canvas/SvgCanvas2D';
 import InternalEvent from '../../event/InternalEvent';
 import mxClient from '../../../mxClient';
diff --git a/packages/core/src/view/geometry/shape/edge/Arrow.ts b/packages/core/src/view/geometry/shape/edge/Arrow.ts
index 102120880..e9c6120ba 100644
--- a/packages/core/src/view/geometry/shape/edge/Arrow.ts
+++ b/packages/core/src/view/geometry/shape/edge/Arrow.ts
@@ -9,7 +9,7 @@ import { ARROW_SIZE, ARROW_SPACING, ARROW_WIDTH } from '../../../../util/Constan
 import Rectangle from '../../Rectangle';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Point from '../../Point';
-import { ColorValue } from 'packages/core/src/types';
+import { ColorValue } from 'core/types';
 
 /**
  * Extends {@link Shape} to implement an arrow shape. The shape is used to represent edges, not vertices.
diff --git a/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts b/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts
index 1ecea57c9..1145b9f27 100644
--- a/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts
+++ b/packages/core/src/view/geometry/shape/edge/ArrowConnector.ts
@@ -11,7 +11,7 @@ import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Point from '../../Point';
 import Rectangle from '../../Rectangle';
 import CellState from '../../../cell/datatypes/CellState';
-import { ColorValue } from 'packages/core/src/types';
+import { ColorValue } from 'core/types';
 
 /**
  * Extends {@link Shape} to implement an new rounded arrow shape with support for waypoints and double arrows. The
diff --git a/packages/core/src/view/geometry/shape/edge/Connector.ts b/packages/core/src/view/geometry/shape/edge/Connector.ts
index fa1dc31a7..7f4885ec3 100644
--- a/packages/core/src/view/geometry/shape/edge/Connector.ts
+++ b/packages/core/src/view/geometry/shape/edge/Connector.ts
@@ -11,7 +11,7 @@ import Marker from './Marker';
 import Point from '../../Point';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Rectangle from '../../Rectangle';
-import { ColorValue } from 'packages/core/src/types';
+import { ColorValue } from 'core/types';
 
 /**
  * Extends {@link mxShape} to implement a connector shape.
diff --git a/packages/core/src/view/geometry/shape/edge/Line.ts b/packages/core/src/view/geometry/shape/edge/Line.ts
index 8bdfdd0fc..77ee72fe4 100644
--- a/packages/core/src/view/geometry/shape/edge/Line.ts
+++ b/packages/core/src/view/geometry/shape/edge/Line.ts
@@ -7,7 +7,7 @@
 import Shape from '../Shape';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Rectangle from '../../Rectangle';
-import { ColorValue } from 'packages/core/src/types';
+import { ColorValue } from 'core/types';
 
 /**
  * Extends {@link Shape} to implement a horizontal line shape.
diff --git a/packages/core/src/view/geometry/shape/edge/Marker.ts b/packages/core/src/view/geometry/shape/edge/Marker.ts
index 6051e85dd..dd207c902 100644
--- a/packages/core/src/view/geometry/shape/edge/Marker.ts
+++ b/packages/core/src/view/geometry/shape/edge/Marker.ts
@@ -4,8 +4,8 @@
  * Updated to ES9 syntax by David Morrissey 2021
  * Type definitions from the typed-mxgraph project
  */
-import { ArrowType } from 'packages/core/src/types';
-import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
+import { ArrowType } from 'core/types';
+import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
 import {
   ARROW_CLASSIC,
   ARROW_CLASSIC_THIN,
diff --git a/packages/core/src/view/geometry/shape/edge/Polyline.ts b/packages/core/src/view/geometry/shape/edge/Polyline.ts
index fd2368e4f..e91a47788 100644
--- a/packages/core/src/view/geometry/shape/edge/Polyline.ts
+++ b/packages/core/src/view/geometry/shape/edge/Polyline.ts
@@ -8,7 +8,7 @@ import Shape from '../Shape';
 import { LINE_ARCSIZE } from '../../../../util/Constants';
 import Point from '../../Point';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
-import { ColorValue } from 'packages/core/src/types';
+import { ColorValue } from 'core/types';
 
 /**
  * Class: mxPolyline
diff --git a/packages/core/src/view/geometry/shape/node/CylinderShape.ts b/packages/core/src/view/geometry/shape/node/CylinderShape.ts
index bc74aa637..56168bd3a 100644
--- a/packages/core/src/view/geometry/shape/node/CylinderShape.ts
+++ b/packages/core/src/view/geometry/shape/node/CylinderShape.ts
@@ -7,7 +7,7 @@
 import Shape from '../Shape';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Rectangle from '../../Rectangle';
-import { NONE } from 'packages/core/src/util/Constants';
+import { NONE } from 'core/util/Constants';
 
 /**
  * Extends {@link Shape} to implement an cylinder shape. If a custom shape with one filled area and an overlay path is
diff --git a/packages/core/src/view/geometry/shape/node/ImageShape.ts b/packages/core/src/view/geometry/shape/node/ImageShape.ts
index 1c6bbd103..723f50c16 100644
--- a/packages/core/src/view/geometry/shape/node/ImageShape.ts
+++ b/packages/core/src/view/geometry/shape/node/ImageShape.ts
@@ -10,7 +10,7 @@ import Rectangle from '../../Rectangle';
 import CellState from '../../../cell/datatypes/CellState';
 import AbstractCanvas2D from '../../../../util/canvas/SvgCanvas2D';
 import CellOverlay from '../../../cell/CellOverlay';
-import { NONE } from 'packages/core/src/util/Constants';
+import { NONE } from 'core/util/Constants';
 
 /**
  * Extends {@link mxShape} to implement an image shape.
diff --git a/packages/core/src/view/geometry/shape/node/LabelShape.ts b/packages/core/src/view/geometry/shape/node/LabelShape.ts
index dd54ddfd1..2e9e29d80 100644
--- a/packages/core/src/view/geometry/shape/node/LabelShape.ts
+++ b/packages/core/src/view/geometry/shape/node/LabelShape.ts
@@ -16,8 +16,8 @@ import {
   NONE,
 } from '../../../../util/Constants';
 import RectangleShape from './RectangleShape';
-import { ColorValue } from 'packages/core/src/types';
-import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
+import { ColorValue } from 'core/types';
+import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
 
 /**
  * Class: mxLabel
diff --git a/packages/core/src/view/geometry/shape/node/RectangleShape.ts b/packages/core/src/view/geometry/shape/node/RectangleShape.ts
index cc653b234..56caa159b 100644
--- a/packages/core/src/view/geometry/shape/node/RectangleShape.ts
+++ b/packages/core/src/view/geometry/shape/node/RectangleShape.ts
@@ -13,7 +13,7 @@ import {
 import Shape from '../Shape';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
 import Rectangle from '../../Rectangle';
-import { ColorValue } from 'packages/core/src/types';
+import { ColorValue } from 'core/types';
 
 /**
  * Extends {@link Shape} to implement a rectangle shape.
diff --git a/packages/core/src/view/geometry/shape/node/StencilShape.ts b/packages/core/src/view/geometry/shape/node/StencilShape.ts
index 096e8f264..6d476fd1e 100644
--- a/packages/core/src/view/geometry/shape/node/StencilShape.ts
+++ b/packages/core/src/view/geometry/shape/node/StencilShape.ts
@@ -24,7 +24,7 @@ import StencilShapeRegistry from './StencilShapeRegistry';
 import { getChildNodes, getTextContent } from '../../../../util/DomUtils';
 import Point from '../../Point';
 import AbstractCanvas2D from '../../../../util/canvas/AbstractCanvas2D';
-import { AlignValue, ColorValue, VAlignValue } from 'packages/core/src/types';
+import { AlignValue, ColorValue, VAlignValue } from 'core/types';
 
 /**
  * Implements a generic shape which is based on a XML node as a description.
diff --git a/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts b/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts
index 85079b9ff..0cb079884 100644
--- a/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts
+++ b/packages/core/src/view/geometry/shape/node/SwimlaneShape.ts
@@ -15,8 +15,8 @@ import {
   NONE,
   RECTANGLE_ROUNDING_FACTOR,
 } from '../../../../util/Constants';
-import { ColorValue } from 'packages/core/src/types';
-import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
+import { ColorValue } from 'core/types';
+import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
 
 /**
  * Extends {@link Shape} to implement a swimlane shape.
diff --git a/packages/core/src/view/geometry/shape/node/TextShape.ts b/packages/core/src/view/geometry/shape/node/TextShape.ts
index bd88c9c46..19d3edba3 100644
--- a/packages/core/src/view/geometry/shape/node/TextShape.ts
+++ b/packages/core/src/view/geometry/shape/node/TextShape.ts
@@ -47,8 +47,8 @@ import {
   OverflowValue,
   TextDirectionValue,
   VAlignValue,
-} from 'packages/core/src/types';
-import SvgCanvas2D from 'packages/core/src/util/canvas/SvgCanvas2D';
+} from 'core/types';
+import SvgCanvas2D from 'core/util/canvas/SvgCanvas2D';
 
 /**
  * Extends mxShape to implement a text shape.
diff --git a/packages/core/src/view/geometry/shape/node/TriangleShape.ts b/packages/core/src/view/geometry/shape/node/TriangleShape.ts
index 36a303e15..506a076e8 100644
--- a/packages/core/src/view/geometry/shape/node/TriangleShape.ts
+++ b/packages/core/src/view/geometry/shape/node/TriangleShape.ts
@@ -8,7 +8,7 @@
 import Point from '../../Point';
 import Actor from '../Actor';
 import { LINE_ARCSIZE } from '../../../../util/Constants';
-import AbstractCanvas2D from 'packages/core/src/util/canvas/AbstractCanvas2D';
+import AbstractCanvas2D from 'core/util/canvas/AbstractCanvas2D';
 
 /**
  * Implementation of the triangle shape.
diff --git a/packages/core/src/view/grouping_ordering/GraphGrouping.ts b/packages/core/src/view/grouping_ordering/GraphGrouping.ts
index 17b17d6a0..a84e37990 100644
--- a/packages/core/src/view/grouping_ordering/GraphGrouping.ts
+++ b/packages/core/src/view/grouping_ordering/GraphGrouping.ts
@@ -1,20 +1,53 @@
-import Cell from "../cell/datatypes/Cell";
-import CellArray from "../cell/datatypes/CellArray";
-import {sortCells} from "../../util/Utils";
-import Geometry from "../geometry/Geometry";
-import EventObject from "../event/EventObject";
-import InternalEvent from "../event/InternalEvent";
-import Rectangle from "../geometry/Rectangle";
-import Point from "../geometry/Point";
-import Graph from "../Graph";
+import Cell from '../cell/datatypes/Cell';
+import CellArray from '../cell/datatypes/CellArray';
+import { autoImplement, sortCells } from '../../util/Utils';
+import Geometry from '../geometry/Geometry';
+import EventObject from '../event/EventObject';
+import InternalEvent from '../event/InternalEvent';
+import Rectangle from '../geometry/Rectangle';
+import Point from '../geometry/Point';
+import Graph from '../Graph';
+import GraphSelection from '../selection/GraphSelection';
+import GraphCells from '../cell/GraphCells';
+import GraphSwimlane from '../swimlane/GraphSwimlane';
+import GraphEdge from '../cell/edge/GraphEdge';
 
-class GraphGrouping {
-  constructor(graph: Graph) {
-    this.graph = graph;
-  }
-
-  graph: Graph;
+type PartialGraph = Pick<
+  Graph,
+  | 'getModel'
+  | 'fireEvent'
+  | 'getView'
+  | 'getDefaultParent'
+  | 'batchUpdate'
+  | 'isValidRoot'
+  | 'getCurrentRoot'
+>;
+type PartialCells = Pick<
+  GraphCells,
+  | 'cellsAdded'
+  | 'cellsMoved'
+  | 'cellsResized'
+  | 'getBoundingBoxFromGeometry'
+  | 'cellsRemoved'
+  | 'getChildCells'
+  | 'moveCells'
+>;
+type PartialEdge = Pick<GraphEdge, 'addAllEdges'>;
+type PartialSelection = Pick<
+  GraphSelection,
+  'getSelectionCells' | 'getSelectionCell' | 'clearSelection' | 'setSelectionCell'
+>;
+type PartialSwimlane = Pick<
+  GraphSwimlane,
+  'isSwimlane' | 'getStartSize' | 'getActualStartSize'
+>;
+type PartialClass = PartialGraph &
+  PartialCells &
+  PartialEdge &
+  PartialSelection &
+  PartialSwimlane;
 
+class GraphGrouping extends autoImplement<PartialClass>() {
   /*****************************************************************************
    * Group: Grouping
    *****************************************************************************/
@@ -55,12 +88,12 @@ class GraphGrouping {
         parent = <Cell>cells[0].getParent();
       }
 
-      this.graph.model.beginUpdate();
+      this.getModel().beginUpdate();
       try {
         // Checks if the group has a geometry and
         // creates one if one does not exist
         if (group.getGeometry() == null) {
-          this.graph.model.setGeometry(group, new Geometry());
+          this.getModel().setGeometry(group, new Geometry());
         }
 
         // Adds the group into the parent
@@ -84,7 +117,7 @@ class GraphGrouping {
         // Resizes the group
         this.cellsResized(new CellArray(group), [bounds], false);
 
-        this.graph.fireEvent(
+        this.fireEvent(
           new EventObject(
             InternalEvent.GROUP_CELLS,
             'group',
@@ -96,7 +129,7 @@ class GraphGrouping {
           )
         );
       } finally {
-        this.graph.model.endUpdate();
+        this.getModel().endUpdate();
       }
     }
     return group;
@@ -125,10 +158,11 @@ class GraphGrouping {
   /**
    * Returns the bounds to be used for the given group and children.
    */
-  getBoundsForGroup(group: Cell,
-                    children: CellArray,
-                    border: number | null): Rectangle | null {
-
+  getBoundsForGroup(
+    group: Cell,
+    children: CellArray,
+    border: number | null
+  ): Rectangle | null {
     const result = this.getBoundingBoxFromGeometry(children, true);
     if (result != null) {
       if (this.isSwimlane(group)) {
@@ -193,7 +227,7 @@ class GraphGrouping {
     }
 
     if (cells != null && cells.length > 0) {
-      this.graph.model.beginUpdate();
+      this.getModel().beginUpdate();
       try {
         for (let i = 0; i < cells.length; i += 1) {
           let children = cells[i].getChildren();
@@ -208,7 +242,7 @@ class GraphGrouping {
 
             // Fix relative child cells
             for (const child of children) {
-              const state = this.graph.view.getState(child);
+              const state = this.getView().getState(child);
               let geo = child.getGeometry();
 
               if (state != null && geo != null && geo.relative) {
@@ -217,18 +251,16 @@ class GraphGrouping {
                 geo.y = (<Point>state.origin).y;
                 geo.relative = false;
 
-                this.graph.model.setGeometry(child, geo);
+                this.getModel().setGeometry(child, geo);
               }
             }
           }
         }
 
         this.removeCellsAfterUngroup(cells);
-        this.graph.fireEvent(
-          new EventObject(InternalEvent.UNGROUP_CELLS, 'cells', cells)
-        );
+        this.fireEvent(new EventObject(InternalEvent.UNGROUP_CELLS, 'cells', cells));
       } finally {
-        this.graph.model.endUpdate();
+        this.getModel().endUpdate();
       }
     }
     return result;
@@ -272,7 +304,7 @@ class GraphGrouping {
     if (cells == null) {
       cells = this.getSelectionCells();
     }
-    this.graph.model.beginUpdate();
+    this.getModel().beginUpdate();
     try {
       const parent = this.getDefaultParent();
       const index = parent.getChildCount();
@@ -282,7 +314,7 @@ class GraphGrouping {
         new EventObject(InternalEvent.REMOVE_CELLS_FROM_PARENT, 'cells', cells)
       );
     } finally {
-      this.graph.model.endUpdate();
+      this.getModel().endUpdate();
     }
     return cells;
   }
@@ -317,7 +349,7 @@ class GraphGrouping {
     leftBorder: number = 0
   ): CellArray {
     if (cells == null) {
-      cells = this.graph.selection.getSelectionCells();
+      cells = this.getSelectionCells();
     }
 
     border = border != null ? border : 0;
@@ -327,7 +359,7 @@ class GraphGrouping {
     bottomBorder = bottomBorder != null ? bottomBorder : 0;
     leftBorder = leftBorder != null ? leftBorder : 0;
 
-    this.graph.batchUpdate(() => {
+    this.batchUpdate(() => {
       for (let i = cells.length - 1; i >= 0; i--) {
         let geo = cells[i].getGeometry();
         if (geo == null) {
@@ -348,32 +380,18 @@ class GraphGrouping {
             geo = <Geometry>geo.clone();
 
             if (moveGroup) {
-              geo.x = Math.round(
-                geo.x + bounds.x - border - size.x - leftBorder
-              );
-              geo.y = Math.round(
-                geo.y + bounds.y - border - size.y - topBorder
-              );
+              geo.x = Math.round(geo.x + bounds.x - border - size.x - leftBorder);
+              geo.y = Math.round(geo.y + bounds.y - border - size.y - topBorder);
             }
 
             geo.width = Math.round(
-              bounds.width +
-              2 * border +
-              size.x +
-              leftBorder +
-              rightBorder +
-              size.width
+              bounds.width + 2 * border + size.x + leftBorder + rightBorder + size.width
             );
             geo.height = Math.round(
-              bounds.height +
-              2 * border +
-              size.y +
-              topBorder +
-              bottomBorder +
-              size.height
+              bounds.height + 2 * border + size.y + topBorder + bottomBorder + size.height
             );
 
-            this.graph.model.setGeometry(cells[i], geo);
+            this.getModel().setGeometry(cells[i], geo);
             this.moveCells(
               children,
               border + size.x - bounds.x + leftBorder,
@@ -402,7 +420,7 @@ class GraphGrouping {
     cell = cell || this.getSelectionCell();
 
     if (cell != null && this.isValidRoot(cell)) {
-      this.view.setCurrentRoot(cell);
+      this.getView().setCurrentRoot(cell);
       this.clearSelection();
     }
   }
@@ -416,30 +434,26 @@ class GraphGrouping {
     const current = this.getCurrentRoot();
 
     if (current != null) {
-      let next = <Cell>current.getParent();
+      let next = current.getParent();
 
       // Finds the next valid root in the hierarchy
-      while (
-        next !== root &&
-        !this.isValidRoot(next) &&
-        next.getParent() !== root
-        ) {
+      while (next !== root && !this.isValidRoot(next) && next.getParent() !== root) {
         next = <Cell>next.getParent();
       }
 
       // Clears the current root if the new root is
       // the model's root or one of the layers.
       if (next === root || next.getParent() === root) {
-        this.view.setCurrentRoot(null);
+        this.getView().setCurrentRoot(null);
       } else {
-        this.view.setCurrentRoot(next);
+        this.getView().setCurrentRoot(next);
       }
 
-      const state = this.view.getState(current);
+      const state = this.getView().getState(current);
 
       // Selects the previous root in the graph
       if (state != null) {
-        this.selection.setSelectionCell(current);
+        this.setSelectionCell(current);
       }
     }
   }
diff --git a/packages/core/src/view/grouping_ordering/GraphOrder.ts b/packages/core/src/view/grouping_ordering/GraphOrder.ts
index 0175873d5..3784896e6 100644
--- a/packages/core/src/view/grouping_ordering/GraphOrder.ts
+++ b/packages/core/src/view/grouping_ordering/GraphOrder.ts
@@ -1,16 +1,15 @@
-import CellArray from "../cell/datatypes/CellArray";
-import {sortCells} from "../../util/Utils";
-import EventObject from "../event/EventObject";
-import InternalEvent from "../event/InternalEvent";
-import Graph from "../Graph";
+import CellArray from '../cell/datatypes/CellArray';
+import { autoImplement, sortCells } from '../../util/Utils';
+import EventObject from '../event/EventObject';
+import InternalEvent from '../event/InternalEvent';
+import Graph from '../Graph';
+import GraphSelection from '../selection/GraphSelection';
 
-class GraphOrder {
-  constructor(graph: Graph) {
-    this.graph = graph;
-  }
-
-  graph: Graph;
+type PartialGraph = Pick<Graph, 'fireEvent' | 'batchUpdate' | 'getModel'>;
+type PartialSelection = Pick<GraphSelection, 'getSelectionCells'>;
+type PartialClass = PartialGraph & PartialSelection;
 
+class GraphOrder extends autoImplement<PartialClass>() {
   /*****************************************************************************
    * Group: Order
    *****************************************************************************/
@@ -26,17 +25,22 @@ class GraphOrder {
    */
   orderCells(
     back: boolean = false,
-    cells: CellArray = this.graph.selection.getSelectionCells()
+    cells: CellArray = this.getSelectionCells()
   ): CellArray {
-
     if (cells == null) {
-      cells = sortCells(this.graph.selection.getSelectionCells(), true);
+      cells = sortCells(this.getSelectionCells(), true);
     }
 
-    this.graph.batchUpdate(() => {
+    this.batchUpdate(() => {
       this.cellsOrdered(cells, back);
-      const event = new EventObject(InternalEvent.ORDER_CELLS, 'back', back, 'cells', cells);
-      this.graph.events.fireEvent(event);
+      const event = new EventObject(
+        InternalEvent.ORDER_CELLS,
+        'back',
+        back,
+        'cells',
+        cells
+      );
+      this.fireEvent(event);
     });
 
     return cells;
@@ -49,25 +53,19 @@ class GraphOrder {
    * @param cells Array of {@link mxCell} whose order should be changed.
    * @param back Boolean that specifies if the cells should be moved to back.
    */
-  cellsOrdered(cells: CellArray,
-               back: boolean = false) {
-
-    this.graph.batchUpdate(() => {
+  cellsOrdered(cells: CellArray, back: boolean = false) {
+    this.batchUpdate(() => {
       for (let i = 0; i < cells.length; i += 1) {
         const parent = cells[i].getParent();
 
         if (back) {
-          this.graph.model.add(parent, cells[i], i);
+          this.getModel().add(parent, cells[i], i);
         } else {
-          this.graph.model.add(
-            parent,
-            cells[i],
-            parent ? parent.getChildCount() - 1 : 0
-          );
+          this.getModel().add(parent, cells[i], parent ? parent.getChildCount() - 1 : 0);
         }
       }
 
-      this.graph.events.fireEvent(
+      this.fireEvent(
         new EventObject(InternalEvent.CELLS_ORDERED, 'back', back, 'cells', cells)
       );
     });
diff --git a/packages/core/src/view/image/ImageExport.ts b/packages/core/src/view/image/ImageExport.ts
index 5b2a86a8d..57fb94887 100644
--- a/packages/core/src/view/image/ImageExport.ts
+++ b/packages/core/src/view/image/ImageExport.ts
@@ -75,7 +75,8 @@ class ImageExport {
 
       for (let i = 0; i < childCount; i += 1) {
         const childState = graph.view.getState(state.cell.getChildAt(i));
-        this.visitStatesRecursive(childState, canvas, visitor);
+
+        if (childState) this.visitStatesRecursive(childState, canvas, visitor);
       }
     }
   }
diff --git a/packages/core/src/view/layout/layout/FastOrganicLayout.ts b/packages/core/src/view/layout/layout/FastOrganicLayout.ts
index e428c157b..3ceea4dc0 100644
--- a/packages/core/src/view/layout/layout/FastOrganicLayout.ts
+++ b/packages/core/src/view/layout/layout/FastOrganicLayout.ts
@@ -4,7 +4,7 @@
  * Updated to ES9 syntax by David Morrissey 2021
  * Type definitions from the typed-mxgraph project
  */
-import mxObjectIdentity from '../../../util/mxObjectIdentity';
+import ObjectIdentity from '../../../util/ObjectIdentity';
 import GraphLayout from './GraphLayout';
 import Graph from '../../Graph';
 import Cell from '../../cell/datatypes/Cell';
@@ -186,8 +186,7 @@ class MxFastOrganicLayout extends GraphLayout {
    */
   isVertexIgnored(vertex: Cell) {
     return (
-      super.isVertexIgnored(vertex) ||
-      this.graph.getConnections(vertex).length === 0
+      super.isVertexIgnored(vertex) || this.graph.getConnections(vertex).length === 0
     );
   }
 
@@ -237,7 +236,7 @@ class MxFastOrganicLayout extends GraphLayout {
       this.cellLocation[i] = [];
 
       // Set up the mapping from array indices to cells
-      const id = mxObjectIdentity.get(vertex);
+      const id = ObjectIdentity.get(vertex);
       this.indices[id] = i;
       const bounds = this.getVertexBounds(vertex);
 
@@ -283,7 +282,7 @@ class MxFastOrganicLayout extends GraphLayout {
           }
 
           // Looks the cell up in the indices dictionary
-          const id = mxObjectIdentity.get(cells[j]);
+          const id = ObjectIdentity.get(cells[j]);
           const index = this.indices[id];
 
           // Check the connected cell in part of the vertex list to be
@@ -309,11 +308,7 @@ class MxFastOrganicLayout extends GraphLayout {
       }
 
       // Main iteration loop
-      for (
-        this.iteration = 0;
-        this.iteration < this.maxIterations;
-        this.iteration += 1
-      ) {
+      for (this.iteration = 0; this.iteration < this.maxIterations; this.iteration += 1) {
         if (!this.allowedToRun) {
           return;
         }
@@ -391,8 +386,7 @@ class MxFastOrganicLayout extends GraphLayout {
         // Get the distance of displacement for this node for this
         // iteration
         let deltaLength = Math.sqrt(
-          this.dispX[index] * this.dispX[index] +
-            this.dispY[index] * this.dispY[index]
+          this.dispX[index] * this.dispX[index] + this.dispY[index] * this.dispY[index]
         );
 
         if (deltaLength < 0.001) {
@@ -402,12 +396,10 @@ class MxFastOrganicLayout extends GraphLayout {
         // Scale down by the current temperature if less than the
         // displacement distance
         const newXDisp =
-          (this.dispX[index] / deltaLength) *
-          Math.min(deltaLength, this.temperature);
+          (this.dispX[index] / deltaLength) * Math.min(deltaLength, this.temperature);
 
         const newYDisp =
-          (this.dispY[index] / deltaLength) *
-          Math.min(deltaLength, this.temperature);
+          (this.dispY[index] / deltaLength) * Math.min(deltaLength, this.temperature);
 
         // reset displacements
         this.dispX[index] = 0;
@@ -495,8 +487,7 @@ class MxFastOrganicLayout extends GraphLayout {
 
           // Distance between nodes
           const deltaLength = Math.sqrt(xDelta * xDelta + yDelta * yDelta);
-          let deltaLengthWithRadius =
-            deltaLength - this.radius[i] - this.radius[j];
+          let deltaLengthWithRadius = deltaLength - this.radius[i] - this.radius[j];
 
           if (deltaLengthWithRadius > this.maxDistanceLimit) {
             // Ignore vertices too far apart
@@ -529,8 +520,7 @@ class MxFastOrganicLayout extends GraphLayout {
    * fashion to zero.
    */
   reduceTemperature() {
-    this.temperature =
-      this.initialTemp * (1.0 - this.iteration / this.maxIterations);
+    this.temperature = this.initialTemp * (1.0 - this.iteration / this.maxIterations);
   }
 }
 
diff --git a/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts b/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts
index d11585938..3f294289d 100644
--- a/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts
+++ b/packages/core/src/view/layout/layout/ParallelEdgeLayout.ts
@@ -7,7 +7,7 @@
 
 import Point from '../../geometry/Point';
 import GraphLayout from './GraphLayout';
-import mxObjectIdentity from '../../../util/mxObjectIdentity';
+import ObjectIdentity from '../../../util/ObjectIdentity';
 import Graph from '../../Graph';
 import CellArray from '../../cell/datatypes/CellArray';
 import Cell from '../../cell/datatypes/Cell';
@@ -105,7 +105,7 @@ class ParallelEdgeLayout extends GraphLayout {
   findParallels(parent: Cell, cells: CellArray) {
     const lookup = [];
 
-    const addCell = cell => {
+    const addCell = (cell) => {
       if (!this.isEdgeIgnored(cell)) {
         const id = this.getEdgeId(cell);
 
@@ -151,8 +151,8 @@ class ParallelEdgeLayout extends GraphLayout {
     let pts = '';
 
     if (src != null && trg != null) {
-      src = mxObjectIdentity.get(src);
-      trg = mxObjectIdentity.get(trg);
+      src = ObjectIdentity.get(src);
+      trg = ObjectIdentity.get(trg);
 
       if (this.checkOverlap) {
         const state = this.graph.view.getState(edge);
diff --git a/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts b/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts
index 493a79c72..898a84226 100644
--- a/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts
+++ b/packages/core/src/view/layout/layout/hierarchical/SwimlaneLayout.ts
@@ -11,7 +11,7 @@ import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
 import Dictionary from '../../../../util/Dictionary';
 import Rectangle from '../../../geometry/Rectangle';
 import SwimlaneModel from './model/SwimlaneModel';
-import mxObjectIdentity from '../../../../util/mxObjectIdentity';
+import ObjectIdentity from '../../../../util/ObjectIdentity';
 import mxSwimlaneOrdering from './stage/mxSwimlaneOrdering';
 import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
 import CoordinateAssignment from './stage/CoordinateAssignment';
@@ -694,7 +694,7 @@ class SwimlaneLayout extends GraphLayout {
       cell.getParent() !== this.parent &&
       cell.isVisible()
     ) {
-      result[mxObjectIdentity.get(cell)] = cell;
+      result[ObjectIdentity.get(cell)] = cell;
     }
 
     if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) {
@@ -792,7 +792,7 @@ class SwimlaneLayout extends GraphLayout {
       // Has this vertex been seen before in any traversal
       // And if the filled vertex set is populated, only
       // process vertices in that it contains
-      const vertexID = mxObjectIdentity.get(vertex);
+      const vertexID = ObjectIdentity.get(vertex);
 
       if (
         allVertices[vertexID] == null &&
diff --git a/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts b/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts
index 09c22a959..475a6f70d 100644
--- a/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts
+++ b/packages/core/src/view/layout/layout/hierarchical/model/GraphAbstractHierarchyCell.ts
@@ -4,65 +4,65 @@
  * Updated to ES9 syntax by David Morrissey 2021
  * Type definitions from the typed-mxgraph project
  */
+import CellArray from 'core/view/cell/datatypes/CellArray';
 import Cell from '../../../../cell/datatypes/Cell';
-import CellArray from '../../../../cell/datatypes/CellArray';
 
-class MxGraphAbstractHierarchyCell {
+class GraphAbstractHierarchyCell extends Cell {
   /**
    * Variable: maxRank
    *
    * The maximum rank this cell occupies. Default is -1.
    */
-  maxRank: number = -1;
+  maxRank = -1;
 
   /**
    * Variable: minRank
    *
    * The minimum rank this cell occupies. Default is -1.
    */
-  minRank: number = -1;
+  minRank = -1;
 
   /**
    * Variable: x
    *
    * The x position of this cell for each layer it occupies
    */
-  x: number = null;
+  x: number[];
 
   /**
    * Variable: y
    *
    * The y position of this cell for each layer it occupies
    */
-  y: number = null;
+  y: number[];
 
   /**
    * Variable: width
    *
    * The width of this cell. Default is 0.
    */
-  width: number = 0;
+  width = 0;
 
   /**
    * Variable: height
    *
    * The height of this cell. Default is 0.
    */
-  height: number = 0;
+  height = 0;
 
   /**
    * Variable: nextLayerConnectedCells
    *
    * A cached version of the cells this cell connects to on the next layer up
    */
-  nextLayerConnectedCells: CellArray | null = null;
+  nextLayerConnectedCells: CellArray[] | null = null;
 
   /**
    * Variable: previousLayerConnectedCells
    *
    * A cached version of the cells this cell connects to on the next layer down
    */
-  previousLayerConnectedCells: CellArray | null = null;
+  previousLayerConnectedCells: CellArray[] | null = null;
 
   /**
    * Variable: temp
@@ -74,7 +74,7 @@ class MxGraphAbstractHierarchyCell {
    * be used for hashing the nodes in the model dfs and so hashCode
    * was created
    */
-  temp: any = null;
+  temp: number[];
 
   /**
    * Class: mxGraphAbstractHierarchyCell
@@ -86,6 +86,8 @@ class MxGraphAbstractHierarchyCell {
    * Constructs a new hierarchical layout algorithm.
    */
   constructor() {
+    super();
+
     this.x = [];
     this.y = [];
     this.temp = [];
@@ -96,7 +98,7 @@ class MxGraphAbstractHierarchyCell {
    *
    * Returns the cells this cell connects to on the next layer up
    */
-  getNextLayerConnectedCells(layer: number): Cell | null {
+  getNextLayerConnectedCells(layer: number): CellArray | null {
     return null;
   }
 
@@ -105,7 +107,7 @@ class MxGraphAbstractHierarchyCell {
    *
    * Returns the cells this cell connects to on the next layer down
    */
-  getPreviousLayerConnectedCells(layer: number): Cell | null {
+  getPreviousLayerConnectedCells(layer: number): CellArray | null {
     return null;
   }
 
@@ -114,7 +116,7 @@ class MxGraphAbstractHierarchyCell {
    *
    * Returns whether or not this cell is an edge
    */
-  isEdge(): boolean {
+  isEdge() {
     return false;
   }
 
@@ -123,7 +125,7 @@ class MxGraphAbstractHierarchyCell {
    *
    * Returns whether or not this cell is a node
    */
-  isVertex(): boolean {
+  isVertex() {
     return false;
   }
 
@@ -132,7 +134,7 @@ class MxGraphAbstractHierarchyCell {
    *
    * Gets the value of temp for the specified layer
    */
-  getGeneralPurposeVariable(layer: number): null | number {
+  getGeneralPurposeVariable(layer: number): number | null {
     return null;
   }
 
@@ -141,16 +143,14 @@ class MxGraphAbstractHierarchyCell {
    *
    * Set the value of temp for the specified layer
    */
-  setGeneralPurposeVariable(layer: number, value: number): null | void {
-    return null;
-  }
+  setGeneralPurposeVariable(layer: number, value: number) {}
 
   /**
    * Function: setX
    *
    * Set the value of x for the specified layer
    */
-  setX(layer: number, value: number): void {
+  setX(layer: number, value: number) {
     if (this.isVertex()) {
       this.x[0] = value;
     } else if (this.isEdge()) {
@@ -163,7 +163,7 @@ class MxGraphAbstractHierarchyCell {
    *
    * Gets the value of x on the specified layer
    */
-  getX(layer: number): number {
+  getX(layer: number) {
     if (this.isVertex()) {
       return this.x[0];
     }
@@ -178,7 +178,7 @@ class MxGraphAbstractHierarchyCell {
    *
    * Set the value of y for the specified layer
    */
-  setY(layer: number, value: number): void {
+  setY(layer: number, value: number) {
     if (this.isVertex()) {
       this.y[0] = value;
     } else if (this.isEdge()) {
@@ -187,4 +187,4 @@ class MxGraphAbstractHierarchyCell {
   }
 }
 
-export default MxGraphAbstractHierarchyCell;
+export default GraphAbstractHierarchyCell;
diff --git a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts
index dbf621808..63fefb624 100644
--- a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts
+++ b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyEdge.ts
@@ -5,7 +5,7 @@
  * Type definitions from the typed-mxgraph project
  */
 import GraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
-import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
+import ObjectIdentity from '../../../../../util/ObjectIdentity';
 import CellArray from '../../../../cell/datatypes/CellArray';
 import Cell from '../../../../cell/datatypes/Cell';
 
@@ -23,7 +23,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * The object identities of the wrapped cells
    */
-  ids = null;
+  ids: string[];
 
   /**
    * Variable: source
@@ -61,12 +61,12 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    * edges - a list of real graph edges this abstraction represents
    */
   constructor(edges: CellArray) {
-    super(edges);
+    super();
     this.edges = edges;
     this.ids = [];
 
     for (let i = 0; i < edges.length; i += 1) {
-      this.ids.push(mxObjectIdentity.get(edges[i]));
+      this.ids.push(ObjectIdentity.get(edges[i]));
     }
   }
 
@@ -75,7 +75,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * Inverts the direction of this internal edge(s)
    */
-  invert(layer) {
+  invert() {
     const temp = this.source;
     this.source = this.target;
     this.target = temp;
@@ -87,15 +87,15 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * Returns the cells this cell connects to on the next layer up
    */
-  getNextLayerConnectedCells(layer: Cell): CellArray {
+  getNextLayerConnectedCells(layer: number) {
     if (this.nextLayerConnectedCells == null) {
       this.nextLayerConnectedCells = [];
 
       for (let i = 0; i < this.temp.length; i += 1) {
-        this.nextLayerConnectedCells[i] = [];
+        this.nextLayerConnectedCells[i] = new CellArray();
 
         if (i === this.temp.length - 1) {
-          this.nextLayerConnectedCells[i].push(this.source);
+          this.nextLayerConnectedCells[i].push(this.source as Cell);
         } else {
           this.nextLayerConnectedCells[i].push(this);
         }
@@ -109,15 +109,15 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * Returns the cells this cell connects to on the next layer down
    */
-  getPreviousLayerConnectedCells(layer: Cell): CellArray {
+  getPreviousLayerConnectedCells(layer: number) {
     if (this.previousLayerConnectedCells == null) {
       this.previousLayerConnectedCells = [];
 
       for (let i = 0; i < this.temp.length; i += 1) {
-        this.previousLayerConnectedCells[i] = [];
+        this.previousLayerConnectedCells[i] = new CellArray();
 
         if (i === 0) {
-          this.previousLayerConnectedCells[i].push(this.target);
+          this.previousLayerConnectedCells[i].push(this.target as Cell);
         } else {
           this.previousLayerConnectedCells[i].push(this);
         }
@@ -131,7 +131,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * Returns true.
    */
-  isEdge(): boolean {
+  isEdge() {
     return true;
   }
 
@@ -140,7 +140,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * Gets the value of temp for the specified layer
    */
-  getGeneralPurposeVariable(layer: number): any {
+  getGeneralPurposeVariable(layer: number) {
     return this.temp[layer - this.minRank - 1];
   }
 
@@ -149,7 +149,7 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * Set the value of temp for the specified layer
    */
-  setGeneralPurposeVariable(layer: number, value: any): void {
+  setGeneralPurposeVariable(layer: number, value: number) {
     this.temp[layer - this.minRank - 1] = value;
   }
 
@@ -158,8 +158,8 @@ class GraphHierarchyEdge extends GraphAbstractHierarchyCell {
    *
    * Gets the first core edge associated with this wrapper
    */
-  getCoreCell(): Cell | null {
-    if (this.edges != null && this.edges.length > 0) {
+  getCoreCell() {
+    if (this.edges.length > 0) {
       return this.edges[0];
     }
     return null;
diff --git a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts
index 970f467ce..81d057c26 100644
--- a/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts
+++ b/packages/core/src/view/layout/layout/hierarchical/model/GraphHierarchyNode.ts
@@ -5,7 +5,7 @@
  * Type definitions from the typed-mxgraph project
  */
 import MxGraphAbstractHierarchyCell from './GraphAbstractHierarchyCell';
-import mxObjectIdentity from '../../../../../util/mxObjectIdentity';
+import ObjectIdentity from '../../../../../util/ObjectIdentity';
 import CellArray from '../../../../cell/datatypes/CellArray';
 import Cell from '../../../../cell/datatypes/Cell';
 
@@ -26,9 +26,9 @@ class GraphHierarchyNode extends MxGraphAbstractHierarchyCell {
   constructor(cell) {
     super(cell);
     this.cell = cell;
-    this.id = mxObjectIdentity.get(cell);
-    this.connectsAsTarget: CellArray = [];
-    this.connectsAsSource: CellArray = [];
+    this.id = ObjectIdentity.get(cell);
+    this.connectsAsTarget = [];
+    this.connectsAsSource = [];
   }
 
   /**
diff --git a/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js b/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js
index 15f818b19..fdf01fd51 100644
--- a/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js
+++ b/packages/core/src/view/layout/layout/hierarchical/mxHierarchicalLayout.js
@@ -9,7 +9,7 @@ import { DIRECTION_NORTH } from '../../../../util/Constants';
 import HierarchicalEdgeStyle from './HierarchicalEdgeStyle';
 import Dictionary from '../../../../util/Dictionary';
 import GraphHierarchyModel from './model/GraphHierarchyModel';
-import mxObjectIdentity from '../../../../util/mxObjectIdentity';
+import ObjectIdentity from '../../../../util/ObjectIdentity';
 import MinimumCycleRemover from './stage/MinimumCycleRemover';
 import MedianHybridCrossingReduction from './stage/MedianHybridCrossingReduction';
 import CoordinateAssignment from './stage/CoordinateAssignment';
@@ -249,8 +249,7 @@ class mxHierarchicalLayout extends GraphLayout {
       const rootsCopy = [];
 
       for (let i = 0; i < roots.length; i += 1) {
-        const ancestor =
-          parent != null ? model.isAncestor(parent, roots[i]) : true;
+        const ancestor = parent != null ? model.isAncestor(parent, roots[i]) : true;
 
         if (ancestor && roots[i].isVertex()) {
           rootsCopy.push(roots[i]);
@@ -265,11 +264,7 @@ class mxHierarchicalLayout extends GraphLayout {
       this.run(parent);
 
       if (this.resizeParent && !parent.isCollapsed()) {
-        this.graph.updateGroupBounds(
-          [parent],
-          this.parentBorder,
-          this.moveParent
-        );
+        this.graph.updateGroupBounds([parent], this.parentBorder, this.moveParent);
       }
 
       // Maintaining parent location
@@ -574,7 +569,7 @@ class mxHierarchicalLayout extends GraphLayout {
     const { model } = this.graph;
 
     if (cell.isVertex() && cell !== this.parent && cell.isVisible()) {
-      result[mxObjectIdentity.get(cell)] = cell;
+      result[ObjectIdentity.get(cell)] = cell;
     }
 
     if (this.traverseAncestors || (cell === this.parent && cell.isVisible())) {
@@ -672,7 +667,7 @@ class mxHierarchicalLayout extends GraphLayout {
       // Has this vertex been seen before in any traversal
       // And if the filled vertex set is populated, only
       // process vertices in that it contains
-      const vertexID = mxObjectIdentity.get(vertex);
+      const vertexID = ObjectIdentity.get(vertex);
 
       if (
         allVertices[vertexID] == null &&
diff --git a/packages/core/src/view/ports/GraphPorts.ts b/packages/core/src/view/ports/GraphPorts.ts
index 6d49ac222..4d5175aa1 100644
--- a/packages/core/src/view/ports/GraphPorts.ts
+++ b/packages/core/src/view/ports/GraphPorts.ts
@@ -1,13 +1,6 @@
 import Cell from '../cell/datatypes/Cell';
-import Graph from '../Graph';
 
 class GraphPorts {
-  constructor(graph: Graph) {
-    this.graph = graph;
-  }
-
-  graph: Graph;
-
   /**
    * Specifies if ports are enabled. This is used in {@link cellConnected} to update
    * the respective style.
diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
index 3e9c2a737..60c62bb79 100644
--- a/packages/core/webpack.config.js
+++ b/packages/core/webpack.config.js
@@ -1,6 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
-const {merge} = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const base = require('../../webpack.config');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
@@ -8,20 +8,20 @@ module.exports = merge(base, {
   entry: './src/index.ts',
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'src')
-    }
+      '@': path.resolve(__dirname, 'src'),
+    },
   },
   output: {
     filename: 'mxgraph.js',
     path: path.resolve(__dirname, 'dist'),
     library: 'mxgraph',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
   },
   module: {
     rules: [
       {
         test: /\.(sa|sc|c)ss$/,
-        use: ['style-loader', 'css-loader']
+        use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
@@ -30,8 +30,8 @@ module.exports = merge(base, {
           name: 'images/[hash].[ext]',
           limit: 10000,
         },
-      }
-    ]
+      },
+    ],
   },
   plugins: [
     new webpack.optimize.LimitChunkCountPlugin({
@@ -49,6 +49,6 @@ module.exports = merge(base, {
       allowAsyncCycles: false,
       // set the current working directory for displaying module paths
       cwd: process.cwd(),
-    })
-  ]
-});
\ No newline at end of file
+    }),
+  ],
+});
diff --git a/packages/html/stories/Anchors.stories.js b/packages/html/stories/Anchors.stories.js
index 5e2954a81..1d8b3a800 100644
--- a/packages/html/stories/Anchors.stories.js
+++ b/packages/html/stories/Anchors.stories.js
@@ -8,22 +8,22 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxConnectionHandler, 
-    mxConnectionConstraint,
-    mxGeometry,
-    mxPolyline,
-    mxPoint,
-    mxCellState
+    Graph,
+    InternalEvent,
+    Rubberband,
+    ConnectionHandler,
+    ConnectionConstraint,
+    Geometry,
+    Polyline,
+    Point,
+    CellState,
   } = mxgraph;
 
   const container = document.createElement('div');
@@ -34,22 +34,17 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
-  class MyCustomConnectionHandler extends mxConnectionHandler {
+  class MyCustomConnectionHandler extends ConnectionHandler {
     // Enables connect preview for the default edge style
     createEdgeState(me) {
       const edge = graph.createEdge(null, null, null, null, null);
-      return new mxCellState(
-        this.graph.view,
-        edge,
-        this.graph.getCellStyle(edge)
-      );
+      return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
     }
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     getAllConnectionConstraints(terminal, source) {
       // Overridden to define per-shape connection points
       if (terminal != null && terminal.shape != null) {
@@ -69,38 +64,36 @@ const Template = ({ label, ...args }) => {
     }
   }
 
-  class MyCustomGeometryClass extends mxGeometry {
+  class MyCustomGeometryClass extends Geometry {
     // Defines the default constraints for the vertices
     constraints = [
-      new mxConnectionConstraint(new mxPoint(0.25, 0), true),
-      new mxConnectionConstraint(new mxPoint(0.5, 0), true),
-      new mxConnectionConstraint(new mxPoint(0.75, 0), true),
-      new mxConnectionConstraint(new mxPoint(0, 0.25), true),
-      new mxConnectionConstraint(new mxPoint(0, 0.5), true),
-      new mxConnectionConstraint(new mxPoint(0, 0.75), true),
-      new mxConnectionConstraint(new mxPoint(1, 0.25), true),
-      new mxConnectionConstraint(new mxPoint(1, 0.5), true),
-      new mxConnectionConstraint(new mxPoint(1, 0.75), true),
-      new mxConnectionConstraint(new mxPoint(0.25, 1), true),
-      new mxConnectionConstraint(new mxPoint(0.5, 1), true),
-      new mxConnectionConstraint(new mxPoint(0.75, 1), true),
+      new ConnectionConstraint(new Point(0.25, 0), true),
+      new ConnectionConstraint(new Point(0.5, 0), true),
+      new ConnectionConstraint(new Point(0.75, 0), true),
+      new ConnectionConstraint(new Point(0, 0.25), true),
+      new ConnectionConstraint(new Point(0, 0.5), true),
+      new ConnectionConstraint(new Point(0, 0.75), true),
+      new ConnectionConstraint(new Point(1, 0.25), true),
+      new ConnectionConstraint(new Point(1, 0.5), true),
+      new ConnectionConstraint(new Point(1, 0.75), true),
+      new ConnectionConstraint(new Point(0.25, 1), true),
+      new ConnectionConstraint(new Point(0.5, 1), true),
+      new ConnectionConstraint(new Point(0.75, 1), true),
     ];
   }
 
   // Edges have no connection points
-  mxPolyline.prototype.constraints = null;
+  Polyline.prototype.constraints = null;
 
   // Creates the graph inside the given container
   const graph = new MyCustomGraph(container);
   graph.setConnectable(true);
 
   // Specifies the default edge style
-  graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
-    'orthogonalEdgeStyle';
+  graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle';
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -131,6 +124,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Animation.stories.js b/packages/html/stories/Animation.stories.js
index 1bbd44769..e2f6ca668 100644
--- a/packages/html/stories/Animation.stories.js
+++ b/packages/html/stories/Animation.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -7,15 +7,12 @@ import './css/animation.css';
 export default {
   title: 'Effects/Animation',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxPoint
-  } = mxgraph;
+  const { Graph, Point } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -25,7 +22,7 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setEnabled(false);
   const parent = graph.getDefaultParent();
 
@@ -67,26 +64,18 @@ const Template = ({ label, ...args }) => {
       style:
         'strokeWidth=3;endArrow=block;endSize=2;endFill=1;strokeColor=black;rounded=1;',
     });
-    e1.geometry.points = [new mxPoint(230, 50)];
+    e1.geometry.points = [new Point(230, 50)];
     graph.orderCells(true, [e1]);
   });
 
   // Adds animation to edge shape and makes "pipe" visible
   const state = graph.view.getState(e1);
-  state.shape.node
-    .getElementsByTagName('path')[0]
-    .removeAttribute('visibility');
-  state.shape.node
-    .getElementsByTagName('path')[0]
-    .setAttribute('stroke-width', '6');
-  state.shape.node
-    .getElementsByTagName('path')[0]
-    .setAttribute('stroke', 'lightGray');
-  state.shape.node
-    .getElementsByTagName('path')[1]
-    .setAttribute('class', 'flow');
+  state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility');
+  state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6');
+  state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray');
+  state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/AutoLayout.stories.js b/packages/html/stories/AutoLayout.stories.js
index 9bdec9ca9..615ee2be0 100644
--- a/packages/html/stories/AutoLayout.stories.js
+++ b/packages/html/stories/AutoLayout.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,32 +8,32 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxRubberband,
-    mxEvent,
-    mxUtils,
-    mxCellRenderer,
-    mxEdgeHandler,
+    Graph,
+    Rubberband,
+    InternalEvent,
+    utils,
+    CellRenderer,
+    EdgeHandler,
     mxHierarchicalLayout,
-    mxConstants,
-    mxCellOverlay,
-    mxImage,
+    Constants,
+    CellOverlay,
+    ImageBox,
     mxClient,
     mxMorphing,
-    mxEventObject,
-    mxEventUtils
-  } = mxgraph;
+    EventObject,
+    EventUtils,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -43,41 +43,36 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
-  class MyCustomCellRenderer extends mxCellRenderer {
+  class MyCustomCellRenderer extends CellRenderer {
     installCellOverlayListeners(state, overlay, shape) {
       super.installCellOverlayListeners(state, overlay, shape);
 
-      mxEvent.addListener(
+      InternalEvent.addListener(
         shape.node,
         mxClient.IS_POINTER ? 'pointerdown' : 'mousedown',
-        evt => {
-          overlay.fireEvent(
-            new mxEventObject('pointerdown', 'event', evt, 'state', state)
-          );
+        (evt) => {
+          overlay.fireEvent(new EventObject('pointerdown', 'event', evt, 'state', state));
         }
       );
 
       if (!mxClient.IS_POINTER && mxClient.IS_TOUCH) {
-        mxEvent.addListener(shape.node, 'touchstart', evt => {
-          overlay.fireEvent(
-            new mxEventObject('pointerdown', 'event', evt, 'state', state)
-          );
+        InternalEvent.addListener(shape.node, 'touchstart', (evt) => {
+          overlay.fireEvent(new EventObject('pointerdown', 'event', evt, 'state', state));
         });
       }
     }
   }
 
-  class MyCustomEdgeHandler extends mxEdgeHandler {
+  class MyCustomEdgeHandler extends EdgeHandler {
     connect(edge, terminal, isSource, isClone, me) {
       super.connect(edge, terminal, isSource, isClone, me);
       executeLayout();
     }
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     createEdgeHandler(state, edgeStyle) {
       return new MyCustomEdgeHandler(state, edgeStyle);
     }
@@ -96,14 +91,13 @@ const Template = ({ label, ...args }) => {
   graph.view.setTranslate(20, 20);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
   const parent = graph.getDefaultParent();
 
-  const layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
+  const layout = new mxHierarchicalLayout(graph, Constants.DIRECTION_WEST);
 
   let v1;
   const executeLayout = (change, post) => {
@@ -118,7 +112,7 @@ const Template = ({ label, ...args }) => {
     } finally {
       // New API for animating graph layout results asynchronously
       const morph = new mxMorphing(graph);
-      morph.addListener(mxEvent.DONE, () => {
+      morph.addListener(InternalEvent.DONE, () => {
         graph.getModel().endUpdate();
         if (post != null) {
           post();
@@ -128,16 +122,16 @@ const Template = ({ label, ...args }) => {
     }
   };
 
-  const addOverlay = cell => {
+  const addOverlay = (cell) => {
     // Creates a new overlay with an image and a tooltip
-    const overlay = new mxCellOverlay(
-      new mxImage('images/add.png', 24, 24),
+    const overlay = new CellOverlay(
+      new ImageBox('images/add.png', 24, 24),
       'Add outgoing'
     );
     overlay.cursor = 'hand';
 
     // Installs a handler for clicks on the overlay
-    overlay.addListener(mxEvent.CLICK, (sender, evt2) => {
+    overlay.addListener(InternalEvent.CLICK, (sender, evt2) => {
       graph.clearSelection();
       const geo = graph.getCellGeometry(cell);
 
@@ -173,15 +167,15 @@ const Template = ({ label, ...args }) => {
       graph.popupMenuHandler.hideMenu();
       graph.stopEditing(false);
 
-      const pt = mxUtils.convertPoint(
+      const pt = utils.convertPoint(
         graph.container,
-        mxEventUtils.getClientX(evt2),
-        mxEventUtils.getClientY(evt2)
+        EventUtils.getClientX(evt2),
+        EventUtils.getClientY(evt2)
       );
       graph.connectionHandler.start(state, pt.x, pt.y);
       graph.isMouseDown = true;
-      graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt2);
-      mxEvent.consume(evt2);
+      graph.isMouseTrigger = EventUtils.isMouseEvent(evt2);
+      InternalEvent.consume(evt2);
     });
 
     // Sets the overlay for the cell in the graph
@@ -199,16 +193,16 @@ const Template = ({ label, ...args }) => {
     addOverlay(v1);
   });
 
-  graph.resizeCell = function() {
-    mxGraph.prototype.resizeCell.apply(this, arguments);
+  graph.resizeCell = function () {
+    Graph.prototype.resizeCell.apply(this, arguments);
     executeLayout();
   };
 
-  graph.connectionHandler.addListener(mxEvent.CONNECT, function() {
+  graph.connectionHandler.addListener(InternalEvent.CONNECT, function () {
     executeLayout();
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Boundary.stories.js b/packages/html/stories/Boundary.stories.js
index 2cbbd9097..ac5e6f08c 100644
--- a/packages/html/stories/Boundary.stories.js
+++ b/packages/html/stories/Boundary.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,24 +8,17 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxPoint,
-    mxGraphHandler,
-    mxUtils
-  } = mxgraph;
+  const { Graph, InternalEvent, Rubberband, Point, GraphHandler, utils } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -36,10 +29,9 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Disables the built-in context menu
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     // Enables moving of relative children
     isCellLocked(cell) {
       return false;
@@ -94,7 +86,7 @@ const Template = ({ label, ...args }) => {
                 y = y > 0.5 ? 1 : 0;
               }
 
-              return new mxPoint(x, y);
+              return new Point(x, y);
             }
           }
         }
@@ -122,7 +114,7 @@ const Template = ({ label, ...args }) => {
           this.model.setGeometry(cell, geo);
         }
       } else {
-        mxGraph.prototype.translateCell.apply(this, arguments);
+        Graph.prototype.translateCell.apply(this, arguments);
       }
     }
   }
@@ -142,29 +134,19 @@ const Template = ({ label, ...args }) => {
   graph.getStylesheet().putDefaultVertexStyle(style);
 
   // Replaces move preview for relative children
-  graph.graphHandler.getDelta = function(me) {
-    const point = mxUtils.convertPoint(
-      this.graph.container,
-      me.getX(),
-      me.getY()
-    );
-    let delta = new mxPoint(point.x - this.first.x, point.y - this.first.y);
+  graph.graphHandler.getDelta = function (me) {
+    const point = utils.convertPoint(this.graph.container, me.getX(), me.getY());
+    let delta = new Point(point.x - this.first.x, point.y - this.first.y);
 
-    if (
-      this.cells != null &&
-      this.cells.length > 0 &&
-      this.cells[0] != null
-    ) {
+    if (this.cells != null && this.cells.length > 0 && this.cells[0] != null) {
       const state = this.graph.view.getState(this.cells[0]);
       const rel = graph.getRelativePosition(state, delta.x, delta.y);
 
       if (rel != null) {
-        const pstate = this.graph.view.getState(
-          state.cell.getParent()
-        );
+        const pstate = this.graph.view.getState(state.cell.getParent());
 
         if (pstate != null) {
-          delta = new mxPoint(
+          delta = new Point(
             pstate.x + pstate.width * rel.x - state.getCenterX(),
             pstate.y + pstate.height * rel.y - state.getCenterY()
           );
@@ -176,24 +158,16 @@ const Template = ({ label, ...args }) => {
   };
 
   // Relative children cannot be removed from parent
-  graph.graphHandler.shouldRemoveCellsFromParent = function(
-    parent,
-    cells,
-    evt
-  ) {
+  graph.graphHandler.shouldRemoveCellsFromParent = function (parent, cells, evt) {
     return (
       cells.length === 0 &&
       !cells[0].geometry.relative &&
-      mxGraphHandler.prototype.shouldRemoveCellsFromParent.apply(
-        this,
-        arguments
-      )
+      GraphHandler.prototype.shouldRemoveCellsFromParent.apply(this, arguments)
     );
   };
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -215,7 +189,7 @@ const Template = ({ label, ...args }) => {
       size: [20, 20],
       style: 'fontSize=9;shape=ellipse;resizable=0;',
     });
-    v2.geometry.offset = new mxPoint(-10, -10);
+    v2.geometry.offset = new Point(-10, -10);
     v2.geometry.relative = true;
 
     const v3 = graph.insertVertex({
@@ -225,11 +199,11 @@ const Template = ({ label, ...args }) => {
       size: [20, 20],
       style: 'fontSize=9;shape=ellipse;resizable=0;',
     });
-    v3.geometry.offset = new mxPoint(-10, -10);
+    v3.geometry.offset = new Point(-10, -10);
     v3.geometry.relative = true;
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Clipboard.stories.js b/packages/html/stories/Clipboard.stories.js
index a1a4792b0..0f5591d47 100644
--- a/packages/html/stories/Clipboard.stories.js
+++ b/packages/html/stories/Clipboard.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,28 +8,28 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband,
+    Graph,
+    InternalEvent,
+    Rubberband,
     mxClipboard,
-    mxUtils,
-    mxEventUtils,
+    utils,
+    EventUtils,
     mxClient,
     mxCodec,
-    mxGraphModel,
-    mxStringUtils
-  } = mxgraph;
+    GraphModel,
+    mxStringUtils,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -40,28 +40,27 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Disables the built-in context menu
-  if (!args.contextMenu)
-  mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Creates the graph inside the given this.el
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Public helper method for shared clipboard.
-  mxClipboard.cellsToString = function(cells) {
+  mxClipboard.cellsToString = function (cells) {
     const codec = new mxCodec();
-    const model = new mxGraphModel();
+    const model = new GraphModel();
     const parent = model.getRoot().getChildAt(0);
 
     for (let i = 0; i < cells.length; i++) {
       model.add(parent, cells[i]);
     }
 
-    return mxUtils.getXml(codec.encode(model));
+    return utils.getXml(codec.encode(model));
   };
 
   // Focused but invisible textarea during control or meta key events
   const textInput = document.createElement('textarea');
-  mxUtils.setOpacity(textInput, 0);
+  utils.setOpacity(textInput, 0);
   textInput.style.width = '1px';
   textInput.style.height = '1px';
   let restoreFocus = false;
@@ -74,9 +73,9 @@ const Template = ({ label, ...args }) => {
   textInput.value = ' ';
 
   // Shows a textare when control/cmd is pressed to handle native clipboard actions
-  mxEvent.addListener(document, 'keydown', function(evt) {
+  InternalEvent.addListener(document, 'keydown', function (evt) {
     // No dialog visible
-    const source = mxEventUtils.getSource(evt);
+    const source = EventUtils.getSource(evt);
 
     if (
       graph.isEnabled() &&
@@ -107,11 +106,11 @@ const Template = ({ label, ...args }) => {
   });
 
   // Restores focus on graph this.el and removes text input from DOM
-  mxEvent.addListener(document, 'keyup', function(evt) {
+  InternalEvent.addListener(document, 'keyup', function (evt) {
     if (
       restoreFocus &&
       (evt.keyCode === 224 /* FF */ ||
-      evt.keyCode === 17 /* Control */ ||
+        evt.keyCode === 17 /* Control */ ||
         evt.keyCode === 91 ||
         evt.keyCode === 93) /* Meta */
     ) {
@@ -126,7 +125,7 @@ const Template = ({ label, ...args }) => {
   });
 
   // Inserts the XML for the given cells into the text input for copy
-  const copyCells = function(graph, cells) {
+  const copyCells = function (graph, cells) {
     if (cells.length > 0) {
       const clones = graph.cloneCells(cells);
 
@@ -153,48 +152,38 @@ const Template = ({ label, ...args }) => {
   };
 
   // Handles copy event by putting XML for current selection into text input
-  mxEvent.addListener(
-    textInput,
-    'copy',
-    (evt) => {
-      if (graph.isEnabled() && !graph.isSelectionEmpty()) {
-        copyCells(
-          graph,
-          mxUtils.sortCells(
-            graph.model.getTopmostCells(graph.getSelectionCells())
-          )
-        );
-        dx = 0;
-        dy = 0;
-      }
+  InternalEvent.addListener(textInput, 'copy', (evt) => {
+    if (graph.isEnabled() && !graph.isSelectionEmpty()) {
+      copyCells(
+        graph,
+        utils.sortCells(graph.model.getTopmostCells(graph.getSelectionCells()))
+      );
+      dx = 0;
+      dy = 0;
     }
-  );
+  });
 
   // Handles cut event by removing cells putting XML into text input
-  mxEvent.addListener(
-    textInput,
-    'cut',
-    (evt) => {
-      if (graph.isEnabled() && !graph.isSelectionEmpty()) {
-        copyCells(graph, graph.removeCells());
-        dx = -gs;
-        dy = -gs;
-      }
+  InternalEvent.addListener(textInput, 'cut', (evt) => {
+    if (graph.isEnabled() && !graph.isSelectionEmpty()) {
+      copyCells(graph, graph.removeCells());
+      dx = -gs;
+      dy = -gs;
     }
-  );
+  });
 
   // Merges XML into existing graph and layers
-  const importXml = function(xml, dx, dy) {
+  const importXml = function (xml, dx, dy) {
     dx = dx != null ? dx : 0;
     dy = dy != null ? dy : 0;
     let cells = [];
 
     try {
-      const doc = mxUtils.parseXml(xml);
+      const doc = utils.parseXml(xml);
       const node = doc.documentElement;
 
       if (node != null) {
-        const model = new mxGraphModel();
+        const model = new GraphModel();
         const codec = new mxCodec(node.ownerDocument);
         codec.decode(node, model);
 
@@ -217,18 +206,11 @@ const Template = ({ label, ...args }) => {
 
               if (!graph.isCellLocked(target)) {
                 const children = parent.getChildren();
-                cells = cells.concat(
-                  graph.importCells(children, dx, dy, target)
-                );
+                cells = cells.concat(graph.importCells(children, dx, dy, target));
               }
             } else {
               // Delta is non cascading, needs separate move for layers
-              parent = graph.importCells(
-                [parent],
-                0,
-                0,
-                graph.model.getRoot()
-              )[0];
+              parent = graph.importCells([parent], 0, 0, graph.model.getRoot())[0];
               const children = parent.getChildren();
               graph.moveCells(children, dx, dy);
               cells = cells.concat(children);
@@ -247,12 +229,10 @@ const Template = ({ label, ...args }) => {
   };
 
   // Parses and inserts XML into graph
-  const pasteText = function(text) {
+  const pasteText = function (text) {
     const xml = mxStringUtils.trim(text);
-    const x =
-      graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
-    const y =
-      graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
+    const x = graph.container.scrollLeft / graph.view.scale - graph.view.translate.x;
+    const y = graph.container.scrollTop / graph.view.scale - graph.view.translate.y;
 
     if (xml.length > 0) {
       if (lastPaste !== xml) {
@@ -273,23 +253,17 @@ const Template = ({ label, ...args }) => {
   };
 
   // Function to fetch text from paste events
-  const extractGraphModelFromEvent = function(evt) {
+  const extractGraphModelFromEvent = function (evt) {
     let data = null;
 
     if (evt != null) {
-      const provider =
-        evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;
+      const provider = evt.dataTransfer != null ? evt.dataTransfer : evt.clipboardData;
 
       if (provider != null) {
         data =
-          provider.types.indexOf('text/html') >= 0
-            ? provider.getData('text/html')
-            : null;
+          provider.types.indexOf('text/html') >= 0 ? provider.getData('text/html') : null;
 
-        if (
-          provider.types.indexOf('text/plain')
-          && (data == null || data.length === 0)
-        ) {
+        if (provider.types.indexOf('text/plain') && (data == null || data.length === 0)) {
           data = provider.getData('text/plain');
         }
       }
@@ -299,7 +273,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Handles paste event by parsing and inserting XML
-  mxEvent.addListener(textInput, 'paste', function(evt) {
+  InternalEvent.addListener(textInput, 'paste', function (evt) {
     // Clears existing contents before paste - should not be needed
     // because all text is selected, but doesn't hurt since the
     // actual pasting of the new text is delayed in all cases.
@@ -312,12 +286,9 @@ const Template = ({ label, ...args }) => {
         pasteText(xml);
       } else {
         // Timeout for new value to appear
-        window.setTimeout(
-          () => {
-            pasteText(textInput.value);
-          },
-          0
-        );
+        window.setTimeout(() => {
+          pasteText(textInput.value);
+        }, 0);
       }
     }
 
@@ -325,8 +296,7 @@ const Template = ({ label, ...args }) => {
   });
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -350,6 +320,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Collapse.stories.js b/packages/html/stories/Collapse.stories.js
index c26885f37..02ec2d3d6 100644
--- a/packages/html/stories/Collapse.stories.js
+++ b/packages/html/stories/Collapse.stories.js
@@ -1,19 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Layouts/Collapse',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxRectangle
-  } = mxgraph;
+  const { Graph, Rectangle } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -23,10 +20,10 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   const parent = graph.getDefaultParent();
 
-  const getStyle = function() {
+  const getStyle = function () {
     // Extends Transactions.getStyle to show an image when collapsed
     // TODO cannot use super without a parent class
     // let style = super.getStyle();
@@ -37,7 +34,7 @@ const Template = ({ label, ...args }) => {
         `noLabel=1;imageBackground=#C3D9FF;imageBorder=#6482B9`;
     }
     return style;
-  }
+  };
 
   graph.batchUpdate(() => {
     const v1 = graph.insertVertex({
@@ -47,7 +44,7 @@ const Template = ({ label, ...args }) => {
       size: [200, 200],
       style: 'shape=swimlane;startSize=20;',
     });
-    v1.geometry.alternateBounds = new mxRectangle(0, 0, 110, 70);
+    v1.geometry.alternateBounds = new Rectangle(0, 0, 110, 70);
     v1.getStyle = getStyle;
 
     const v11 = graph.insertVertex({
@@ -60,6 +57,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Constituent.stories.js b/packages/html/stories/Constituent.stories.js
index f753b9dc4..c506ad8e7 100644
--- a/packages/html/stories/Constituent.stories.js
+++ b/packages/html/stories/Constituent.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,22 +8,17 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxEvent,
-    mxGraphHandler,
-    mxRubberband
-  } = mxgraph;
+  const { Graph, InternalEvent, GraphHandler, Rubberband } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -34,9 +29,9 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Disables the built-in context menu
-  mxEvent.disableContextMenu(container);
+  InternalEvent.disableContextMenu(container);
 
-  class MyCustomGraphHandler extends mxGraphHandler {
+  class MyCustomGraphHandler extends GraphHandler {
     /**
      * Redirects start drag to parent.
      */
@@ -49,7 +44,7 @@ const Template = ({ label, ...args }) => {
     }
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     foldingEnabled = false;
 
     recursiveResize = true;
@@ -76,7 +71,7 @@ const Template = ({ label, ...args }) => {
   const graph = new MyCustomGraph(container);
 
   // Enables rubberband selection
-  new mxRubberband(graph);
+  new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -99,6 +94,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/ContextIcons.stories.js b/packages/html/stories/ContextIcons.stories.js
index c42274bcf..0469cde0a 100644
--- a/packages/html/stories/ContextIcons.stories.js
+++ b/packages/html/stories/ContextIcons.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,20 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxEventUtils,
-    mxUtils,
-    mxVertexHandler
-  } = mxgraph;
+  const { Graph, InternalEvent, Rubberband, EventUtils, utils, VertexHandler } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -31,8 +24,8 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  class mxVertexToolHandler extends mxVertexHandler {
-    // Defines a subclass for mxVertexHandler that adds a set of clickable
+  class mxVertexToolHandler extends VertexHandler {
+    // Defines a subclass for VertexHandler that adds a set of clickable
     // icons to every selected vertex.
 
     domNode = null;
@@ -49,8 +42,8 @@ const Template = ({ label, ...args }) => {
       this.domNode.style.whiteSpace = 'nowrap';
 
       // Workaround for event redirection via image tag in quirks and IE8
-      const createImage = src => {
-        return mxUtils.createImage(src);
+      const createImage = (src) => {
+        return utils.createImage(src);
       };
 
       // Delete
@@ -59,13 +52,13 @@ const Template = ({ label, ...args }) => {
       img.style.cursor = 'pointer';
       img.style.width = '16px';
       img.style.height = '16px';
-      mxEvent.addGestureListeners(img, evt => {
+      InternalEvent.addGestureListeners(img, (evt) => {
         // Disables dragging the image
-        mxEvent.consume(evt);
+        InternalEvent.consume(evt);
       });
-      mxEvent.addListener(img, 'click', evt => {
+      InternalEvent.addListener(img, 'click', (evt) => {
         this.graph.removeCells([this.state.cell]);
-        mxEvent.consume(evt);
+        InternalEvent.consume(evt);
       });
       this.domNode.appendChild(img);
 
@@ -76,11 +69,11 @@ const Template = ({ label, ...args }) => {
       img.style.width = '16px';
       img.style.height = '16px';
 
-      mxEvent.addGestureListeners(img, evt => {
-        this.start(mxEventUtils.getClientX(evt), mxEventUtils.getClientY(evt), 7);
+      InternalEvent.addGestureListeners(img, (evt) => {
+        this.start(EventUtils.getClientX(evt), EventUtils.getClientY(evt), 7);
         this.graph.isMouseDown = true;
-        this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt);
-        mxEvent.consume(evt);
+        this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
+        InternalEvent.consume(evt);
       });
       this.domNode.appendChild(img);
 
@@ -91,16 +84,16 @@ const Template = ({ label, ...args }) => {
       img.style.width = '16px';
       img.style.height = '16px';
 
-      mxEvent.addGestureListeners(img, evt => {
+      InternalEvent.addGestureListeners(img, (evt) => {
         this.graph.graphHandler.start(
           this.state.cell,
-          mxEventUtils.getClientX(evt),
-          mxEventUtils.getClientY(evt)
+          EventUtils.getClientX(evt),
+          EventUtils.getClientY(evt)
         );
         this.graph.graphHandler.cellWasClicked = true;
         this.graph.isMouseDown = true;
-        this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt);
-        mxEvent.consume(evt);
+        this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
+        InternalEvent.consume(evt);
       });
       this.domNode.appendChild(img);
 
@@ -111,16 +104,16 @@ const Template = ({ label, ...args }) => {
       img.style.width = '16px';
       img.style.height = '16px';
 
-      mxEvent.addGestureListeners(img, evt => {
-        const pt = mxUtils.convertPoint(
+      InternalEvent.addGestureListeners(img, (evt) => {
+        const pt = utils.convertPoint(
           this.graph.container,
-          mxEventUtils.getClientX(evt),
-          mxEventUtils.getClientY(evt)
+          EventUtils.getClientX(evt),
+          EventUtils.getClientY(evt)
         );
         this.graph.connectionHandler.start(this.state, pt.x, pt.y);
         this.graph.isMouseDown = true;
-        this.graph.isMouseTrigger = mxEventUtils.isMouseEvent(evt);
-        mxEvent.consume(evt);
+        this.graph.isMouseTrigger = EventUtils.isMouseEvent(evt);
+        InternalEvent.consume(evt);
       });
       this.domNode.appendChild(img);
 
@@ -151,7 +144,7 @@ const Template = ({ label, ...args }) => {
     }
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     createHandler(state) {
       if (state != null && state.cell.isVertex()) {
         return new mxVertexToolHandler(state);
@@ -170,8 +163,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -199,6 +191,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Control.stories.js b/packages/html/stories/Control.stories.js
index 0d98bcc6d..68522d00b 100644
--- a/packages/html/stories/Control.stories.js
+++ b/packages/html/stories/Control.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,22 +8,22 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxDomHelpers, 
-    mxImageShape,
-    mxRectangle,
-    mxCellRenderer,
-    mxImage
-  } = mxgraph;
+    Graph,
+    InternalEvent,
+    Rubberband,
+    mxDomHelpers,
+    ImageShape,
+    Rectangle,
+    CellRenderer,
+    ImageBox,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -37,13 +37,9 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Specifies the URL and size of the new control
-  const deleteImage = new mxImage(
-    '/images/forbidden.png',
-    16,
-    16
-  );
+  const deleteImage = new ImageBox('/images/forbidden.png', 16, 16);
 
-  class MyCustomCellRenderer extends mxCellRenderer {
+  class MyCustomCellRenderer extends CellRenderer {
     createControl(state) {
       super.createControl(state);
 
@@ -51,20 +47,15 @@ const Template = ({ label, ...args }) => {
 
       if (state.cell.isVertex()) {
         if (state.deleteControl == null) {
-          const b = new mxRectangle(
-            0,
-            0,
-            deleteImage.width,
-            deleteImage.height
-          );
-          state.deleteControl = new mxImageShape(b, deleteImage.src);
+          const b = new Rectangle(0, 0, deleteImage.width, deleteImage.height);
+          state.deleteControl = new ImageShape(b, deleteImage.src);
           state.deleteControl.dialect = graph.dialect;
           state.deleteControl.preserveImageAspect = false;
 
-          this.initControl(state, state.deleteControl, false, function(evt) {
+          this.initControl(state, state.deleteControl, false, function (evt) {
             if (graph.isEnabled()) {
               graph.removeCells([state.cell]);
-              mxEvent.consume(evt);
+              InternalEvent.consume(evt);
             }
           });
         }
@@ -83,18 +74,13 @@ const Template = ({ label, ...args }) => {
         const s = state.view.scale;
 
         return state.cell.isEdge()
-          ? new mxRectangle(
+          ? new Rectangle(
               state.x + state.width / 2 - (w / 2) * s,
               state.y + state.height / 2 - (h / 2) * s,
               w * s,
               h * s
             )
-          : new mxRectangle(
-              state.x + state.width - w * s,
-              state.y,
-              w * s,
-              h * s
-            );
+          : new Rectangle(state.x + state.width - w * s, state.y, w * s, h * s);
       }
       return null;
     }
@@ -129,7 +115,7 @@ const Template = ({ label, ...args }) => {
     }
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     createCellRenderer() {
       return new MyCustomCellRenderer();
     }
@@ -144,8 +130,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -194,6 +179,6 @@ const Template = ({ label, ...args }) => {
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/DragSource.stories.js b/packages/html/stories/DragSource.stories.js
index 366569425..12005e6d0 100644
--- a/packages/html/stories/DragSource.stories.js
+++ b/packages/html/stories/DragSource.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,26 +8,26 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxDomUtils, 
-    mxRubberband,
-    mxDragSource,
-    mxUtils,
-    mxGestureUtils,
-    mxEdgeHandler,
-    mxGraphHandler,
-    mxGuide,
-    mxEventUtils,
-    mxCell,
-    mxGeometry
-  } = mxgraph;
+    Graph,
+    mxDomUtils,
+    Rubberband,
+    DragSource,
+    utils,
+    GestureUtils,
+    EdgeHandler,
+    GraphHandler,
+    Guide,
+    EventUtils,
+    Cell,
+    Geometry,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -36,14 +36,14 @@ const Template = ({ label, ...args }) => {
   container.style.height = `${args.height}px`;
   container.style.cursor = 'default';
 
-  class MyCustomGuide extends mxGuide {
+  class MyCustomGuide extends Guide {
     isEnabledForEvent(evt) {
       // Alt disables guides
-      return !mxEventUtils.isAltDown(evt);
+      return !EventUtils.isAltDown(evt);
     }
   }
 
-  class MyCustomGraphHandler extends mxGraphHandler {
+  class MyCustomGraphHandler extends GraphHandler {
     // Enables guides
     guidesEnabled = true;
 
@@ -52,12 +52,12 @@ const Template = ({ label, ...args }) => {
     }
   }
 
-  class MyCustomEdgeHandler extends mxEdgeHandler {
+  class MyCustomEdgeHandler extends EdgeHandler {
     // Enables snapping waypoints to terminals
     snapToTerminals = true;
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     createGraphHandler() {
       return new MyCustomGraphHandler(this);
     }
@@ -89,8 +89,7 @@ const Template = ({ label, ...args }) => {
     // graph.setResizeContainer(true);
 
     // Enables rubberband selection
-    if (args.rubberBand)
-      new mxRubberband(graph);
+    if (args.rubberBand) new Rubberband(graph);
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
@@ -121,9 +120,9 @@ const Template = ({ label, ...args }) => {
   }
 
   // Returns the graph under the mouse
-  const graphF = evt => {
-    const x = mxEventUtils.getClientX(evt);
-    const y = mxEventUtils.getClientY(evt);
+  const graphF = (evt) => {
+    const x = EventUtils.getClientX(evt);
+    const y = EventUtils.getClientY(evt);
     const elt = document.elementFromPoint(x, y);
 
     for (const graph of graphs) {
@@ -137,7 +136,7 @@ const Template = ({ label, ...args }) => {
 
   // Inserts a cell at the given location
   const funct = (graph, evt, target, x, y) => {
-    const cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
+    const cell = new Cell('Test', new Geometry(0, 0, 120, 40));
     cell.vertex = true;
     const cells = graph.importCells([cell], x, y, target);
 
@@ -148,7 +147,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Creates a DOM node that acts as the drag source
-  const img = mxUtils.createImage('images/icons48/gear.png');
+  const img = utils.createImage('images/icons48/gear.png');
   img.style.width = '48px';
   img.style.height = '48px';
   container.appendChild(img);
@@ -163,7 +162,7 @@ const Template = ({ label, ...args }) => {
   // if scalePreview (last) argument is true. Dx and dy are null to force
   // the use of the defaults. Note that dx and dy are only used for the
   // drag icon but not for the preview.
-  const ds = mxGestureUtils.makeDraggable(
+  const ds = GestureUtils.makeDraggable(
     img,
     graphF,
     funct,
@@ -181,9 +180,9 @@ const Template = ({ label, ...args }) => {
   };
 
   // Restores original drag icon while outside of graph
-  ds.createDragElement = mxDragSource.prototype.createDragElement;
+  ds.createDragElement = DragSource.prototype.createDragElement;
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Drop.stories.js b/packages/html/stories/Drop.stories.js
index b0ff48022..c62602450 100644
--- a/packages/html/stories/Drop.stories.js
+++ b/packages/html/stories/Drop.stories.js
@@ -1,7 +1,7 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
-import { getXml, parseXml } from '@mxgraph/core/src/util/XmlUtils';
+import { getXml, parseXml } from '@maxgraph/core/util/XmlUtils';
 
 export default {
   title: 'DnD_CopyPaste/Drop',
@@ -9,24 +9,17 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxRubberband,
-    mxUtils,
-    mxEventUtils,
-    mxEvent,
-    mxClient
-  } = mxgraph;
+  const { Graph, Rubberband, utils, EventUtils, InternalEvent, mxClient } = maxgraph;
 
   const div = document.createElement('div');
   div.innerHTML = 'Drag & drop your images below:<br>';
@@ -42,42 +35,38 @@ const Template = ({ label, ...args }) => {
 
   // Checks if the browser is supported
   const fileSupport =
-    window.File != null &&
-    window.FileReader != null &&
-    window.FileList != null;
+    window.File != null && window.FileReader != null && window.FileList != null;
 
   if (!fileSupport || !mxClient.isBrowserSupported()) {
     // Displays an error message if the browser is not supported.
-    mxUtils.error('Browser is not supported!', 200, false);
+    utils.error('Browser is not supported!', 200, false);
   } else {
     // Disables the built-in context menu
-    if (!args.contextMenu)
-      mxEvent.disableContextMenu(container);
+    if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
     // Creates the graph inside the given this.el
-    const graph = new mxGraph(container);
+    const graph = new Graph(container);
 
     // Enables rubberband selection
-    if (args.rubberBand)
-      new mxRubberband(graph);
+    if (args.rubberBand) new Rubberband(graph);
 
-    mxEvent.addListener(container, 'dragover', function(evt) {
+    InternalEvent.addListener(container, 'dragover', function (evt) {
       if (graph.isEnabled()) {
         evt.stopPropagation();
         evt.preventDefault();
       }
     });
 
-    mxEvent.addListener(container, 'drop', evt => {
+    InternalEvent.addListener(container, 'drop', (evt) => {
       if (graph.isEnabled()) {
         evt.stopPropagation();
         evt.preventDefault();
 
         // Gets drop location point for vertex
-        const pt = mxUtils.convertPoint(
+        const pt = utils.convertPoint(
           graph.container,
-          mxEventUtils.getClientX(evt),
-          mxEventUtils.getClientY(evt)
+          EventUtils.getClientX(evt),
+          EventUtils.getClientY(evt)
         );
         const tr = graph.view.translate;
         const { scale } = graph.view;
@@ -95,7 +84,7 @@ const Template = ({ label, ...args }) => {
   }
 
   return div;
-}
+};
 
 function handleDrop(graph, file, x, y) {
   // Handles each file as a separate insert for simplicity.
@@ -104,7 +93,7 @@ function handleDrop(graph, file, x, y) {
   if (file.type.substring(0, 5) === 'image') {
     const reader = new FileReader();
 
-    reader.onload = function(e) {
+    reader.onload = function (e) {
       // Gets size of image for vertex
       let data = e.target.result;
 
@@ -144,9 +133,7 @@ function handleDrop(graph, file, x, y) {
             w = Math.max(1, Math.round(w));
             h = Math.max(1, Math.round(h));
 
-            data = `data:image/svg+xml,${btoa(
-              getXml(svgs[0], '\n')
-            )}`;
+            data = `data:image/svg+xml,${btoa(getXml(svgs[0], '\n'))}`;
             graph.insertVertex({
               position: [x, y],
               size: [w, h],
@@ -165,9 +152,7 @@ function handleDrop(graph, file, x, y) {
           const semi = data.indexOf(';');
 
           if (semi > 0) {
-            data =
-              data.substring(0, semi) +
-              data.substring(data.indexOf(',', semi + 1));
+            data = data.substring(0, semi) + data.substring(data.indexOf(',', semi + 1));
           }
 
           graph.insertVertex({
@@ -185,4 +170,4 @@ function handleDrop(graph, file, x, y) {
   }
 }
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/DynamicLoading.stories.js b/packages/html/stories/DynamicLoading.stories.js
index 79c743a19..0f3ca8a43 100644
--- a/packages/html/stories/DynamicLoading.stories.js
+++ b/packages/html/stories/DynamicLoading.stories.js
@@ -1,26 +1,26 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Misc/DynamicLoading',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxText,
+    Graph,
+    Text,
     mxEffects,
-    mxEvent,
-    mxConstants,
-    mxPerimeter,
+    InternalEvent,
+    Constants,
+    Perimeter,
     mxCodec,
-    mxUtils,
-    mxXmlUtils
-  } = mxgraph;
+    utils,
+    mxXmlUtils,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -33,16 +33,16 @@ const Template = ({ label, ...args }) => {
   let requestId = 0;
 
   // Speedup the animation
-  mxText.prototype.enableBoundingBox = false;
+  Text.prototype.enableBoundingBox = false;
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Disables all built-in interactions
   graph.setEnabled(false);
 
   // Handles clicks on cells
-  graph.addListener(mxEvent.CLICK, function(sender, evt) {
+  graph.addListener(InternalEvent.CLICK, function (sender, evt) {
     const cell = evt.getProperty('cell');
 
     if (cell != null) {
@@ -52,8 +52,8 @@ const Template = ({ label, ...args }) => {
 
   // Changes the default vertex style in-place
   const style = graph.getStylesheet().getDefaultVertexStyle();
-  style.shape = mxConstants.SHAPE_ELLIPSE;
-  style.perimiter = mxPerimeter.EllipsePerimeter;
+  style.shape = Constants.SHAPE_ELLIPSE;
+  style.perimiter = Perimeter.EllipsePerimeter;
   style.gradientColor = 'white';
 
   // Gets the default parent for inserting new cells. This
@@ -63,18 +63,10 @@ const Template = ({ label, ...args }) => {
   const cx = graph.container.clientWidth / 2;
   const cy = graph.container.clientHeight / 2;
 
-  const cell = graph.insertVertex(
-    parent,
-    '0-0',
-    '0-0',
-    cx - 20,
-    cy - 15,
-    60,
-    40
-  );
+  const cell = graph.insertVertex(parent, '0-0', '0-0', cx - 20, cy - 15, 60, 40);
 
   // Animates the changes in the graph model
-  graph.getModel().addListener(mxEvent.CHANGE, function(sender, evt) {
+  graph.getModel().addListener(InternalEvent.CHANGE, function (sender, evt) {
     const { changes } = evt.getProperty('edit');
     mxEffects.animateChanges(graph, changes);
   });
@@ -180,7 +172,7 @@ const Template = ({ label, ...args }) => {
     requestId++;
 
     // Creates a local graph with no display
-    const graph = new mxGraph();
+    const graph = new Graph();
 
     // Gets the default parent for inserting new cells. This
     // is normally the first child of the root (ie. layer 0).
@@ -206,12 +198,12 @@ const Template = ({ label, ...args }) => {
     const enc = new mxCodec();
     const node = enc.encode(graph.getModel());
 
-    return mxUtils.getXml(node);
+    return utils.getXml(node);
   }
 
   load(graph, cell);
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/DynamicStyle.stories.js b/packages/html/stories/DynamicStyle.stories.js
index 78739f51c..c4d192a83 100644
--- a/packages/html/stories/DynamicStyle.stories.js
+++ b/packages/html/stories/DynamicStyle.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,18 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxUtils,
-    mxConstants,
-    mxRubberband
-  } = mxgraph;
+  const { Graph, utils, Constants, Rubberband } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -30,25 +25,24 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Disables moving of edge labels in this examples
   graph.edgeLabelsMovable = false;
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Needs to set a flag to check for dynamic style changes,
   // that is, changes to styles on cells where the style was
   // not explicitely changed using mxStyleChange
   graph.getView().updateStyle = true;
 
-  // Overrides mxCell.getStyle to return a specific style
+  // Overrides Cell.getStyle to return a specific style
   // for edges that reflects their target terminal (in this case
   // the strokeColor will be equal to the target's fillColor).
 
-  const getStyle = function() {
+  const getStyle = function () {
     // TODO super cannot be used here
     // let style = super.getStyle();
     let style;
@@ -58,10 +52,7 @@ const Template = ({ label, ...args }) => {
 
       if (target != null) {
         const targetStyle = graph.getCurrentCellStyle(target);
-        const fill = mxUtils.getValue(
-          targetStyle,
-          'fillColor'
-        );
+        const fill = utils.getValue(targetStyle, 'fillColor');
 
         if (fill != null) {
           style += `;strokeColor=${fill}`;
@@ -120,6 +111,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/DynamicToolbar.stories.js b/packages/html/stories/DynamicToolbar.stories.js
index b9b917e70..82e91eb2c 100644
--- a/packages/html/stories/DynamicToolbar.stories.js
+++ b/packages/html/stories/DynamicToolbar.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,26 +8,26 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxRubberband,
-    mxConnectionHandler,
-    mxImage,
+    Graph,
+    Rubberband,
+    ConnectionHandler,
+    ImageBox,
     mxToolbar,
-    mxGraphModel,
+    GraphModel,
     mxKeyHandler,
-    mxCell,
-    mxGeometry,
-    mxEvent,
-    mxUtils,
-    mxGestureUtils
-  } = mxgraph;
+    Cell,
+    Geometry,
+    InternalEvent,
+    utils,
+    GestureUtils,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => {
 
   // Defines an icon for creating new connections in the connection handler.
   // This will automatically disable the highlighting of the source vertex.
-  mxConnectionHandler.prototype.connectImage = new mxImage(
+  ConnectionHandler.prototype.connectImage = new ImageBox(
     '/images/connector.gif',
     16,
     16
@@ -66,8 +66,8 @@ const Template = ({ label, ...args }) => {
 
   // Creates the model and the graph inside the container
   // using the fastest rendering available on the browser
-  const model = new mxGraphModel();
-  const graph = new mxGraph(container, model);
+  const model = new GraphModel();
+  const graph = new Graph(container, model);
 
   // Enables new connections in the graph
   graph.setConnectable(true);
@@ -76,8 +76,7 @@ const Template = ({ label, ...args }) => {
   // Stops editing on enter or escape keypress
   const keyHandler = new mxKeyHandler(graph);
 
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   addVertex('/images/rectangle.gif', 100, 40, '');
   addVertex('/images/rounded.gif', 100, 40, 'shape=rounded');
@@ -88,60 +87,60 @@ const Template = ({ label, ...args }) => {
   addVertex('/images/actor.gif', 30, 40, 'shape=actor');
 
   function addVertex(icon, w, h, style) {
-    const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
+    const vertex = new Cell(null, new Geometry(0, 0, w, h), style);
     vertex.setVertex(true);
-  
+
     const img = addToolbarItem(graph, toolbar, vertex, icon);
     img.enabled = true;
-  
-    graph.getSelectionModel().addListener(mxEvent.CHANGE, () => {
+
+    graph.getSelectionModel().addListener(InternalEvent.CHANGE, () => {
       const tmp = graph.isSelectionEmpty();
-      mxUtils.setOpacity(img, tmp ? 100 : 20);
+      utils.setOpacity(img, tmp ? 100 : 20);
       img.enabled = tmp;
     });
   }
-  
+
   function addToolbarItem(graph, toolbar, prototype, image) {
     // Function that is executed when the image is dropped on
     // the graph. The cell argument points to the cell under
     // the mousepointer if there is one.
     const funct = (graph, evt, cell, x, y) => {
       graph.stopEditing(false);
-  
+
       const vertex = graph.getModel().cloneCell(prototype);
       vertex.geometry.x = x;
       vertex.geometry.y = y;
-  
+
       graph.addCell(vertex);
       graph.setSelectionCell(vertex);
     };
-  
+
     // Creates the image which is used as the drag icon (preview)
     const img = toolbar.addMode(null, image, (evt, cell) => {
       const pt = graph.getPointForEvent(evt);
       funct(graph, evt, cell, pt.x, pt.y);
     });
-  
+
     // Disables dragging if element is disabled. This is a workaround
     // for wrong event order in IE. Following is a dummy listener that
     // is invoked as the last listener in IE.
-    mxEvent.addListener(img, 'mousedown', evt => {
+    InternalEvent.addListener(img, 'mousedown', (evt) => {
       // do nothing
     });
-  
+
     // This listener is always called first before any other listener
     // in all browsers.
-    mxEvent.addListener(img, 'mousedown', evt => {
+    InternalEvent.addListener(img, 'mousedown', (evt) => {
       if (img.enabled == false) {
-        mxEvent.consume(evt);
+        InternalEvent.consume(evt);
       }
     });
-  
-    mxGestureUtils.makeDraggable(img, graph, funct);
+
+    GestureUtils.makeDraggable(img, graph, funct);
     return img;
   }
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/EdgeTolerance.stories.js b/packages/html/stories/EdgeTolerance.stories.js
index a9e9fe935..5960b1be4 100644
--- a/packages/html/stories/EdgeTolerance.stories.js
+++ b/packages/html/stories/EdgeTolerance.stories.js
@@ -1,19 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Connections/EdgeTolerance',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxUtils
-  } = mxgraph;
+  const { Graph, utils } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -23,7 +20,7 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     fireMouseEvent(evtName, me, sender) {
       // Overrides the mouse event dispatching mechanism to update the
       // cell which is associated with the event in case the native hit
@@ -35,14 +32,14 @@ const Template = ({ label, ...args }) => {
         // them here. Storing them in the event means the overridden
         // method doesn't have to do this again.
         if (me.graphX == null || me.graphY == null) {
-          const pt = mxUtils.convertPoint(container, me.getX(), me.getY());
+          const pt = utils.convertPoint(container, me.getX(), me.getY());
 
           me.graphX = pt.x;
           me.graphY = pt.y;
         }
 
         const cell = this.getCellAt(me.graphX, me.graphY);
-        
+
         if (cell?.isEdge()) {
           me.state = this.view.getState(cell);
 
@@ -62,10 +59,10 @@ const Template = ({ label, ...args }) => {
     dblClick(evt, cell) {
       // Overrides double click handling to use the tolerance
       if (cell == null) {
-        const pt = mxUtils.convertPoint(
+        const pt = utils.convertPoint(
           el,
-          mxEventUtils.getClientX(evt),
-          mxEventUtils.getClientY(evt)
+          EventUtils.getClientX(evt),
+          EventUtils.getClientY(evt)
         );
         cell = this.getCellAt(pt.x, pt.y);
       }
@@ -110,6 +107,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Editing.stories.js b/packages/html/stories/Editing.stories.js
index 9dce97453..379993228 100644
--- a/packages/html/stories/Editing.stories.js
+++ b/packages/html/stories/Editing.stories.js
@@ -1,23 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Editing/Editing',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxKeyHandler,
-    mxUtils,
-    mxDomUtils,
-    mxCloneUtils,
-    mxEventUtils
-  } = mxgraph;
+  const { Graph, mxKeyHandler, utils, mxDomUtils, CloneUtils, EventUtils } = maxgraph;
 
   const div = document.createElement('div');
   div.innerHTML = `
@@ -34,7 +27,7 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
   div.appendChild(container);
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     getLabel(cell) {
       // Returns a HTML representation of the cell where the
       // upper half is the first value, lower half is second
@@ -79,10 +72,10 @@ const Template = ({ label, ...args }) => {
       // a mouse event
       if (evt != null) {
         // Finds the relative coordinates inside the cell
-        const point = mxUtils.convertPoint(
+        const point = utils.convertPoint(
           this.container,
-          mxEventUtils.getClientX(evt),
-          mxEventUtils.getClientY(evt)
+          EventUtils.getClientX(evt),
+          EventUtils.getClientY(evt)
         );
         const state = this.getView().getState(cell);
 
@@ -106,7 +99,7 @@ const Template = ({ label, ...args }) => {
       if (name != null) {
         // Clones the user object for correct undo and puts
         // the new value in the correct field.
-        const value = mxCloneUtils.clone(cell.value);
+        const value = CloneUtils.clone(cell.value);
         value[name] = newValue;
         newValue = value;
 
@@ -143,6 +136,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Events.stories.js b/packages/html/stories/Events.stories.js
index e56b67d12..1b19ada23 100644
--- a/packages/html/stories/Events.stories.js
+++ b/packages/html/stories/Events.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,28 +8,28 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxConnectionHandler, 
-    mxLayoutManager,
+    Graph,
+    InternalEvent,
+    Rubberband,
+    ConnectionHandler,
+    LayoutManager,
     mxParallelEdgeLayout,
-    mxImage,
+    ImageBox,
     mxKeyHandler,
-    mxConstants,
-    mxEdgeStyle
-  } = mxgraph;
+    Constants,
+    EdgeStyle,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -39,15 +39,15 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  class MyCustomConnectionHandler extends mxConnectionHandler {
+  class MyCustomConnectionHandler extends ConnectionHandler {
     // Sets the image to be used for creating new connections
-    connectImage = new mxImage('/images/green-dot.gif', 14, 14);
+    connectImage = new ImageBox('/images/green-dot.gif', 14, 14);
   }
 
   // Disables built-in context menu
-  mxEvent.disableContextMenu(container);
+  InternalEvent.disableContextMenu(container);
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     alternateEdgeStyle = 'elbow=vertical';
 
     getTooltipForCell(cell) {
@@ -64,7 +64,7 @@ const Template = ({ label, ...args }) => {
   // Optionally you can enable panning, tooltips and connections
   // using graph.setPanning(), setTooltips() & setConnectable().
   // To enable rubberband selection and basic keyboard events,
-  // use new mxRubberband(graph) and new mxKeyHandler(graph).
+  // use new Rubberband(graph) and new mxKeyHandler(graph).
   const graph = new MyCustomGraph(container);
 
   // Enables tooltips, new connections and panning
@@ -74,9 +74,9 @@ const Template = ({ label, ...args }) => {
 
   // Automatically handle parallel edges
   const layout = new mxParallelEdgeLayout(graph);
-  const layoutMgr = new mxLayoutManager(graph);
+  const layoutMgr = new LayoutManager(graph);
 
-  layoutMgr.getLayout = function(cell) {
+  layoutMgr.getLayout = function (cell) {
     if (cell.getChildCount() > 0) {
       return layout;
     }
@@ -84,17 +84,17 @@ const Template = ({ label, ...args }) => {
 
   // Enables rubberband (marquee) selection and a handler
   // for basic keystrokes (eg. return, escape during editing).
-  const rubberband = new mxRubberband(graph);
+  const rubberband = new Rubberband(graph);
   const keyHandler = new mxKeyHandler(graph);
 
   // Changes the default style for edges "in-place" and assigns
-  // an alternate edge style which is applied in mxGraph.flip
+  // an alternate edge style which is applied in Graph.flip
   // when the user double clicks on the adjustment control point
   // of the edge. The ElbowConnector edge style switches to TopToBottom
   // if the horizontal style is true.
   const style = graph.getStylesheet().getDefaultEdgeStyle();
   style.rounded = true;
-  style.edge = mxEdgeStyle.ElbowConnector;
+  style.edge = EdgeStyle.ElbowConnector;
 
   // Installs a popupmenu handler using local function (see below).
   graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {
@@ -108,42 +108,10 @@ const Template = ({ label, ...args }) => {
   // Adds cells to the model in a single step
   graph.getModel().beginUpdate();
   try {
-    const v1 = graph.insertVertex(
-      parent,
-      null,
-      'Doubleclick',
-      20,
-      20,
-      80,
-      30
-    );
-    const v2 = graph.insertVertex(
-      parent,
-      null,
-      'Right-/Shiftclick',
-      200,
-      150,
-      120,
-      30
-    );
-    const v3 = graph.insertVertex(
-      parent,
-      null,
-      'Connect/Reconnect',
-      200,
-      20,
-      120,
-      30
-    );
-    const v4 = graph.insertVertex(
-      parent,
-      null,
-      'Control-Drag',
-      20,
-      150,
-      100,
-      30
-    );
+    const v1 = graph.insertVertex(parent, null, 'Doubleclick', 20, 20, 80, 30);
+    const v2 = graph.insertVertex(parent, null, 'Right-/Shiftclick', 200, 150, 120, 30);
+    const v3 = graph.insertVertex(parent, null, 'Connect/Reconnect', 200, 20, 120, 30);
+    const v4 = graph.insertVertex(parent, null, 'Control-Drag', 20, 150, 100, 30);
     const e1 = graph.insertEdge(parent, null, 'Tooltips', v1, v2);
     const e2 = graph.insertEdge(parent, null, '', v2, v3);
   } finally {
@@ -152,7 +120,7 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
 function createPopupMenu(graph, menu, cell, evt) {
   // Function to create the entries in the popupmenu
@@ -171,4 +139,4 @@ function createPopupMenu(graph, menu, cell, evt) {
   });
 }
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/ExtendCanvas.stories.js b/packages/html/stories/ExtendCanvas.stories.js
index 040bc15d9..b305d965e 100644
--- a/packages/html/stories/ExtendCanvas.stories.js
+++ b/packages/html/stories/ExtendCanvas.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,24 +8,17 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxRectangle, 
-    mxPoint,
-    mxUtils
-  } = mxgraph;
+  const { Graph, InternalEvent, Rubberband, Rectangle, Point, utils } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -35,233 +28,209 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
   container.style.background = 'url(/images/grid.gif)';
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   /**
-     * Specifies the size of the size for "tiles" to be used for a graph with
-     * scrollbars but no visible background page. A good value is large
-     * enough to reduce the number of repaints that is caused for auto-
-     * translation, which depends on this value, and small enough to give
-     * a small empty buffer around the graph. Default is 400x400.
+   * Specifies the size of the size for "tiles" to be used for a graph with
+   * scrollbars but no visible background page. A good value is large
+   * enough to reduce the number of repaints that is caused for auto-
+   * translation, which depends on this value, and small enough to give
+   * a small empty buffer around the graph. Default is 400x400.
+   */
+  const scrollTileSize = new Rectangle(0, 0, 400, 400);
+
+  class MyCustomGraph extends Graph {
+    /**
+     * Returns the padding for pages in page view with scrollbars.
      */
-    const scrollTileSize = new mxRectangle(0, 0, 400, 400);
+    getPagePadding() {
+      return new Point(
+        Math.max(0, Math.round(this.container.offsetWidth - 34)),
+        Math.max(0, Math.round(this.container.offsetHeight - 34))
+      );
+    }
 
-    class MyCustomGraph extends mxGraph {
-      /**
-       * Returns the padding for pages in page view with scrollbars.
-       */
-      getPagePadding() {
-        return new mxPoint(
-          Math.max(0, Math.round(this.container.offsetWidth - 34)),
-          Math.max(0, Math.round(this.container.offsetHeight - 34))
-        );
-      }
-
-      /**
-       * Returns the size of the page format scaled with the page size.
-       */
-      getPageSize() {
-        return this.pageVisible
-          ? new mxRectangle(
+    /**
+     * Returns the size of the page format scaled with the page size.
+     */
+    getPageSize() {
+      return this.pageVisible
+        ? new Rectangle(
             0,
             0,
             this.pageFormat.width * this.pageScale,
-              this.pageFormat.height * this.pageScale
-            )
-          : scrollTileSize;
-      }
-
-      /**
-       * Returns a rectangle describing the position and count of the
-       * background pages, where x and y are the position of the top,
-       * left page and width and height are the vertical and horizontal
-       * page count.
-       */
-      getPageLayout() {
-        const size = this.pageVisible ? this.getPageSize() : scrollTileSize;
-        const bounds = this.getGraphBounds();
-
-        if (bounds.width === 0 || bounds.height === 0) {
-          return new mxRectangle(0, 0, 1, 1);
-        }
-
-        // Computes untransformed graph bounds
-        const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
-        const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
-        const w = Math.floor(bounds.width / this.view.scale);
-        const h = Math.floor(bounds.height / this.view.scale);
-
-        const x0 = Math.floor(x / size.width);
-        const y0 = Math.floor(y / size.height);
-        const w0 = Math.ceil((x + w) / size.width) - x0;
-        const h0 = Math.ceil((y + h) / size.height) - y0;
-
-        return new mxRectangle(x0, y0, w0, h0);
-      }
-
-      getPreferredPageSize(bounds, width, height) {
-        const pages = this.getPageLayout();
-        const size = this.getPageSize();
-
-        return new mxRectangle(
-          0,
-          0,
-          pages.width * size.width,
-          pages.height * size.height
-        );
-      }
-
-      sizeDidChange() {
-        if (this.container != null && mxUtils.hasScrollbars(this.container)) {
-          const pages = this.getPageLayout();
-          const pad = this.getPagePadding();
-          const size = this.getPageSize();
-
-          // Updates the minimum graph size
-          const minw = Math.ceil(
-            (2 * pad.x) / this.view.scale + pages.width * size.width
-          );
-          const minh = Math.ceil(
-            (2 * pad.y) / this.view.scale + pages.height * size.height
-          );
-
-          const min = this.minimumGraphSize;
-
-          // LATER: Fix flicker of scrollbar size in IE quirks mode
-          // after delayed call in window.resize event handler
-          if (min == null || min.width !== minw || min.height !== minh) {
-            this.minimumGraphSize = new mxRectangle(0, 0, minw, minh);
-          }
-
-          // Updates auto-translate to include padding and graph size
-          const dx = pad.x / this.view.scale - pages.x * size.width;
-          const dy = pad.y / this.view.scale - pages.y * size.height;
-
-          if (
-            !this.autoTranslate &&
-            (this.view.translate.x !== dx || this.view.translate.y !== dy)
-          ) {
-            this.autoTranslate = true;
-            this.view.x0 = pages.x;
-            this.view.y0 = pages.y;
-
-            // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
-            // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
-            // SHOULD MOVE TRANSLATE/SCALE TO VIEW.
-            const tx = this.view.translate.x;
-            const ty = this.view.translate.y;
-
-            this.view.setTranslate(dx, dy);
-            this.container.scrollLeft += (dx - tx) * this.view.scale;
-            this.container.scrollTop += (dy - ty) * this.view.scale;
-
-            this.autoTranslate = false;
-            return;
-          }
-          super.sizeDidChange();
-        }
-      }
+            this.pageFormat.height * this.pageScale
+          )
+        : scrollTileSize;
     }
 
-    // Creates the graph inside the given container
-    const graph = new MyCustomGraph(container);
-    graph.panningHandler.ignoreCell = true;
-    graph.setPanning(true);
-
-    // Fits the number of background pages to the graph
-    graph.view.getBackgroundPageBounds = function() {
-      const layout = this.graph.getPageLayout();
-      const page = this.graph.getPageSize();
-
-      return new mxRectangle(
-        this.scale * (this.translate.x + layout.x * page.width),
-        this.scale * (this.translate.y + layout.y * page.height),
-        this.scale * layout.width * page.width,
-        this.scale * layout.height * page.height
-      );
-    };
-
     /**
-     * Guesses autoTranslate to avoid another repaint (see below).
-     * Works if only the scale of the graph changes or if pages
-     * are visible and the visible pages do not change.
+     * Returns a rectangle describing the position and count of the
+     * background pages, where x and y are the position of the top,
+     * left page and width and height are the vertical and horizontal
+     * page count.
      */
-    const graphViewValidate = graph.view.validate;
-    graph.view.validate = function() {
-      if (
-        this.graph.container != null &&
-        mxUtils.hasScrollbars(this.graph.container)
-      ) {
-        const pad = this.graph.getPagePadding();
-        const size = this.graph.getPageSize();
+    getPageLayout() {
+      const size = this.pageVisible ? this.getPageSize() : scrollTileSize;
+      const bounds = this.getGraphBounds();
 
-        // Updating scrollbars here causes flickering in quirks and is not needed
-        // if zoom method is always used to set the current scale on the graph.
-        const tx = this.translate.x;
-        const ty = this.translate.y;
-        this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
-        this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
+      if (bounds.width === 0 || bounds.height === 0) {
+        return new Rectangle(0, 0, 1, 1);
       }
 
-      graphViewValidate.apply(this, arguments);
-    };
+      // Computes untransformed graph bounds
+      const x = Math.ceil(bounds.x / this.view.scale - this.view.translate.x);
+      const y = Math.ceil(bounds.y / this.view.scale - this.view.translate.y);
+      const w = Math.floor(bounds.width / this.view.scale);
+      const h = Math.floor(bounds.height / this.view.scale);
 
-    // Enables rubberband selection
-    if (args.rubberBand)
-      new mxRubberband(graph);
+      const x0 = Math.floor(x / size.width);
+      const y0 = Math.floor(y / size.height);
+      const w0 = Math.ceil((x + w) / size.width) - x0;
+      const h0 = Math.ceil((y + h) / size.height) - y0;
 
-    // Gets the default parent for inserting new cells. This
-    // is normally the first child of the root (ie. layer 0).
-    const parent = graph.getDefaultParent();
+      return new Rectangle(x0, y0, w0, h0);
+    }
 
-    // Adds cells to the model in a single step
-    graph.batchUpdate(() => {
-      const v1 = graph.insertVertex({
-        parent,
-        value: 'Hello,',
-        position: [20, 20],
-        size: [80, 30],
-      });
-      const v2 = graph.insertVertex({
-        parent,
-        value: 'World!',
-        position: [200, 150],
-        size: [80, 30],
-      });
-      const e1 = graph.insertEdge({
-        parent,
-        source: v1,
-        target: v2,
-      });
+    getPreferredPageSize(bounds, width, height) {
+      const pages = this.getPageLayout();
+      const size = this.getPageSize();
+
+      return new Rectangle(0, 0, pages.width * size.width, pages.height * size.height);
+    }
+
+    sizeDidChange() {
+      if (this.container != null && utils.hasScrollbars(this.container)) {
+        const pages = this.getPageLayout();
+        const pad = this.getPagePadding();
+        const size = this.getPageSize();
+
+        // Updates the minimum graph size
+        const minw = Math.ceil((2 * pad.x) / this.view.scale + pages.width * size.width);
+        const minh = Math.ceil(
+          (2 * pad.y) / this.view.scale + pages.height * size.height
+        );
+
+        const min = this.minimumGraphSize;
+
+        // LATER: Fix flicker of scrollbar size in IE quirks mode
+        // after delayed call in window.resize event handler
+        if (min == null || min.width !== minw || min.height !== minh) {
+          this.minimumGraphSize = new Rectangle(0, 0, minw, minh);
+        }
+
+        // Updates auto-translate to include padding and graph size
+        const dx = pad.x / this.view.scale - pages.x * size.width;
+        const dy = pad.y / this.view.scale - pages.y * size.height;
+
+        if (
+          !this.autoTranslate &&
+          (this.view.translate.x !== dx || this.view.translate.y !== dy)
+        ) {
+          this.autoTranslate = true;
+          this.view.x0 = pages.x;
+          this.view.y0 = pages.y;
+
+          // NOTE: THIS INVOKES THIS METHOD AGAIN. UNFORTUNATELY THERE IS NO WAY AROUND THIS SINCE THE
+          // BOUNDS ARE KNOWN AFTER THE VALIDATION AND SETTING THE TRANSLATE TRIGGERS A REVALIDATION.
+          // SHOULD MOVE TRANSLATE/SCALE TO VIEW.
+          const tx = this.view.translate.x;
+          const ty = this.view.translate.y;
+
+          this.view.setTranslate(dx, dy);
+          this.container.scrollLeft += (dx - tx) * this.view.scale;
+          this.container.scrollTop += (dy - ty) * this.view.scale;
+
+          this.autoTranslate = false;
+          return;
+        }
+        super.sizeDidChange();
+      }
+    }
+  }
+
+  // Creates the graph inside the given container
+  const graph = new MyCustomGraph(container);
+  graph.panningHandler.ignoreCell = true;
+  graph.setPanning(true);
+
+  // Fits the number of background pages to the graph
+  graph.view.getBackgroundPageBounds = function () {
+    const layout = this.graph.getPageLayout();
+    const page = this.graph.getPageSize();
+
+    return new Rectangle(
+      this.scale * (this.translate.x + layout.x * page.width),
+      this.scale * (this.translate.y + layout.y * page.height),
+      this.scale * layout.width * page.width,
+      this.scale * layout.height * page.height
+    );
+  };
+
+  /**
+   * Guesses autoTranslate to avoid another repaint (see below).
+   * Works if only the scale of the graph changes or if pages
+   * are visible and the visible pages do not change.
+   */
+  const graphViewValidate = graph.view.validate;
+  graph.view.validate = function () {
+    if (this.graph.container != null && utils.hasScrollbars(this.graph.container)) {
+      const pad = this.graph.getPagePadding();
+      const size = this.graph.getPageSize();
+
+      // Updating scrollbars here causes flickering in quirks and is not needed
+      // if zoom method is always used to set the current scale on the graph.
+      const tx = this.translate.x;
+      const ty = this.translate.y;
+      this.translate.x = pad.x / this.scale - (this.x0 || 0) * size.width;
+      this.translate.y = pad.y / this.scale - (this.y0 || 0) * size.height;
+    }
+
+    graphViewValidate.apply(this, arguments);
+  };
+
+  // Enables rubberband selection
+  if (args.rubberBand) new Rubberband(graph);
+
+  // Gets the default parent for inserting new cells. This
+  // is normally the first child of the root (ie. layer 0).
+  const parent = graph.getDefaultParent();
+
+  // Adds cells to the model in a single step
+  graph.batchUpdate(() => {
+    const v1 = graph.insertVertex({
+      parent,
+      value: 'Hello,',
+      position: [20, 20],
+      size: [80, 30],
     });
+    const v2 = graph.insertVertex({
+      parent,
+      value: 'World!',
+      position: [200, 150],
+      size: [80, 30],
+    });
+    const e1 = graph.insertEdge({
+      parent,
+      source: v1,
+      target: v2,
+    });
+  });
 
-    // Sets initial scrollbar positions
-    window.setTimeout(() => {
-      const bounds = graph.getGraphBounds();
-      const width = Math.max(
-        bounds.width,
-        scrollTileSize.width * graph.view.scale
-      );
-      const height = Math.max(
-        bounds.height,
-        scrollTileSize.height * graph.view.scale
-      );
-      graph.container.scrollTop = Math.floor(
-        Math.max(
-          0,
-          bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4)
-        )
-      );
-      graph.container.scrollLeft = Math.floor(
-        Math.max(
-          0,
-          bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2)
-        )
-      );
-    }, 0);
+  // Sets initial scrollbar positions
+  window.setTimeout(() => {
+    const bounds = graph.getGraphBounds();
+    const width = Math.max(bounds.width, scrollTileSize.width * graph.view.scale);
+    const height = Math.max(bounds.height, scrollTileSize.height * graph.view.scale);
+    graph.container.scrollTop = Math.floor(
+      Math.max(0, bounds.y - Math.max(20, (graph.container.clientHeight - height) / 4))
+    );
+    graph.container.scrollLeft = Math.floor(
+      Math.max(0, bounds.x - Math.max(0, (graph.container.clientWidth - width) / 2))
+    );
+  }, 0);
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/FileIO.stories.js b/packages/html/stories/FileIO.stories.js
index 4d18cb838..c232defc6 100644
--- a/packages/html/stories/FileIO.stories.js
+++ b/packages/html/stories/FileIO.stories.js
@@ -1,23 +1,20 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
-import { error } from '@mxgraph/core/src/util/mxDomUtils';
-import { clone } from '@mxgraph/core/src/util/CloneUtils';
-import { button } from '@mxgraph/core/src/util/dom/mxDomHelpers';
-import { load } from '@mxgraph/core/src/util/network/mxXmlRequest';
+import { error } from '@maxgraph/core/util/DomUtils';
+import { clone } from '@maxgraph/core/util/CloneUtils';
+import { button } from '@maxgraph/core/util/dom/mxDomHelpers';
+import { load } from '@maxgraph/core/util/network/mxXmlRequest';
 
 export default {
   title: 'Xml_Json/FileIO',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxConstants
-  } = mxgraph;
+  const { Graph, Constants } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -41,7 +38,7 @@ const Template = ({ label, ...args }) => {
       error('Browser is not supported!', 200, false);
     } else {
       // Creates the graph inside the given container
-      const graph = new mxGraph(container);
+      const graph = new Graph(container);
 
       graph.setEnabled(false);
       graph.setPanning(true);
@@ -53,7 +50,7 @@ const Template = ({ label, ...args }) => {
 
       // Changes the default vertex style in-place
       let style = graph.getStylesheet().getDefaultVertexStyle();
-      style.shape = mxConstants.SHAPE_ROUNDED;
+      style.shape = Constants.SHAPE_ROUNDED;
       style.perimiter = Perimeter.RectanglePerimeter;
       style.gradientColor = 'white';
       style.perimeterSpacing = 4;
@@ -63,10 +60,10 @@ const Template = ({ label, ...args }) => {
       style.labelBackgroundColor = 'white';
 
       style = clone(style);
-      style.startArrow = mxConstants.ARROW_CLASSIC;
+      style.startArrow = Constants.ARROW_CLASSIC;
       graph.getStylesheet().putCellStyle('2way', style);
 
-      graph.isHtmlLabel = function(cell) {
+      graph.isHtmlLabel = function (cell) {
         return true;
       };
 
@@ -82,7 +79,7 @@ const Template = ({ label, ...args }) => {
 
       // Adds a button to execute the layout
       this.el2.appendChild(
-        button('Arrange', function(evt) {
+        button('Arrange', function (evt) {
           const parent = graph.getDefaultParent();
           layout.execute(parent);
         })
@@ -94,7 +91,7 @@ const Template = ({ label, ...args }) => {
         // Loads the custom file format (TXT file)
         parse(graph, 'fileio.txt');
 
-        // Loads the mxGraph file format (XML file)
+        // Loads the Graph file format (XML file)
         // read(graph, 'fileio.xml');
 
         // Gets the default parent for inserting new cells. This
@@ -108,9 +105,9 @@ const Template = ({ label, ...args }) => {
         graph.getModel().endUpdate();
       }
 
-      graph.dblClick = function(evt, cell) {
+      graph.dblClick = function (evt, cell) {
         const mxe = new EventObject(
-          mxEvent.DOUBLE_CLICK,
+          InternalEvent.DOUBLE_CLICK,
           'event',
           evt,
           'cell',
@@ -120,13 +117,11 @@ const Template = ({ label, ...args }) => {
 
         if (
           this.isEnabled() &&
-          !mxEvent.isConsumed(evt) &&
+          !InternalEvent.isConsumed(evt) &&
           !mxe.isConsumed() &&
           cell != null
         ) {
-          alert(
-            `Show properties for cell ${cell.customId || cell.getId()}`
-          );
+          alert(`Show properties for cell ${cell.customId || cell.getId()}`);
         }
       };
     }
@@ -163,15 +158,7 @@ const Template = ({ label, ...args }) => {
             const key = lines[i].substring(0, colon);
 
             if (key.length > 0) {
-              vertices[key] = graph.insertVertex(
-                parent,
-                null,
-                value,
-                0,
-                0,
-                80,
-                70
-              );
+              vertices[key] = graph.insertVertex(parent, null, value, 0, 0, 80, 70);
             }
           } else if (comma < colon) {
             // Looks up the vertices in the lookup table
@@ -194,7 +181,7 @@ const Template = ({ label, ...args }) => {
     }
   }
 
-  // Parses the mxGraph XML file format
+  // Parses the Graph XML file format
   function read(graph, filename) {
     const req = load(filename);
     const root = req.getDocumentElement();
@@ -204,6 +191,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/FixedIcons.stories.js b/packages/html/stories/FixedIcons.stories.js
index 00d600ed7..892560d59 100644
--- a/packages/html/stories/FixedIcons.stories.js
+++ b/packages/html/stories/FixedIcons.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,20 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxRubberband, 
-    mxRectangle,
-    mxConstants,
-    mxUtils,
-    mxLabel
-  } = mxgraph;
+  const { Graph, Rubberband, Rectangle, Constants, utils, mxLabel } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -32,38 +25,29 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Overrides the image bounds code to change the position
-  mxLabel.prototype.getImageBounds = function(x, y, w, h) {
-    const iw = mxUtils.getValue(
-      this.style,
-      'imageWidth',
-      mxConstants.DEFAULT_IMAGESIZE
-    );
-    const ih = mxUtils.getValue(
-      this.style,
-      'imageHeight',
-      mxConstants.DEFAULT_IMAGESIZE
-    );
+  mxLabel.prototype.getImageBounds = function (x, y, w, h) {
+    const iw = utils.getValue(this.style, 'imageWidth', Constants.DEFAULT_IMAGESIZE);
+    const ih = utils.getValue(this.style, 'imageHeight', Constants.DEFAULT_IMAGESIZE);
 
     // Places the icon
     const ix = (w - iw) / 2;
     const iy = h - ih;
 
-    return new mxRectangle(x + ix, y + iy, iw, ih);
+    return new Rectangle(x + ix, y + iy, iw, ih);
   };
 
   // Makes the shadow brighter
-  mxConstants.SHADOWCOLOR = '#C0C0C0';
+  Constants.SHADOWCOLOR = '#C0C0C0';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Uncomment the following if you want the container
   // to fit the size of the graph
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -89,6 +73,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/FixedPoints.stories.js b/packages/html/stories/FixedPoints.stories.js
index 79dba8fda..2f86bb8d5 100644
--- a/packages/html/stories/FixedPoints.stories.js
+++ b/packages/html/stories/FixedPoints.stories.js
@@ -1,7 +1,7 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
-import { intersects } from '@mxgraph/core/src/util/Utils';
+import { intersects } from '@maxgraph/core/util/Utils';
 
 export default {
   title: 'Connections/FixedPoints',
@@ -9,22 +9,22 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxRubberband, 
-    mxConnectionHandler, 
-    mxConnectionConstraint,
-    mxConstraintHandler,
-    mxPoint,
-    mxCellState,
-    mxEdgeHandler
-  } = mxgraph;
+    Graph,
+    Rubberband,
+    ConnectionHandler,
+    ConnectionConstraint,
+    ConstraintHandler,
+    Point,
+    CellState,
+    EdgeHandler,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -34,17 +34,15 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  class MyCustomConstraintHandler extends mxConstraintHandler {
+  class MyCustomConstraintHandler extends ConstraintHandler {
     // Snaps to fixed points
     intersects(icon, point, source, existingEdge) {
-      return (
-        !source || existingEdge || intersects(icon.bounds, point)
-      );
+      return !source || existingEdge || intersects(icon.bounds, point);
     }
   }
 
-  class MyCustomConnectionHandler extends mxConnectionHandler {
-    // connectImage = new mxImage('images/connector.gif', 16, 16);
+  class MyCustomConnectionHandler extends ConnectionHandler {
+    // connectImage = new ImageBox('images/connector.gif', 16, 16);
 
     isConnectableCell(cell) {
       return false;
@@ -59,21 +57,15 @@ const Template = ({ label, ...args }) => {
      */
     updateEdgeState(pt, constraint) {
       if (pt != null && this.previous != null) {
-        const constraints = this.graph.getAllConnectionConstraints(
-          this.previous
-        );
+        const constraints = this.graph.getAllConnectionConstraints(this.previous);
         let nearestConstraint = null;
         let dist = null;
 
         for (let i = 0; i < constraints.length; i++) {
-          const cp = this.graph.getConnectionPoint(
-            this.previous,
-            constraints[i]
-          );
+          const cp = this.graph.getConnectionPoint(this.previous, constraints[i]);
 
           if (cp != null) {
-            const tmp =
-              (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);
+            const tmp = (cp.x - pt.x) * (cp.x - pt.x) + (cp.y - pt.y) * (cp.y - pt.y);
 
             if (dist == null || tmp < dist) {
               nearestConstraint = constraints[i];
@@ -90,7 +82,7 @@ const Template = ({ label, ...args }) => {
         // this.edgeState.style.edgeStyle = 'orthogonalEdgeStyle';
         // And to use the new edge style in the new edge inserted into the graph,
         // update the cell style as follows:
-        // this.edgeState.cell.style = mxUtils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle);
+        // this.edgeState.cell.style = utils.setStyle(this.edgeState.cell.style, 'edgeStyle', this.edgeState.style.edgeStyle);
       }
       return super.updateEdgeState(pt, constraint);
     }
@@ -106,22 +98,18 @@ const Template = ({ label, ...args }) => {
         'edgeStyle=orthogonalEdgeStyle'
       );
 
-      return new mxCellState(
-        this.graph.view,
-        edge,
-        this.graph.getCellStyle(edge)
-      );
+      return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
     }
   }
 
-  class MyCustomEdgeHandler extends mxEdgeHandler {
+  class MyCustomEdgeHandler extends EdgeHandler {
     // Disables floating connections (only use with no connect image)
     isConnectableCell(cell) {
       return graph.connectionHandler.isConnectableCell(cell);
     }
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     createConnectionHandler() {
       const r = new MyCustomConnectionHandler();
       r.constraintHandler = new MyCustomConstraintHandler(this);
@@ -137,14 +125,14 @@ const Template = ({ label, ...args }) => {
     getAllConnectionConstraints(terminal) {
       if (terminal != null && terminal.cell.isVertex()) {
         return [
-          new mxConnectionConstraint(new mxPoint(0, 0), true),
-          new mxConnectionConstraint(new mxPoint(0.5, 0), true),
-          new mxConnectionConstraint(new mxPoint(1, 0), true),
-          new mxConnectionConstraint(new mxPoint(0, 0.5), true),
-          new mxConnectionConstraint(new mxPoint(1, 0.5), true),
-          new mxConnectionConstraint(new mxPoint(0, 1), true),
-          new mxConnectionConstraint(new mxPoint(0.5, 1), true),
-          new mxConnectionConstraint(new mxPoint(1, 1), true),
+          new ConnectionConstraint(new Point(0, 0), true),
+          new ConnectionConstraint(new Point(0.5, 0), true),
+          new ConnectionConstraint(new Point(1, 0), true),
+          new ConnectionConstraint(new Point(0, 0.5), true),
+          new ConnectionConstraint(new Point(1, 0.5), true),
+          new ConnectionConstraint(new Point(0, 1), true),
+          new ConnectionConstraint(new Point(0.5, 1), true),
+          new ConnectionConstraint(new Point(1, 1), true),
         ];
       }
       return null;
@@ -156,8 +144,7 @@ const Template = ({ label, ...args }) => {
   graph.setConnectable(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -208,16 +195,16 @@ const Template = ({ label, ...args }) => {
   // Use this code to snap the source point for new connections without a connect preview,
   // ie. without an overridden graph.connectionHandler.createEdgeState
   /*
-    let mxConnectionHandlerMouseMove = mxConnectionHandler.prototype.mouseMove;
-    mxConnectionHandler.prototype.mouseMove = function(sender, me)
+    let mxConnectionHandlerMouseMove = ConnectionHandler.prototype.mouseMove;
+    ConnectionHandler.prototype.mouseMove = function(sender, me)
     {
         this.sourceConstraint = null;
 
         mxConnectionHandlerMouseMove.apply(this, arguments);
     };
 
-    let mxConnectionHandlerGetSourcePerimeterPoint = mxConnectionHandler.prototype.getSourcePerimeterPoint;
-    mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me)
+    let mxConnectionHandlerGetSourcePerimeterPoint = ConnectionHandler.prototype.getSourcePerimeterPoint;
+    ConnectionHandler.prototype.getSourcePerimeterPoint = function(state, pt, me)
     {
         let result = null;
 
@@ -262,6 +249,6 @@ const Template = ({ label, ...args }) => {
     */
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Folding.stories.js b/packages/html/stories/Folding.stories.js
index d2d61b5f0..0bec34da8 100644
--- a/packages/html/stories/Folding.stories.js
+++ b/packages/html/stories/Folding.stories.js
@@ -1,22 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Layouts/Folding',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxConstants,
-    mxEdgeStyle,
-    mxStackLayout,
-    mxLayoutManager
-  } = mxgraph;
+  const { Graph, Constants, EdgeStyle, StackLayout, LayoutManager } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -27,10 +21,10 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Enables crisp rendering of rectangles in SVG
-  mxConstants.ENTITY_SEGMENT = 20;
+  Constants.ENTITY_SEGMENT = 20;
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setDropEnabled(true);
 
   // Disables global features
@@ -43,7 +37,7 @@ const Template = ({ label, ...args }) => {
 
   // Sets global styles
   let style = graph.getStylesheet().getDefaultEdgeStyle();
-  style.edge = mxEdgeStyle.EntityRelation;
+  style.edge = EdgeStyle.EntityRelation;
   style.rounded = true;
 
   style = graph.getStylesheet().getDefaultVertexStyle();
@@ -52,17 +46,17 @@ const Template = ({ label, ...args }) => {
   style.startSize = 30;
 
   style = [];
-  style.shape = mxConstants.SHAPE_RECTANGLE;
+  style.shape = Constants.SHAPE_RECTANGLE;
   style.strokeColor = 'none';
   style.fillColor = 'none';
   style.foldable = false;
   graph.getStylesheet().putCellStyle('column', style);
 
   // Installs auto layout for all levels
-  const layout = new mxStackLayout(graph, true);
+  const layout = new StackLayout(graph, true);
   layout.border = graph.border;
-  const layoutMgr = new mxLayoutManager(graph);
-  layoutMgr.getLayout = function(cell) {
+  const layoutMgr = new LayoutManager(graph);
+  layoutMgr.getLayout = function (cell) {
     if (!cell.collapsed) {
       if (cell.parent !== graph.model.root) {
         layout.resizeParent = true;
@@ -140,6 +134,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Grid.stories.js b/packages/html/stories/Grid.stories.js
index 2e46e511e..5f57d02da 100644
--- a/packages/html/stories/Grid.stories.js
+++ b/packages/html/stories/Grid.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,26 +8,26 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxLog, 
-    mxGraphView,
-    mxPoint,
+    Graph,
+    InternalEvent,
+    Rubberband,
+    mxLog,
+    GraphView,
+    Point,
     mxDomHelpers,
-    mxEventUtils
-  } = mxgraph;
+    EventUtils,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -39,73 +39,69 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
   div.appendChild(container);
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Creates the graph inside the given container
-  var graph = new mxGraph(container);
+  var graph = new Graph(container);
   graph.graphHandler.scaleGrid = true;
   graph.setPanning(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   let repaintGrid;
 
   // Create grid dynamically (requires canvas)
-  (function()
-  {
-    try
-    {
+  (function () {
+    try {
       var canvas = document.createElement('canvas');
       canvas.style.position = 'absolute';
       canvas.style.top = '0px';
       canvas.style.left = '0px';
       canvas.style.zIndex = -1;
       graph.container.appendChild(canvas);
-      
+
       var ctx = canvas.getContext('2d');
-      
+
       // Modify event filtering to accept canvas as container
-      var mxGraphViewIsContainerEvent = mxGraphView.prototype.isContainerEvent;
-      mxGraphView.prototype.isContainerEvent = function(evt)
-      {
-        return mxGraphViewIsContainerEvent.apply(this, arguments) ||
-        mxEventUtils.getSource(evt) == canvas;
+      var mxGraphViewIsContainerEvent = GraphView.prototype.isContainerEvent;
+      GraphView.prototype.isContainerEvent = function (evt) {
+        return (
+          mxGraphViewIsContainerEvent.apply(this, arguments) ||
+          EventUtils.getSource(evt) == canvas
+        );
       };
-      
+
       var s = 0;
       var gs = 0;
-      var tr = new mxPoint();
+      var tr = new Point();
       var w = 0;
       var h = 0;
 
-      repaintGrid = function()
-      {
-        if (ctx != null)
-        {
+      repaintGrid = function () {
+        if (ctx != null) {
           var bounds = graph.getGraphBounds();
           var width = Math.max(bounds.x + bounds.width, graph.container.clientWidth);
           var height = Math.max(bounds.y + bounds.height, graph.container.clientHeight);
           var sizeChanged = width != w || height != h;
-          
-          if (graph.view.scale != s || graph.view.translate.x != tr.x || graph.view.translate.y != tr.y ||
-            gs != graph.gridSize || sizeChanged)
-          {
+
+          if (
+            graph.view.scale != s ||
+            graph.view.translate.x != tr.x ||
+            graph.view.translate.y != tr.y ||
+            gs != graph.gridSize ||
+            sizeChanged
+          ) {
             tr = graph.view.translate.clone();
             s = graph.view.scale;
             gs = graph.gridSize;
             w = width;
             h = height;
-            
+
             // Clears the background if required
-            if (!sizeChanged)
-            {
+            if (!sizeChanged) {
               ctx.clearRect(0, 0, w, h);
-            }
-            else
-            {
+            } else {
               canvas.setAttribute('width', w);
               canvas.setAttribute('height', h);
             }
@@ -117,8 +113,7 @@ const Template = ({ label, ...args }) => {
             var minStepping = graph.gridSize;
             var stepping = minStepping * s;
 
-            if (stepping < minStepping)
-            {
+            if (stepping < minStepping) {
               var count = Math.round(Math.ceil(minStepping / stepping) / 2) * 2;
               stepping = count * stepping;
             }
@@ -139,21 +134,19 @@ const Template = ({ label, ...args }) => {
             // Draws the actual grid
             ctx.strokeStyle = '#f6f6f6';
             ctx.beginPath();
-            
-            for (var x = xs; x <= xe; x += stepping)
-            {
+
+            for (var x = xs; x <= xe; x += stepping) {
               x = Math.round((x - tx) / stepping) * stepping + tx;
               var ix = Math.round(x);
-              
+
               ctx.moveTo(ix + 0.5, iys + 0.5);
               ctx.lineTo(ix + 0.5, iye + 0.5);
             }
 
-            for (var y = ys; y <= ye; y += stepping)
-            {
+            for (var y = ys; y <= ye; y += stepping) {
               y = Math.round((y - ty) / stepping) * stepping + ty;
               var iy = Math.round(y);
-              
+
               ctx.moveTo(ixs + 0.5, iy + 0.5);
               ctx.lineTo(ixe + 0.5, iy + 0.5);
             }
@@ -163,58 +156,53 @@ const Template = ({ label, ...args }) => {
           }
         }
       };
-    }
-    catch (e)
-    {
+    } catch (e) {
       mxLog.show();
       mxLog.debug('Using background image');
-      
-      container.style.backgroundImage = 'url(\'editors/images/grid.gif\')';
+
+      container.style.backgroundImage = "url('editors/images/grid.gif')";
     }
-    
-    var mxGraphViewValidateBackground = mxGraphView.prototype.validateBackground;
-    mxGraphView.prototype.validateBackground = function()
-    {
+
+    var mxGraphViewValidateBackground = GraphView.prototype.validateBackground;
+    GraphView.prototype.validateBackground = function () {
       mxGraphViewValidateBackground.apply(this, arguments);
       repaintGrid();
     };
   })();
-  
-  
+
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
   var parent = graph.getDefaultParent();
-          
+
   // Adds cells to the model in a single step
   graph.getModel().beginUpdate();
-  try
-  {
+  try {
     var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
     var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
     var e1 = graph.insertEdge(parent, null, '', v1, v2);
-  }
-  finally
-  {
+  } finally {
     // Updates the display
     graph.getModel().endUpdate();
   }
 
   graph.centerZoom = false;
-  
+
   const controller = document.createElement('div');
   div.appendChild(controller);
 
-  controller.appendChild(mxDomHelpers.button('+', function()
-  {
-    graph.zoomIn();
-  }));
-  
-  controller.appendChild(mxDomHelpers.button('-', function()
-  {
-    graph.zoomOut();
-  }));
+  controller.appendChild(
+    mxDomHelpers.button('+', function () {
+      graph.zoomIn();
+    })
+  );
+
+  controller.appendChild(
+    mxDomHelpers.button('-', function () {
+      graph.zoomOut();
+    })
+  );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Groups.stories.js b/packages/html/stories/Groups.stories.js
index 31bc83b27..31117498d 100644
--- a/packages/html/stories/Groups.stories.js
+++ b/packages/html/stories/Groups.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,18 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxRubberband,
-    mxGraphHandler,
-    mxPopupMenuHandler
-  } = mxgraph;
+  const { Graph, Rubberband, GraphHandler, mxPopupMenuHandler } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -30,27 +25,24 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Overrides check for valid roots
-  mxGraph.prototype.isValidRoot = function() {
+  Graph.prototype.isValidRoot = function () {
     return false;
   };
 
   // Don't clear selection if multiple cells selected
-  const graphHandlerMouseDown = mxGraphHandler.prototype.mouseDown;
-  mxGraphHandler.prototype.mouseDown = function(sender, me) {
+  const graphHandlerMouseDown = GraphHandler.prototype.mouseDown;
+  GraphHandler.prototype.mouseDown = function (sender, me) {
     graphHandlerMouseDown.apply(this, arguments);
 
-    if (
-      this.graph.isCellSelected(me.getCell()) &&
-      this.graph.getSelectionCount() > 1
-    ) {
+    if (this.graph.isCellSelected(me.getCell()) && this.graph.getSelectionCount() > 1) {
       this.delayedSelection = false;
     }
   };
 
   // Selects descendants before children selection mode
   const graphHandlerGetInitialCellForEvent =
-    mxGraphHandler.prototype.getInitialCellForEvent;
-  mxGraphHandler.prototype.getInitialCellForEvent = function(me) {
+    GraphHandler.prototype.getInitialCellForEvent;
+  GraphHandler.prototype.getInitialCellForEvent = function (me) {
     const model = this.graph.getModel();
     const psel = this.graph.getSelectionCell().getParent();
     let cell = graphHandlerGetInitialCellForEvent.apply(this, arguments);
@@ -72,9 +64,8 @@ const Template = ({ label, ...args }) => {
   };
 
   // Selection is delayed to mouseup if child selected
-  const graphHandlerIsDelayedSelection =
-    mxGraphHandler.prototype.isDelayedSelection;
-  mxGraphHandler.prototype.isDelayedSelection = function(cell) {
+  const graphHandlerIsDelayedSelection = GraphHandler.prototype.isDelayedSelection;
+  GraphHandler.prototype.isDelayedSelection = function (cell) {
     let result = graphHandlerIsDelayedSelection.apply(this, arguments);
     const model = this.graph.getModel();
     const psel = this.graph.getSelectionCell().getParent();
@@ -94,7 +85,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Delayed selection of parent group
-  mxGraphHandler.prototype.selectDelayed = function(me) {
+  GraphHandler.prototype.selectDelayed = function (me) {
     let cell = me.getCell();
 
     if (cell == null) {
@@ -117,7 +108,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Returns last selected ancestor
-  mxPopupMenuHandler.prototype.getCellForPopupEvent = function(me) {
+  mxPopupMenuHandler.prototype.getCellForPopupEvent = function (me) {
     let cell = me.getCell();
     const model = this.graph.getModel();
     let parent = cell.getParent();
@@ -134,7 +125,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.constrainChildren = false;
   graph.extendParents = false;
   graph.extendParentsOnAdd = false;
@@ -144,8 +135,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -162,6 +152,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Guides.stories.js b/packages/html/stories/Guides.stories.js
index a7ad49c45..97630f187 100644
--- a/packages/html/stories/Guides.stories.js
+++ b/packages/html/stories/Guides.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,21 +8,21 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxGraphHandler,
-    mxEvent,
-    mxConstants,
-    mxEdgeHandler,
-    mxEdgeStyle,
-    mxRubberband
-  } = mxgraph;
+    Graph,
+    GraphHandler,
+    InternalEvent,
+    Constants,
+    EdgeHandler,
+    EdgeStyle,
+    Rubberband,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -33,40 +33,39 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Enables guides
-  mxGraphHandler.prototype.guidesEnabled = true;
+  GraphHandler.prototype.guidesEnabled = true;
 
   // Alt disables guides
-  mxGraphHandler.prototype.useGuidesForEvent = function(me) {
-    return !mxEvent.isAltDown(me.getEvent());
+  GraphHandler.prototype.useGuidesForEvent = function (me) {
+    return !InternalEvent.isAltDown(me.getEvent());
   };
 
   // Defines the guides to be red (default)
-  mxConstants.GUIDE_COLOR = '#FF0000';
+  Constants.GUIDE_COLOR = '#FF0000';
 
   // Defines the guides to be 1 pixel (default)
-  mxConstants.GUIDE_STROKEWIDTH = 1;
+  Constants.GUIDE_STROKEWIDTH = 1;
 
   // Enables snapping waypoints to terminals
-  mxEdgeHandler.prototype.snapToTerminals = true;
+  EdgeHandler.prototype.snapToTerminals = true;
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setConnectable(true);
   graph.gridSize = 30;
 
   // Changes the default style for edges "in-place" and assigns
-  // an alternate edge style which is applied in mxGraph.flip
+  // an alternate edge style which is applied in Graph.flip
   // when the user double clicks on the adjustment control point
   // of the edge. The ElbowConnector edge style switches to TopToBottom
   // if the horizontal style is true.
   const style = graph.getStylesheet().getDefaultEdgeStyle();
   style.rounded = true;
-  style.edge = mxEdgeStyle.ElbowConnector;
+  style.edge = EdgeStyle.ElbowConnector;
   graph.alternateEdgeStyle = 'elbow=vertical';
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -85,7 +84,7 @@ const Template = ({ label, ...args }) => {
   }
 
   // Handles cursor keys
-  const nudge = function(keyCode) {
+  const nudge = function (keyCode) {
     if (!graph.isSelectionEmpty()) {
       let dx = 0;
       let dy = 0;
@@ -111,26 +110,26 @@ const Template = ({ label, ...args }) => {
 
     // Ignores enter keystroke. Remove this line if you want the
     // enter keystroke to stop editing
-    keyHandler.enter = function() {};
+    keyHandler.enter = function () {};
 
-    keyHandler.bindKey(37, function() {
+    keyHandler.bindKey(37, function () {
       nudge(37);
     });
 
-    keyHandler.bindKey(38, function() {
+    keyHandler.bindKey(38, function () {
       nudge(38);
     });
 
-    keyHandler.bindKey(39, function() {
+    keyHandler.bindKey(39, function () {
       nudge(39);
     });
 
-    keyHandler.bindKey(40, function() {
+    keyHandler.bindKey(40, function () {
       nudge(40);
     });
   };
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Handles.stories.js b/packages/html/stories/Handles.stories.js
index 4d24b31ba..1a2fa430d 100644
--- a/packages/html/stories/Handles.stories.js
+++ b/packages/html/stories/Handles.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,29 +8,29 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxCylinder,
+    Graph,
+    CylinderShape,
     mxDomHelpers,
-    mxCellRenderer,
-    mxPoint,
-    mxRectangle,
-    mxVertexHandler,
-    mxEvent,
-    mxRubberband,
-    mxUtils,
-    mxHandle
-  } = mxgraph;
+    CellRenderer,
+    Point,
+    Rectangle,
+    VertexHandler,
+    InternalEvent,
+    Rubberband,
+    utils,
+    VertexHandle,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -43,17 +43,15 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
   div.appendChild(container);
 
-  class MyShape extends mxCylinder {
+  class MyShape extends CylinderShape {
     defaultPos1 = 20;
 
     defaultPos2 = 60;
 
     getLabelBounds(rect) {
-      const pos1 =
-        mxUtils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
-      const pos2 =
-        mxUtils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
-      return new mxRectangle(
+      const pos1 = utils.getValue(this.style, 'pos1', this.defaultPos1) * this.scale;
+      const pos2 = utils.getValue(this.style, 'pos2', this.defaultPos2) * this.scale;
+      return new Rectangle(
         rect.x,
         rect.y + pos1,
         rect.width,
@@ -62,8 +60,8 @@ const Template = ({ label, ...args }) => {
     }
 
     redrawPath(path, x, y, w, h, isForeground) {
-      const pos1 = mxUtils.getValue(this.style, 'pos1', this.defaultPos1);
-      const pos2 = mxUtils.getValue(this.style, 'pos2', this.defaultPos2);
+      const pos1 = utils.getValue(this.style, 'pos1', this.defaultPos1);
+      const pos2 = utils.getValue(this.style, 'pos2', this.defaultPos2);
 
       if (isForeground) {
         if (pos1 < h) {
@@ -80,9 +78,9 @@ const Template = ({ label, ...args }) => {
       }
     }
   }
-  mxCellRenderer.registerShape('myShape', MyShape);
+  CellRenderer.registerShape('myShape', MyShape);
 
-  class MyCustomVertexHandler extends mxVertexHandler {
+  class MyCustomVertexHandler extends VertexHandler {
     livePreview = true;
 
     rotationEnabled = true;
@@ -90,19 +88,15 @@ const Template = ({ label, ...args }) => {
     createCustomHandles() {
       if (this.state.style.shape === 'myShape') {
         // Implements the handle for the first divider
-        const firstHandle = new mxHandle(this.state);
+        const firstHandle = new VertexHandle(this.state);
 
-        firstHandle.getPosition = function(bounds) {
+        firstHandle.getPosition = function (bounds) {
           const pos2 = Math.max(
             0,
             Math.min(
               bounds.height,
               parseFloat(
-                mxUtils.getValue(
-                  this.state.style,
-                  'pos2',
-                  MyShape.prototype.defaultPos2
-                )
+                utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2)
               )
             )
           );
@@ -111,29 +105,21 @@ const Template = ({ label, ...args }) => {
             Math.min(
               pos2,
               parseFloat(
-                mxUtils.getValue(
-                  this.state.style,
-                  'pos1',
-                  MyShape.prototype.defaultPos1
-                )
+                utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1)
               )
             )
           );
 
-          return new mxPoint(bounds.getCenterX(), bounds.y + pos1);
+          return new Point(bounds.getCenterX(), bounds.y + pos1);
         };
 
-        firstHandle.setPosition = function(bounds, pt) {
+        firstHandle.setPosition = function (bounds, pt) {
           const pos2 = Math.max(
             0,
             Math.min(
               bounds.height,
               parseFloat(
-                mxUtils.getValue(
-                  this.state.style,
-                  'pos2',
-                  MyShape.prototype.defaultPos2
-                )
+                utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2)
               )
             )
           );
@@ -143,26 +129,22 @@ const Template = ({ label, ...args }) => {
           );
         };
 
-        firstHandle.execute = function() {
+        firstHandle.execute = function () {
           this.copyStyle('pos1');
         };
 
         firstHandle.ignoreGrid = true;
 
         // Implements the handle for the second divider
-        const secondHandle = new mxHandle(this.state);
+        const secondHandle = new VertexHandle(this.state);
 
-        secondHandle.getPosition = function(bounds) {
+        secondHandle.getPosition = function (bounds) {
           const pos1 = Math.max(
             0,
             Math.min(
               bounds.height,
               parseFloat(
-                mxUtils.getValue(
-                  this.state.style,
-                  'pos1',
-                  MyShape.prototype.defaultPos1
-                )
+                utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1)
               )
             )
           );
@@ -171,29 +153,21 @@ const Template = ({ label, ...args }) => {
             Math.min(
               bounds.height,
               parseFloat(
-                mxUtils.getValue(
-                  this.state.style,
-                  'pos2',
-                  MyShape.prototype.defaultPos2
-                )
+                utils.getValue(this.state.style, 'pos2', MyShape.prototype.defaultPos2)
               )
             )
           );
 
-          return new mxPoint(bounds.getCenterX(), bounds.y + pos2);
+          return new Point(bounds.getCenterX(), bounds.y + pos2);
         };
 
-        secondHandle.setPosition = function(bounds, pt) {
+        secondHandle.setPosition = function (bounds, pt) {
           const pos1 = Math.max(
             0,
             Math.min(
               bounds.height,
               parseFloat(
-                mxUtils.getValue(
-                  this.state.style,
-                  'pos1',
-                  MyShape.prototype.defaultPos1
-                )
+                utils.getValue(this.state.style, 'pos1', MyShape.prototype.defaultPos1)
               )
             )
           );
@@ -203,7 +177,7 @@ const Template = ({ label, ...args }) => {
           );
         };
 
-        secondHandle.execute = function() {
+        secondHandle.execute = function () {
           this.copyStyle('pos2');
         };
 
@@ -216,15 +190,14 @@ const Template = ({ label, ...args }) => {
     }
   }
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     createVertexHandler(state) {
       return new MyCustomVertexHandler(state);
     }
   }
 
   // Disables the built-in context menu
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Creates the graph inside the given container
   const graph = new MyCustomGraph(container);
@@ -234,8 +207,7 @@ const Template = ({ label, ...args }) => {
   graph.centerZoom = false;
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -263,17 +235,17 @@ const Template = ({ label, ...args }) => {
   div.appendChild(buttons);
 
   buttons.appendChild(
-    mxDomHelpers.button('+', function() {
+    mxDomHelpers.button('+', function () {
       graph.zoomIn();
     })
   );
   buttons.appendChild(
-    mxDomHelpers.button('-', function() {
+    mxDomHelpers.button('-', function () {
       graph.zoomOut();
     })
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/HelloPort.stories.js b/packages/html/stories/HelloPort.stories.js
index b5428f6cd..3514f95e9 100644
--- a/packages/html/stories/HelloPort.stories.js
+++ b/packages/html/stories/HelloPort.stories.js
@@ -1,8 +1,8 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
-import { popup } from '@mxgraph/core/src/util/gui/mxWindow';
-import { getPrettyXml } from '@mxgraph/core/src/util/XmlUtils';
+import { popup } from '@maxgraph/core/util/gui/mxWindow';
+import { getPrettyXml } from '@maxgraph/core/util/XmlUtils';
 
 export default {
   title: 'Connections/HelloPort',
@@ -10,21 +10,21 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxRubberband, 
-    mxEdgeStyle,
-    mxPoint,
-    mxConstants,
+    Graph,
+    Rubberband,
+    EdgeStyle,
+    Point,
+    Constants,
     mxDomHelpers,
-    mxClient
-  } = mxgraph;
+    mxClient,
+  } = maxgraph;
 
   mxClient.setImageBasePath('/images');
 
@@ -40,17 +40,17 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setConnectable(true);
   graph.setTooltips(true);
 
   // Sets the default edge style
   const style = graph.getStylesheet().getDefaultEdgeStyle();
-  style.edge = mxEdgeStyle.ElbowConnector;
+  style.edge = EdgeStyle.ElbowConnector;
 
   // Ports are not used as terminals for edges, they are
   // only used to compute the graphical connection point
-  graph.isPort = function(cell) {
+  graph.isPort = function (cell) {
     const geo = this.getCellGeometry(cell);
 
     return geo != null ? geo.relative : false;
@@ -58,26 +58,23 @@ const Template = ({ label, ...args }) => {
 
   // Implements a tooltip that shows the actual
   // source and target of an edge
-  graph.getTooltipForCell = function(cell) {
+  graph.getTooltipForCell = function (cell) {
     if (cell.isEdge()) {
       return `${this.convertValueToString(
         cell.getTerminal(true)
-      )} => ${this.convertValueToString(
-        cell.getTerminal(false)
-      )}`;
+      )} => ${this.convertValueToString(cell.getTerminal(false))}`;
     }
 
-    return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
+    return Graph.prototype.getTooltipForCell.apply(this, arguments);
   };
 
   // Removes the folding icon and disables any folding
-  graph.isCellFoldable = function(cell) {
+  graph.isCellFoldable = function (cell) {
     return false;
   };
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -89,10 +86,10 @@ const Template = ({ label, ...args }) => {
     const v1 = graph.insertVertex(parent, null, 'Hello', 20, 80, 80, 30);
     v1.setConnectable(false);
     const v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
-    v11.geometry.offset = new mxPoint(-5, -5);
+    v11.geometry.offset = new Point(-5, -5);
     v11.geometry.relative = true;
     const v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
-    v12.geometry.offset = new mxPoint(-5, -5);
+    v12.geometry.offset = new Point(-5, -5);
     v12.geometry.relative = true;
     const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
     const v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
@@ -106,7 +103,7 @@ const Template = ({ label, ...args }) => {
   const controller = document.createElement('div');
   div.appendChild(controller);
 
-  const button = mxDomHelpers.button('View XML', function() {
+  const button = mxDomHelpers.button('View XML', function () {
     const encoder = new mxCodec();
     const node = encoder.encode(graph.getModel());
     popup(getPrettyXml(node), true);
@@ -115,6 +112,6 @@ const Template = ({ label, ...args }) => {
   controller.appendChild(button);
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/HelloWorld.stories.js b/packages/html/stories/HelloWorld.stories.js
index 16d8a20c8..bc44ef70a 100644
--- a/packages/html/stories/HelloWorld.stories.js
+++ b/packages/html/stories/HelloWorld.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -18,8 +18,8 @@ export default {
 };
 
 const Template = ({ label, ...args }) => {
-  const { mxGraph, mxEvent, mxRubberband } = mxgraph;
-
+  const { Graph, InternalEvent, Rubberband } = maxgraph;
+  console.log(maxgraph, Graph);
   const container = document.createElement('div');
   container.style.position = 'relative';
   container.style.overflow = 'hidden';
@@ -28,11 +28,11 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  if (!args.contextMenu) mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
-  if (args.rubberBand) new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   const parent = graph.getDefaultParent();
 
diff --git a/packages/html/stories/HierarchicalLayout.stories.js b/packages/html/stories/HierarchicalLayout.stories.js
index 831eb6d85..980986386 100644
--- a/packages/html/stories/HierarchicalLayout.stories.js
+++ b/packages/html/stories/HierarchicalLayout.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,26 +8,26 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
+    Graph,
     mxDomUtils,
     mxFastOrganicLayout,
     mxHierarchicalLayout,
-    mxPerimeter,
-    mxEvent,
-    mxRubberband,
-    mxConstants
-  } = mxgraph;
+    Perimeter,
+    InternalEvent,
+    Rubberband,
+    Constants,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -41,15 +41,14 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Adds rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style.perimiter = mxPerimeter.RectanglePerimeter;
+  style.perimiter = Perimeter.RectanglePerimeter;
   style.gradientColor = 'white';
   style.perimeterSpacing = 6;
   style.rounded = true;
@@ -72,7 +71,7 @@ const Template = ({ label, ...args }) => {
   // Adds a button to execute the layout
   let button = document.createElement('button');
   mxDomUtils.write(button, 'Hierarchical');
-  mxEvent.addListener(button, 'click', function(evt) {
+  InternalEvent.addListener(button, 'click', function (evt) {
     layout.execute(parent);
   });
   buttons.appendChild(button);
@@ -81,7 +80,7 @@ const Template = ({ label, ...args }) => {
   button = document.createElement('button');
   mxDomUtils.write(button, 'Organic');
 
-  mxEvent.addListener(button, 'click', function(evt) {
+  InternalEvent.addListener(button, 'click', function (evt) {
     organic.execute(parent);
   });
 
@@ -122,6 +121,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/HoverIcons.stories.js b/packages/html/stories/HoverIcons.stories.js
index 9881096e1..b41cfafd2 100644
--- a/packages/html/stories/HoverIcons.stories.js
+++ b/packages/html/stories/HoverIcons.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,21 +8,21 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxEvent, 
-    mxRubberband, 
-    mxImage,
-    mxRectangle,
-    mxUtils,
-    mxConnectionHandler
-  } = mxgraph;
+    Graph,
+    InternalEvent,
+    Rubberband,
+    ImageBox,
+    Rectangle,
+    utils,
+    ConnectionHandler,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -34,11 +34,7 @@ const Template = ({ label, ...args }) => {
 
   // Defines an icon for creating new connections in the connection handler.
   // This will automatically disable the highlighting of the source vertex.
-  mxConnectionHandler.prototype.connectImage = new mxImage(
-    'images/connector.gif',
-    16,
-    16
-  );
+  ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
 
   // Defines a new class for all icons
   class mxIconSet {
@@ -47,7 +43,7 @@ const Template = ({ label, ...args }) => {
       const { graph } = state.view;
 
       // Icon1
-      let img = mxUtils.createImage('images/copy.png');
+      let img = utils.createImage('images/copy.png');
       img.setAttribute('title', 'Duplicate');
       Object.assign(img.style, {
         cursor: 'pointer',
@@ -58,10 +54,10 @@ const Template = ({ label, ...args }) => {
         top: `${state.y + state.height}px`,
       });
 
-      mxEvent.addGestureListeners(img, evt => {
+      InternalEvent.addGestureListeners(img, (evt) => {
         const s = graph.gridSize;
         graph.setSelectionCells(graph.moveCells([state.cell], s, s, true));
-        mxEvent.consume(evt);
+        InternalEvent.consume(evt);
         this.destroy();
       });
 
@@ -69,7 +65,7 @@ const Template = ({ label, ...args }) => {
       this.images.push(img);
 
       // Delete
-      img = mxUtils.createImage('images/delete2.png');
+      img = utils.createImage('images/delete2.png');
       img.setAttribute('title', 'Delete');
       Object.assign(img.style, {
         cursor: 'pointer',
@@ -80,14 +76,14 @@ const Template = ({ label, ...args }) => {
         top: `${state.y - 16}px`,
       });
 
-      mxEvent.addGestureListeners(img, evt => {
+      InternalEvent.addGestureListeners(img, (evt) => {
         // Disables dragging the image
-        mxEvent.consume(evt);
+        InternalEvent.consume(evt);
       });
 
-      mxEvent.addListener(img, 'click', evt => {
+      InternalEvent.addListener(img, 'click', (evt) => {
         graph.removeCells([state.cell]);
-        mxEvent.consume(evt);
+        InternalEvent.consume(evt);
         this.destroy();
       });
 
@@ -106,12 +102,11 @@ const Template = ({ label, ...args }) => {
   }
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setConnectable(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Defines the tolerance before removing the icons
   const ICON_TOLERANCE = 20;
@@ -135,13 +130,13 @@ const Template = ({ label, ...args }) => {
         (me.getState() === this.currentState || me.getState() == null)
       ) {
         const tol = ICON_TOLERANCE;
-        const tmp = new mxRectangle(
+        const tmp = new Rectangle(
           me.getGraphX() - tol,
           me.getGraphY() - tol,
           2 * tol,
           2 * tol
         );
-        if (mxUtils.intersects(tmp, this.currentState)) {
+        if (utils.intersects(tmp, this.currentState)) {
           return;
         }
       }
@@ -149,10 +144,7 @@ const Template = ({ label, ...args }) => {
       let tmp = graph.view.getState(me.getCell());
 
       // Ignore everything but vertices
-      if (
-        graph.isMouseDown ||
-        (tmp != null && !tmp.cell.isVertex())
-      ) {
+      if (graph.isMouseDown || (tmp != null && !tmp.cell.isVertex())) {
         tmp = null;
       }
 
@@ -210,6 +202,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/HoverStyle.stories.js b/packages/html/stories/HoverStyle.stories.js
index 328968fc4..b186bc47c 100644
--- a/packages/html/stories/HoverStyle.stories.js
+++ b/packages/html/stories/HoverStyle.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,18 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxConstants,
-    mxRubberband,
-    mxCloneUtils
-  } = mxgraph;
+  const { Graph, Constants, Rubberband, CloneUtils } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -30,7 +25,7 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   function updateStyle(state, hover) {
     if (hover) {
@@ -42,9 +37,7 @@ const Template = ({ label, ...args }) => {
     // once it is set, whereas the above overrides the default value
     state.style.rounded = hover ? '1' : '0';
     state.style.strokeWidth = hover ? '4' : '1';
-    state.style.fontStyle = hover
-      ? mxConstants.FONT_BOLD
-      : '0';
+    state.style.fontStyle = hover ? Constants.FONT_BOLD : '0';
   }
 
   // Changes fill color to red on mouseover
@@ -65,10 +58,7 @@ const Template = ({ label, ...args }) => {
       let tmp = graph.view.getState(me.getCell());
 
       // Ignores everything but vertices
-      if (
-        graph.isMouseDown ||
-        (tmp != null && !tmp.cell.isVertex())
-      ) {
+      if (graph.isMouseDown || (tmp != null && !tmp.cell.isVertex())) {
         tmp = null;
       }
 
@@ -88,7 +78,7 @@ const Template = ({ label, ...args }) => {
     dragEnter(evt, state) {
       if (state != null) {
         this.previousStyle = state.style;
-        state.style = mxCloneUtils.clone(state.style);
+        state.style = CloneUtils.clone(state.style);
         updateStyle(state, true);
         state.shape.apply(state);
         state.shape.redraw();
@@ -115,8 +105,7 @@ const Template = ({ label, ...args }) => {
   });
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -134,6 +123,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Images.stories.js b/packages/html/stories/Images.stories.js
index f591adf72..14c1bf1b4 100644
--- a/packages/html/stories/Images.stories.js
+++ b/packages/html/stories/Images.stories.js
@@ -1,23 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Icon_Images/Images',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxCloneUtils, 
-    mxImage,
-    mxRectangle,
-    mxConstants,
-    mxPerimeter
-  } = mxgraph;
+  const { Graph, CloneUtils, ImageBox, Rectangle, Constants, Perimeter } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -28,16 +21,14 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Sets a background image and restricts child movement to its bounds
-  graph.setBackgroundImage(
-    new mxImage('images/gradient_background.jpg', 360, 200)
-  );
-  graph.maximumGraphBounds = new mxRectangle(0, 0, 360, 200);
+  graph.setBackgroundImage(new ImageBox('images/gradient_background.jpg', 360, 200));
+  graph.maximumGraphBounds = new Rectangle(0, 0, 360, 200);
 
   // Resizes the container but never make it bigger than the background
-  graph.minimumContainerSize = new mxRectangle(0, 0, 360, 200);
+  graph.minimumContainerSize = new Rectangle(0, 0, 360, 200);
   graph.setResizeContainer(true);
 
   // Disables basic selection and cell handling
@@ -99,19 +90,19 @@ const Template = ({ label, ...args }) => {
 
   function configureStylesheet(graph) {
     let style = {};
-    style.shape = mxConstants.SHAPE_IMAGE;
-    style.perimiter = mxPerimeter.RectanglePerimeter;
+    style.shape = Constants.SHAPE_IMAGE;
+    style.perimiter = Perimeter.RectanglePerimeter;
     style.image = 'images/icons48/keys.png';
     style.fontColor = '#FFFFFF';
     graph.getStylesheet().putCellStyle('image', style);
 
-    style = mxCloneUtils.clone(style);
-    style.shape = mxConstants.SHAPE_LABEL;
+    style = CloneUtils.clone(style);
+    style.shape = Constants.SHAPE_LABEL;
     style.strokeColor = '#000000';
-    style.align = mxConstants.ALIGN_CENTER;
-    style.verticalAlign = mxConstants.ALIGN_TOP;
-    style.imageAlign = mxConstants.ALIGN_CENTER;
-    style.imageVerticalAlign = mxConstants.ALIGN_TOP;
+    style.align = Constants.ALIGN_CENTER;
+    style.verticalAlign = Constants.ALIGN_TOP;
+    style.imageAlign = Constants.ALIGN_CENTER;
+    style.imageVerticalAlign = Constants.ALIGN_TOP;
     style.image = 'images/icons48/gear.png';
     style.imageWidth = '48';
     style.imageHeight = '48';
@@ -119,31 +110,31 @@ const Template = ({ label, ...args }) => {
     style.spacing = '8';
     graph.getStylesheet().putCellStyle('bottom', style);
 
-    style = mxCloneUtils.clone(style);
-    style.imageVerticalAlign = mxConstants.ALIGN_BOTTOM;
+    style = CloneUtils.clone(style);
+    style.imageVerticalAlign = Constants.ALIGN_BOTTOM;
     style.image = 'images/icons48/server.png';
     delete style.spacingTop;
     graph.getStylesheet().putCellStyle('top', style);
 
-    style = mxCloneUtils.clone(style);
-    style.align = mxConstants.ALIGN_LEFT;
-    style.imageAlign = mxConstants.ALIGN_LEFT;
-    style.verticalAlign = mxConstants.ALIGN_MIDDLE;
-    style.imageVerticalAlign = mxConstants.ALIGN_MIDDLE;
+    style = CloneUtils.clone(style);
+    style.align = Constants.ALIGN_LEFT;
+    style.imageAlign = Constants.ALIGN_LEFT;
+    style.verticalAlign = Constants.ALIGN_MIDDLE;
+    style.imageVerticalAlign = Constants.ALIGN_MIDDLE;
     style.image = 'images/icons48/earth.png';
     style.spacingLeft = '55';
     style.spacing = '4';
     graph.getStylesheet().putCellStyle('right', style);
 
-    style = mxCloneUtils.clone(style);
-    style.align = mxConstants.ALIGN_RIGHT;
-    style.imageAlign = mxConstants.ALIGN_RIGHT;
+    style = CloneUtils.clone(style);
+    style.align = Constants.ALIGN_RIGHT;
+    style.imageAlign = Constants.ALIGN_RIGHT;
     delete style.spacingLeft;
     style.spacingRight = '55';
     graph.getStylesheet().putCellStyle('left', style);
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Indicators.stories.js b/packages/html/stories/Indicators.stories.js
index 067f50d56..c92ccd8e9 100644
--- a/packages/html/stories/Indicators.stories.js
+++ b/packages/html/stories/Indicators.stories.js
@@ -1,21 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Icon_Images/Indicators',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxEdgeStyle,
-    mxConstants,
-    mxKeyHandler
-  } = mxgraph;
+  const { Graph, EdgeStyle, Constants, mxKeyHandler } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -26,7 +21,7 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setConnectable(true);
   new mxKeyHandler(graph);
 
@@ -50,8 +45,8 @@ const Template = ({ label, ...args }) => {
   // Creates a style with an indicator
   style = graph.getStylesheet().getDefaultEdgeStyle();
 
-  style.edge = mxEdgeStyle.ElbowConnector;
-  style.elbow = mxConstants.ELBOW_VERTICAL;
+  style.edge = EdgeStyle.ElbowConnector;
+  style.elbow = Constants.ELBOW_VERTICAL;
   style.rounded = true;
 
   // Gets the default parent for inserting new cells. This
@@ -88,6 +83,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/JsonData.stories.js b/packages/html/stories/JsonData.stories.js
index 16127d13c..7ffcae502 100644
--- a/packages/html/stories/JsonData.stories.js
+++ b/packages/html/stories/JsonData.stories.js
@@ -1,27 +1,27 @@
-import mxgraph from '@mxgraph/core';
-import { popup } from '@mxgraph/core/src/util/gui/mxWindow';
+import maxgraph from '@maxgraph/core';
+import { popup } from '@maxgraph/core/util/gui/mxWindow';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Xml_Json/JsonData',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
+    Graph,
     mxObjectCodec,
     mxDomHelpers,
     mxCodecRegistry,
-    mxEvent,
+    InternalEvent,
     mxClient,
     mxCodec,
     mxDomUtils,
-    mxUtils
-  } = mxgraph;
+    utils,
+  } = maxgraph;
 
   mxClient.setImageBasePath('/images');
 
@@ -41,12 +41,12 @@ const Template = ({ label, ...args }) => {
     this.value = value;
   }
   const codec = new mxObjectCodec(new CustomData());
-  codec.encode = function(enc, obj) {
+  codec.encode = function (enc, obj) {
     const node = enc.document.createElement('CustomData');
     mxDomUtils.setTextContent(node, JSON.stringify(obj));
     return node;
   };
-  codec.decode = function(dec, node, into) {
+  codec.decode = function (dec, node, into) {
     const obj = JSON.parse(mxDomUtils.getTextContent(node));
     obj.constructor = CustomData;
 
@@ -55,15 +55,13 @@ const Template = ({ label, ...args }) => {
   mxCodecRegistry.register(codec);
 
   // Disables the built-in context menu
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new RubberBand(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -86,14 +84,14 @@ const Template = ({ label, ...args }) => {
   div.appendChild(buttons);
 
   buttons.appendChild(
-    mxDomHelpers.button('Show JSON', function() {
+    mxDomHelpers.button('Show JSON', function () {
       const encoder = new mxCodec();
       const node = encoder.encode(graph.getModel());
-      popup(mxUtils.getXml(node), true);
+      popup(utils.getXml(node), true);
     })
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/LabelPosition.stories.js b/packages/html/stories/LabelPosition.stories.js
index b6ce0158a..553fcb971 100644
--- a/packages/html/stories/LabelPosition.stories.js
+++ b/packages/html/stories/LabelPosition.stories.js
@@ -1,18 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Labels/LabelPosition',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph
-  } = mxgraph;
+  const { Graph } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -23,7 +21,7 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -36,7 +34,7 @@ const Template = ({ label, ...args }) => {
   // label positions using the label position styles. Vertical
   // and horizontal label position styles can be combined.
   // Note: Alternatively, vertex labels can be set be overriding
-  // mxCellRenderer.getLabelBounds.
+  // CellRenderer.getLabelBounds.
   graph.getModel().beginUpdate();
   try {
     graph.insertVertex(
@@ -85,6 +83,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Labels.stories.js b/packages/html/stories/Labels.stories.js
index 6ac9580c9..9b4ec3f9e 100644
--- a/packages/html/stories/Labels.stories.js
+++ b/packages/html/stories/Labels.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,19 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxRubberband,
-    mxKeyHandler,
-    mxConstants,
-    mxRectangle
-  } = mxgraph;
+  const { Graph, Rubberband, mxKeyHandler, Constants, Rectangle } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -31,13 +25,12 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setTooltips(true);
   graph.htmlLabels = true;
   graph.vertexLabelsMovable = true;
 
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   new mxKeyHandler(graph);
 
@@ -48,32 +41,30 @@ const Template = ({ label, ...args }) => {
   graph.autoSizeCellsOnAdd = true;
 
   // Allows moving of relative cells
-  graph.isCellLocked = function(cell) {
+  graph.isCellLocked = function (cell) {
     return this.isCellsLocked();
   };
 
-  graph.isCellResizable = function(cell) {
+  graph.isCellResizable = function (cell) {
     const geo = cell.getGeometry();
 
     return geo == null || !geo.relative;
   };
 
   // Truncates the label to the size of the vertex
-  graph.getLabel = function(cell) {
+  graph.getLabel = function (cell) {
     const label = this.labelsVisible ? this.convertValueToString(cell) : '';
     const geometry = cell.getGeometry();
 
     if (
       !cell.isCollapsed() &&
       geometry != null &&
-      (geometry.offset == null ||
-        (geometry.offset.x == 0 && geometry.offset.y == 0)) &&
+      (geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0)) &&
       cell.isVertex() &&
       geometry.width >= 2
     ) {
       const style = this.getCellStyle(cell);
-      const fontSize =
-        style.fontSize || mxConstants.DEFAULT_FONTSIZE;
+      const fontSize = style.fontSize || Constants.DEFAULT_FONTSIZE;
       const max = geometry.width / (fontSize * 0.625);
 
       if (max < label.length) {
@@ -85,19 +76,18 @@ const Template = ({ label, ...args }) => {
   };
 
   // Enables wrapping for vertex labels
-  graph.isWrapping = function(cell) {
+  graph.isWrapping = function (cell) {
     return cell.isCollapsed();
   };
 
   // Enables clipping of vertex labels if no offset is defined
-  graph.isLabelClipped = function(cell) {
+  graph.isLabelClipped = function (cell) {
     const geometry = cell.getGeometry();
 
     return (
       geometry != null &&
       !geometry.relative &&
-      (geometry.offset == null ||
-        (geometry.offset.x == 0 && geometry.offset.y == 0))
+      (geometry.offset == null || (geometry.offset.x == 0 && geometry.offset.y == 0))
     );
   };
 
@@ -108,39 +98,11 @@ const Template = ({ label, ...args }) => {
   // Adds cells to the model in a single step
   graph.getModel().beginUpdate();
   try {
-    const v1 = graph.insertVertex(
-      parent,
-      null,
-      'vertexLabelsMovable',
-      20,
-      20,
-      80,
-      30
-    );
+    const v1 = graph.insertVertex(parent, null, 'vertexLabelsMovable', 20, 20, 80, 30);
 
     // Places sublabels inside the vertex
-    const label11 = graph.insertVertex(
-      v1,
-      null,
-      'Label1',
-      0.5,
-      1,
-      0,
-      0,
-      null,
-      true
-    );
-    const label12 = graph.insertVertex(
-      v1,
-      null,
-      'Label2',
-      0.5,
-      0,
-      0,
-      0,
-      null,
-      true
-    );
+    const label11 = graph.insertVertex(v1, null, 'Label1', 0.5, 1, 0, 0, null, true);
+    const label12 = graph.insertVertex(v1, null, 'Label2', 0.5, 0, 0, 0, null, true);
 
     const v2 = graph.insertVertex(
       parent,
@@ -151,38 +113,18 @@ const Template = ({ label, ...args }) => {
       80,
       30
     );
-    v2.geometry.alternateBounds = new mxRectangle(0, 0, 80, 30);
+    v2.geometry.alternateBounds = new Rectangle(0, 0, 80, 30);
     const e1 = graph.insertEdge(parent, null, 'edgeLabelsMovable', v1, v2);
 
     // Places sublabels inside the vertex
-    const label21 = graph.insertVertex(
-      v2,
-      null,
-      'Label1',
-      0.5,
-      1,
-      0,
-      0,
-      null,
-      true
-    );
-    const label22 = graph.insertVertex(
-      v2,
-      null,
-      'Label2',
-      0.5,
-      0,
-      0,
-      0,
-      null,
-      true
-    );
+    const label21 = graph.insertVertex(v2, null, 'Label1', 0.5, 1, 0, 0, null, true);
+    const label22 = graph.insertVertex(v2, null, 'Label2', 0.5, 0, 0, 0, null, true);
   } finally {
     // Updates the display
     graph.getModel().endUpdate();
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Layers.stories.js b/packages/html/stories/Layers.stories.js
index cc394e11c..86277bf04 100644
--- a/packages/html/stories/Layers.stories.js
+++ b/packages/html/stories/Layers.stories.js
@@ -1,22 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Layouts/Layers',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxDomHelpers,
-    mxCell,
-    mxGraphModel,
-    mxPoint
-  } = mxgraph;
+  const { Graph, mxDomHelpers, Cell, GraphModel, Point } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -31,13 +25,13 @@ const Template = ({ label, ...args }) => {
 
   // Creates the graph inside the given container using a model
   // with a custom root and two layers. Layers can also be added
-  // dynamically using let layer = model.add(root, new mxCell()).
-  const root = new mxCell();
-  const layer0 = root.insert(new mxCell());
-  const layer1 = root.insert(new mxCell());
-  const model = new mxGraphModel(root);
+  // dynamically using let layer = model.add(root, new Cell()).
+  const root = new Cell();
+  const layer0 = root.insert(new Cell());
+  const layer1 = root.insert(new Cell());
+  const model = new GraphModel(root);
 
-  const graph = new mxGraph(container, model);
+  const graph = new Graph(container, model);
 
   // Disables basic selection and cell handling
   graph.setEnabled(false);
@@ -70,17 +64,10 @@ const Template = ({ label, ...args }) => {
       'fillColor=#C0C0C0'
     );
     const v3 = graph.insertVertex(layer0, null, 'World!', 110, 150, 80, 30);
-    const e1 = graph.insertEdge(
-      layer1,
-      null,
-      '',
-      v1,
-      v3,
-      'strokeColor=#0C0C0C'
-    );
-    e1.geometry.points = [new mxPoint(60, 165)];
+    const e1 = graph.insertEdge(layer1, null, '', v1, v3, 'strokeColor=#0C0C0C');
+    e1.geometry.points = [new Point(60, 165)];
     const e2 = graph.insertEdge(layer0, null, '', v2, v3);
-    e2.geometry.points = [new mxPoint(240, 165)];
+    e2.geometry.points = [new Point(240, 165)];
     const e3 = graph.insertEdge(
       layer0,
       null,
@@ -89,7 +76,7 @@ const Template = ({ label, ...args }) => {
       v2,
       'edgeStyle=topToBottomEdgeStyle'
     );
-    e3.geometry.points = [new mxPoint(150, 30)];
+    e3.geometry.points = [new Point(150, 30)];
     const e4 = graph.insertEdge(
       layer1,
       null,
@@ -98,7 +85,7 @@ const Template = ({ label, ...args }) => {
       v1,
       'strokeColor=#0C0C0C;edgeStyle=topToBottomEdgeStyle'
     );
-    e4.geometry.points = [new mxPoint(150, 40)];
+    e4.geometry.points = [new Point(150, 40)];
   } finally {
     // Updates the display
     model.endUpdate();
@@ -108,18 +95,18 @@ const Template = ({ label, ...args }) => {
   div.appendChild(buttons);
 
   buttons.appendChild(
-    mxDomHelpers.button('Layer 0', function() {
+    mxDomHelpers.button('Layer 0', function () {
       model.setVisible(layer0, !layer0.isVisible());
     })
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('Layer 1', function() {
+    mxDomHelpers.button('Layer 1', function () {
       model.setVisible(layer1, !layer1.isVisible());
     })
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/LoD.stories.js b/packages/html/stories/LoD.stories.js
index e4f1d17cd..b84415b9c 100644
--- a/packages/html/stories/LoD.stories.js
+++ b/packages/html/stories/LoD.stories.js
@@ -1,19 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Zoom_OffPage/LoD',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxDomHelpers
-  } = mxgraph;
+  const { Graph, mxDomHelpers } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -27,11 +24,11 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.centerZoom = false;
 
   // Links level of detail to zoom level but can be independent of zoom
-  const isVisible = function() {
+  const isVisible = function () {
     return this.lod == null || this.lod / 2 < graph.view.scale;
   };
 
@@ -74,18 +71,18 @@ const Template = ({ label, ...args }) => {
   div.appendChild(buttons);
 
   buttons.appendChild(
-    mxDomHelpers.button('+', function() {
+    mxDomHelpers.button('+', function () {
       graph.zoomIn();
     })
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('-', function() {
+    mxDomHelpers.button('-', function () {
       graph.zoomOut();
     })
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Markers.stories.js b/packages/html/stories/Markers.stories.js
index 77bcffee0..4068889a7 100644
--- a/packages/html/stories/Markers.stories.js
+++ b/packages/html/stories/Markers.stories.js
@@ -1,25 +1,25 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Icon_Images/Markers',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxEdgeHandler,
-    mxGraphHandler,
-    mxCellRenderer,
-    mxMarker,
-    mxCylinder,
-    mxArrow,
-    mxPoint
-  } = mxgraph;
+    Graph,
+    EdgeHandler,
+    GraphHandler,
+    CellRenderer,
+    Marker,
+    CylinderShape,
+    Arrow,
+    Point,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -30,38 +30,27 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Enables guides
-  mxGraphHandler.prototype.guidesEnabled = true;
-  mxEdgeHandler.prototype.snapToTerminals = true;
+  GraphHandler.prototype.guidesEnabled = true;
+  EdgeHandler.prototype.snapToTerminals = true;
 
   // Registers and defines the custom marker
-  mxMarker.addMarker('dash', function(
-    canvas,
-    shape,
-    type,
-    pe,
-    unitX,
-    unitY,
-    size,
-    source,
-    sw,
-    filled
-  ) {
-    const nx = unitX * (size + sw + 1);
-    const ny = unitY * (size + sw + 1);
+  Marker.addMarker(
+    'dash',
+    function (canvas, shape, type, pe, unitX, unitY, size, source, sw, filled) {
+      const nx = unitX * (size + sw + 1);
+      const ny = unitY * (size + sw + 1);
 
-    return function() {
-      canvas.begin();
-      canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
-      canvas.lineTo(
-        pe.x + ny / 2 - (3 * nx) / 2,
-        pe.y - (3 * ny) / 2 - nx / 2
-      );
-      canvas.stroke();
-    };
-  });
+      return function () {
+        canvas.begin();
+        canvas.moveTo(pe.x - nx / 2 - ny / 2, pe.y - ny / 2 + nx / 2);
+        canvas.lineTo(pe.x + ny / 2 - (3 * nx) / 2, pe.y - (3 * ny) / 2 - nx / 2);
+        canvas.stroke();
+      };
+    }
+  );
 
   // Defines custom message shape
-  class MessageShape extends mxCylinder {
+  class MessageShape extends CylinderShape {
     redrawPath(path, x, y, w, h, isForeground) {
       if (isForeground) {
         path.moveTo(0, 0);
@@ -76,10 +65,10 @@ const Template = ({ label, ...args }) => {
       }
     }
   }
-  mxCellRenderer.registerShape('message', MessageShape);
+  CellRenderer.registerShape('message', MessageShape);
 
   // Defines custom edge shape
-  class LinkShape extends mxArrow {
+  class LinkShape extends Arrow {
     paintEdgeShape(c, pts) {
       const width = 10;
 
@@ -121,10 +110,10 @@ const Template = ({ label, ...args }) => {
       c.stroke();
     }
   }
-  mxCellRenderer.registerShape('link', LinkShape);
+  CellRenderer.registerShape('link', LinkShape);
 
   // Creates the graph
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Sets default styles
   let style = graph.getStylesheet().getDefaultVertexStyle();
@@ -167,7 +156,7 @@ const Template = ({ label, ...args }) => {
       14,
       'shape=message;labelBackgroundColor=#ffffff;labelPosition=left;spacingRight=2;align=right;fontStyle=0;'
     );
-    e11.geometry.offset = new mxPoint(-10, -7);
+    e11.geometry.offset = new Point(-10, -7);
     e11.geometry.relative = true;
     e11.connectable = false;
 
@@ -215,6 +204,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Merge.stories.js b/packages/html/stories/Merge.stories.js
index fcd176d04..68f2db6a0 100644
--- a/packages/html/stories/Merge.stories.js
+++ b/packages/html/stories/Merge.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,18 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxPerimeter,
-    mxConstants,
-    mxRubberband
-  } = mxgraph;
+  const { Graph, Perimeter, Constants, Rubberband } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -29,34 +24,33 @@ const Template = ({ label, ...args }) => {
   container.style.background = 'url(/images/grid.gif)';
   container.style.cursor = 'default';
 
-  mxConstants.SHADOWCOLOR = '#c0c0c0';
+  Constants.SHADOWCOLOR = '#c0c0c0';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // No size handles, please...
   graph.setCellsResizable(false);
 
   // Makes all cells round with a white, bold label
   let style = graph.stylesheet.getDefaultVertexStyle();
-  style.shape = mxConstants.SHAPE_ELLIPSE;
-  style.perimiter = mxPerimeter.EllipsePerimeter;
+  style.shape = Constants.SHAPE_ELLIPSE;
+  style.perimiter = Perimeter.EllipsePerimeter;
   style.fontColor = 'white';
   style.gradientColor = 'white';
-  style.fontStyle = mxConstants.FONT_BOLD;
+  style.fontStyle = Constants.FONT_BOLD;
   style.fontSize = 14;
   style.shadow = true;
 
   // Makes all edge labels gray with a white background
   style = graph.stylesheet.getDefaultEdgeStyle();
   style.fontColor = 'gray';
-  style.fontStyle = mxConstants.FONT_BOLD;
+  style.fontStyle = Constants.FONT_BOLD;
   style.fontColor = 'black';
   style.strokeWidth = 2;
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -69,46 +63,10 @@ const Template = ({ label, ...args }) => {
 
   graph.getModel().beginUpdate();
   try {
-    const a = graph.insertVertex(
-      parent,
-      'a',
-      'A',
-      20,
-      20,
-      w,
-      h,
-      'fillColor=blue'
-    );
-    const b = graph.insertVertex(
-      parent,
-      'b',
-      'B',
-      20,
-      200,
-      w,
-      h,
-      'fillColor=blue'
-    );
-    const c = graph.insertVertex(
-      parent,
-      'c',
-      'C',
-      200,
-      20,
-      w,
-      h,
-      'fillColor=red'
-    );
-    const d = graph.insertVertex(
-      parent,
-      'd',
-      'D',
-      200,
-      200,
-      w,
-      h,
-      'fillColor=red'
-    );
+    const a = graph.insertVertex(parent, 'a', 'A', 20, 20, w, h, 'fillColor=blue');
+    const b = graph.insertVertex(parent, 'b', 'B', 20, 200, w, h, 'fillColor=blue');
+    const c = graph.insertVertex(parent, 'c', 'C', 200, 20, w, h, 'fillColor=red');
+    const d = graph.insertVertex(parent, 'd', 'D', 200, 200, w, h, 'fillColor=red');
     const ac = graph.insertEdge(
       parent,
       'ac',
@@ -139,7 +97,7 @@ const Template = ({ label, ...args }) => {
   }
 
   // Creates the second graph model (without a container)
-  const graph2 = new mxGraph();
+  const graph2 = new Graph();
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -149,46 +107,10 @@ const Template = ({ label, ...args }) => {
   // using custom ids for the vertices
   graph2.getModel().beginUpdate();
   try {
-    const c = graph2.insertVertex(
-      parent2,
-      'c',
-      'C',
-      200,
-      20,
-      w,
-      h,
-      'fillColor=green'
-    );
-    const d = graph2.insertVertex(
-      parent2,
-      'd',
-      'D',
-      200,
-      200,
-      w,
-      h,
-      'fillColor=green'
-    );
-    const e = graph2.insertVertex(
-      parent2,
-      'e',
-      'E',
-      400,
-      20,
-      w,
-      h,
-      'fillColor=green'
-    );
-    const f = graph2.insertVertex(
-      parent2,
-      'f',
-      'F',
-      400,
-      200,
-      w,
-      h,
-      'fillColor=green'
-    );
+    const c = graph2.insertVertex(parent2, 'c', 'C', 200, 20, w, h, 'fillColor=green');
+    const d = graph2.insertVertex(parent2, 'd', 'D', 200, 200, w, h, 'fillColor=green');
+    const e = graph2.insertVertex(parent2, 'e', 'E', 400, 20, w, h, 'fillColor=green');
+    const f = graph2.insertVertex(parent2, 'f', 'F', 400, 200, w, h, 'fillColor=green');
     const ce = graph2.insertEdge(
       parent2,
       'ce',
@@ -227,6 +149,6 @@ const Template = ({ label, ...args }) => {
   graph.getModel().mergeChildren(parent2, parent /* , false */);
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Monitor.stories.js b/packages/html/stories/Monitor.stories.js
index 6832d8974..b3b58b27c 100644
--- a/packages/html/stories/Monitor.stories.js
+++ b/packages/html/stories/Monitor.stories.js
@@ -1,26 +1,26 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Misc/Monitor',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxEdgeStyle,
+    Graph,
+    EdgeStyle,
     mxDomHelpers,
     mxXmlUtils,
-    mxPerimeter,
-    mxUtils,
-    mxConstants,
-    mxCloneUtils,
-    mxCodec
-  } = mxgraph;
+    Perimeter,
+    utils,
+    Constants,
+    CloneUtils,
+    mxCodec,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -33,50 +33,50 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
   div.appendChild(container);
 
-  mxConstants.SHADOWCOLOR = '#e0e0e0';
+  Constants.SHADOWCOLOR = '#e0e0e0';
 
   // Creates the graph inside the given container
   const graph = createGraph(container);
 
   // Creates a process display using the activity names as IDs to refer to the elements
   const xml =
-    '<Transactions><root><mxCell id="0"/><mxCell id="1" parent="0"/>' +
-    '<mxCell id="2" value="Claim Handling Process" style="swimlane" vertex="1" parent="1"><mxGeometry x="1" width="850" height="400" as="geometry"/></mxCell>' +
-    '<mxCell id="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" width="820" height="200" as="geometry"/></mxCell>' +
-    '<mxCell id="5" value="" style="start" vertex="1" parent="3"><mxGeometry x="40" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><mxGeometry x="90" y="80" width="100" height="40" as="geometry"/></mxCell>' +
-    '<mxCell id="6" value="X" style="step" vertex="1" parent="3"><mxGeometry x="210" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><mxGeometry x="260" y="80" width="100" height="40" as="geometry"/></mxCell>' +
-    '<mxCell id="7" value="X" style="step" vertex="1" parent="3"><mxGeometry x="380" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="9" value="" edge="1" parent="3" source="AuthorizeClaim" target="6"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="11" value="" edge="1" parent="3" source="ApproveClaim" target="7"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="12" value="" edge="1" parent="3" source="7" target="AuthorizeClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="140" y="40"/></Array></mxGeometry></mxCell>' +
-    '<mxCell id="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><mxGeometry x="480" y="80" width="100" height="40" as="geometry"/></mxCell>' +
-    '<mxCell id="22" value="X" style="step" vertex="1" parent="3"><mxGeometry x="600" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="ApproveReviewedClaim" value="Approve Rev.&#xa;Claim" vertex="1" parent="3"><mxGeometry x="650" y="80" width="100" height="40" as="geometry"/></mxCell>' +
-    '<mxCell id="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="27" value="X" style="step" vertex="1" parent="3"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="28" value="" edge="1" target="27" parent="3" source="ApproveReviewedClaim"><mxGeometry relative="1" as="geometry"><mxPoint x="740" y="100" as="sourcePoint"/><mxPoint x="760" y="100" as="targetPoint"/></mxGeometry></mxCell>' +
-    '<mxCell id="32" value="" edge="1" parent="3" source="27" target="ReviewClaim"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="665" y="160"/></Array></mxGeometry></mxCell>' +
-    '<mxCell id="4" value="Accountant" style="swimlane" vertex="1" parent="2"><mxGeometry x="30" y="200" width="820" height="200" as="geometry"/></mxCell>' +
-    '<mxCell id="EnterAccountingData" value="Enter&#xa;Data" vertex="1" parent="4"><mxGeometry x="430" y="80" width="100" height="40" as="geometry"/></mxCell>' +
-    '<mxCell id="14" value="X" style="step" vertex="1" parent="4"><mxGeometry x="550" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="CheckAccountingData" value="Check&#xa;Data" vertex="1" parent="4"><mxGeometry x="600" y="80" width="100" height="40" as="geometry"/></mxCell>' +
-    '<mxCell id="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="17" value="X" style="step" vertex="1" parent="4"><mxGeometry x="720" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="19" value="" style="end" vertex="1" parent="4"><mxGeometry x="770" y="85" width="30" height="30" as="geometry"/></mxCell>' +
-    '<mxCell id="20" value="" edge="1" parent="4" source="17" target="19"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="31" value="" edge="1" parent="4" source="17" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="625" y="160"/></Array></mxGeometry></mxCell>' +
-    '<mxCell id="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"/></mxCell>' +
-    '<mxCell id="24" value="" edge="1" parent="2" source="14" target="ReviewClaim" style="edgeStyle=none"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="595" y="180"/><mxPoint x="480" y="180"/><mxPoint x="480" y="100"/></Array></mxGeometry></mxCell>' +
-    '<mxCell id="29" value="" edge="1" parent="2" source="22" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>' +
-    '<mxCell id="30" value="" edge="1" parent="2" source="27" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="469" y="40"/></Array></mxGeometry></mxCell>' +
-    '<mxCell id="33" value="" edge="1" parent="2" source="6" target="EnterAccountingData"><mxGeometry relative="1" as="geometry"><Array as="points"><mxPoint x="255" y="200"/></Array></mxGeometry></mxCell>' +
+    '<Transactions><root><Cell id="0"/><Cell id="1" parent="0"/>' +
+    '<Cell id="2" value="Claim Handling Process" style="swimlane" vertex="1" parent="1"><Geometry x="1" width="850" height="400" as="geometry"/></Cell>' +
+    '<Cell id="3" value="Claim Manager" style="swimlane" vertex="1" parent="2"><Geometry x="30" width="820" height="200" as="geometry"/></Cell>' +
+    '<Cell id="5" value="" style="start" vertex="1" parent="3"><Geometry x="40" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="AuthorizeClaim" value="Authorize&#xa;Claim" vertex="1" parent="3"><Geometry x="90" y="80" width="100" height="40" as="geometry"/></Cell>' +
+    '<Cell id="6" value="X" style="step" vertex="1" parent="3"><Geometry x="210" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="ApproveClaim" value="Approve&#xa;Claim" vertex="1" parent="3"><Geometry x="260" y="80" width="100" height="40" as="geometry"/></Cell>' +
+    '<Cell id="7" value="X" style="step" vertex="1" parent="3"><Geometry x="380" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="8" value="" edge="1" parent="3" source="5" target="AuthorizeClaim"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="9" value="" edge="1" parent="3" source="AuthorizeClaim" target="6"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="10" value="" edge="1" parent="3" source="6" target="ApproveClaim"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="11" value="" edge="1" parent="3" source="ApproveClaim" target="7"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="12" value="" edge="1" parent="3" source="7" target="AuthorizeClaim"><Geometry relative="1" as="geometry"><Array as="points"><Point x="140" y="40"/></Array></Geometry></Cell>' +
+    '<Cell id="ReviewClaim" value="Review&#xa;Claim" vertex="1" parent="3"><Geometry x="480" y="80" width="100" height="40" as="geometry"/></Cell>' +
+    '<Cell id="22" value="X" style="step" vertex="1" parent="3"><Geometry x="600" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="23" value="" edge="1" parent="3" source="ReviewClaim" target="22"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="ApproveReviewedClaim" value="Approve Rev.&#xa;Claim" vertex="1" parent="3"><Geometry x="650" y="80" width="100" height="40" as="geometry"/></Cell>' +
+    '<Cell id="26" value="" edge="1" parent="3" source="22" target="ApproveReviewedClaim"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="27" value="X" style="step" vertex="1" parent="3"><Geometry x="770" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="28" value="" edge="1" target="27" parent="3" source="ApproveReviewedClaim"><Geometry relative="1" as="geometry"><Point x="740" y="100" as="sourcePoint"/><Point x="760" y="100" as="targetPoint"/></Geometry></Cell>' +
+    '<Cell id="32" value="" edge="1" parent="3" source="27" target="ReviewClaim"><Geometry relative="1" as="geometry"><Array as="points"><Point x="665" y="160"/></Array></Geometry></Cell>' +
+    '<Cell id="4" value="Accountant" style="swimlane" vertex="1" parent="2"><Geometry x="30" y="200" width="820" height="200" as="geometry"/></Cell>' +
+    '<Cell id="EnterAccountingData" value="Enter&#xa;Data" vertex="1" parent="4"><Geometry x="430" y="80" width="100" height="40" as="geometry"/></Cell>' +
+    '<Cell id="14" value="X" style="step" vertex="1" parent="4"><Geometry x="550" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="15" value="" edge="1" parent="4" source="EnterAccountingData" target="14"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="CheckAccountingData" value="Check&#xa;Data" vertex="1" parent="4"><Geometry x="600" y="80" width="100" height="40" as="geometry"/></Cell>' +
+    '<Cell id="16" value="" edge="1" parent="4" source="14" target="CheckAccountingData"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="17" value="X" style="step" vertex="1" parent="4"><Geometry x="720" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="18" value="" edge="1" parent="4" source="CheckAccountingData" target="17"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="19" value="" style="end" vertex="1" parent="4"><Geometry x="770" y="85" width="30" height="30" as="geometry"/></Cell>' +
+    '<Cell id="20" value="" edge="1" parent="4" source="17" target="19"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="31" value="" edge="1" parent="4" source="17" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="625" y="160"/></Array></Geometry></Cell>' +
+    '<Cell id="13" value="" edge="1" parent="2" source="7" target="EnterAccountingData"><Geometry relative="1" as="geometry"/></Cell>' +
+    '<Cell id="24" value="" edge="1" parent="2" source="14" target="ReviewClaim" style="edgeStyle=none"><Geometry relative="1" as="geometry"><Array as="points"><Point x="595" y="180"/><Point x="480" y="180"/><Point x="480" y="100"/></Array></Geometry></Cell>' +
+    '<Cell id="29" value="" edge="1" parent="2" source="22" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="469" y="40"/></Array></Geometry></Cell>' +
+    '<Cell id="30" value="" edge="1" parent="2" source="27" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="469" y="40"/></Array></Geometry></Cell>' +
+    '<Cell id="33" value="" edge="1" parent="2" source="6" target="EnterAccountingData"><Geometry relative="1" as="geometry"><Array as="points"><Point x="255" y="200"/></Array></Geometry></Cell>' +
     '</root></Transactions>';
   const doc = mxXmlUtils.parseXml(xml);
   const codec = new mxCodec(doc);
@@ -87,8 +87,8 @@ const Template = ({ label, ...args }) => {
 
   // Creates a button to invoke the refresh function
   buttons.appendChild(
-    mxDomHelpers.button('Update', function(evt) {
-      // XML is normally fetched from URL at server using mxUtils.get - this is a client-side
+    mxDomHelpers.button('Update', function (evt) {
+      // XML is normally fetched from URL at server using utils.get - this is a client-side
       // string with randomized states to demonstrate the idea of the workflow monitor
       const xml =
         `<process><update id="ApproveClaim" state="${getState()}"/><update id="AuthorizeClaim" state="${getState()}"/>` +
@@ -124,30 +124,16 @@ const Template = ({ label, ...args }) => {
               // Updates the cell color and adds some tooltip information
               if (cell != null) {
                 // Resets the fillcolor and the overlay
-                graph.setCellStyles('fillColor', 'white', [
-                  cell,
-                ]);
+                graph.setCellStyles('fillColor', 'white', [cell]);
                 graph.removeCellOverlays(cell);
 
                 // Changes the cell color for the known states
                 if (state == 'Running') {
-                  graph.setCellStyles(
-                    'fillColor',
-                    '#f8cecc',
-                    [cell]
-                  );
+                  graph.setCellStyles('fillColor', '#f8cecc', [cell]);
                 } else if (state == 'Waiting') {
-                  graph.setCellStyles(
-                    'fillColor',
-                    '#fff2cc',
-                    [cell]
-                  );
+                  graph.setCellStyles('fillColor', '#fff2cc', [cell]);
                 } else if (state == 'Completed') {
-                  graph.setCellStyles(
-                    'fillColor',
-                    '#d4e1f5',
-                    [cell]
-                  );
+                  graph.setCellStyles('fillColor', '#d4e1f5', [cell]);
                 }
 
                 // Adds tooltip information using an overlay icon
@@ -176,8 +162,8 @@ const Template = ({ label, ...args }) => {
     const overlay = new CellOverlay(image, tooltip);
 
     // Installs a handler for clicks on the overlay
-    overlay.addListener(mxEvent.CLICK, function(sender, evt) {
-      mxUtils.alert(`${tooltip}\nLast update: ${new Date()}`);
+    overlay.addListener(InternalEvent.CLICK, function (sender, evt) {
+      utils.alert(`${tooltip}\nLast update: ${new Date()}`);
     });
 
     return overlay;
@@ -187,12 +173,12 @@ const Template = ({ label, ...args }) => {
    * Creates and returns an empty graph inside the given container.
    */
   function createGraph(container) {
-    const graph = new mxGraph(container);
+    const graph = new Graph(container);
     graph.setTooltips(true);
     graph.setEnabled(false);
 
     // Disables folding
-    graph.isCellFoldable = function(cell, collapse) {
+    graph.isCellFoldable = function (cell, collapse) {
       return false;
     };
 
@@ -203,20 +189,20 @@ const Template = ({ label, ...args }) => {
     style.strokeColor = '#808080';
     style.fillColor = 'white';
     style.gradientColor = 'white';
-    style.gradientDirection = mxConstants.DIRECTION_EAST;
+    style.gradientDirection = Constants.DIRECTION_EAST;
     style.rounded = true;
     style.shadow = true;
     style.fontStyle = 1;
 
     style = graph.getStylesheet().getDefaultEdgeStyle();
-    style.edge = mxEdgeStyle.ElbowConnector;
+    style.edge = EdgeStyle.ElbowConnector;
     style.strokeColor = '#808080';
     style.rounded = true;
     style.shadow = true;
 
     style = [];
-    style.shape = mxConstants.SHAPE_SWIMLANE;
-    style.perimiter = mxPerimeter.RectanglePerimeter;
+    style.shape = Constants.SHAPE_SWIMLANE;
+    style.perimiter = Perimeter.RectanglePerimeter;
     style.strokeColor = '#a0a0a0';
     style.fontColor = '#606060';
     style.fillColor = '#E0E0DF';
@@ -232,30 +218,30 @@ const Template = ({ label, ...args }) => {
     graph.getStylesheet().putCellStyle('swimlane', style);
 
     style = [];
-    style.shape = mxConstants.SHAPE_RHOMBUS;
-    style.perimiter = mxPerimeter.RhombusPerimeter;
+    style.shape = Constants.SHAPE_RHOMBUS;
+    style.perimiter = Perimeter.RhombusPerimeter;
     style.strokeColor = '#91BCC0';
     style.fontColor = 'gray';
     style.fillColor = '#91BCC0';
     style.gradientColor = 'white';
-    style.align = mxConstants.ALIGN_CENTER;
-    style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+    style.align = Constants.ALIGN_CENTER;
+    style.verticalAlign = Constants.ALIGN_MIDDLE;
     style.fontSize = 16;
     graph.getStylesheet().putCellStyle('step', style);
 
     style = [];
-    style.shape = mxConstants.SHAPE_ELLIPSE;
-    style.perimiter = mxPerimeter.EllipsePerimeter;
+    style.shape = Constants.SHAPE_ELLIPSE;
+    style.perimiter = Perimeter.EllipsePerimeter;
     style.fontColor = 'gray';
     style.fillColor = '#A0C88F';
     style.gradientColor = 'white';
     style.strokeColor = '#A0C88F';
-    style.align = mxConstants.ALIGN_CENTER;
-    style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+    style.align = Constants.ALIGN_CENTER;
+    style.verticalAlign = Constants.ALIGN_MIDDLE;
     style.fontSize = 16;
     graph.getStylesheet().putCellStyle('start', style);
 
-    style = mxCloneUtils.clone(style);
+    style = CloneUtils.clone(style);
     style.fillColor = '#DACCBC';
     style.strokeColor = '#AF7F73';
     graph.getStylesheet().putCellStyle('end', style);
@@ -282,6 +268,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Morph.stories.js b/packages/html/stories/Morph.stories.js
index e54bcdb0e..64e7e3302 100644
--- a/packages/html/stories/Morph.stories.js
+++ b/packages/html/stories/Morph.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,23 +8,17 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxDomHelpers,
-    mxMorphing,
-    mxEvent,
-    mxRubberband
-  } = mxgraph;
+  const { Graph, mxDomHelpers, mxMorphing, InternalEvent, Rubberband } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -38,15 +32,13 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Disables the built-in context menu
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -71,7 +63,7 @@ const Template = ({ label, ...args }) => {
   div.appendChild(buttons);
 
   buttons.appendChild(
-    mxDomHelpers.button('Morph', function() {
+    mxDomHelpers.button('Morph', function () {
       graph.clearSelection();
 
       graph.getModel().beginUpdate();
@@ -88,7 +80,7 @@ const Template = ({ label, ...args }) => {
       } finally {
         // Arguments are number of steps, ease and delay
         const morph = new mxMorphing(graph, 20, 1.2, 20);
-        morph.addListener(mxEvent.DONE, function() {
+        morph.addListener(InternalEvent.DONE, function () {
           graph.getModel().endUpdate();
         });
         morph.startAnimation();
@@ -99,6 +91,6 @@ const Template = ({ label, ...args }) => {
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/OffPage.stories.js b/packages/html/stories/OffPage.stories.js
index 0e27e7002..67e59a4d0 100644
--- a/packages/html/stories/OffPage.stories.js
+++ b/packages/html/stories/OffPage.stories.js
@@ -1,21 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Zoom_OffPage/OffPage',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxCellTracker,
-    mxConstants,
-    mxEvent
-  } = mxgraph;
+  const { Graph, CellTracker, Constants, InternalEvent } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -26,21 +21,17 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Use complete cell as highlight region
-  mxConstants.ACTIVE_REGION = 1;
+  Constants.ACTIVE_REGION = 1;
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setEnabled(false);
 
   // Highlights offpage connectors
-  const highlight = new mxCellTracker(graph, null, function(me) {
+  const highlight = new CellTracker(graph, null, function (me) {
     const cell = me.getCell();
 
-    if (
-      cell != null &&
-      cell.value != null &&
-      typeof cell.value.create === 'function'
-    ) {
+    if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
       return cell;
     }
 
@@ -49,26 +40,18 @@ const Template = ({ label, ...args }) => {
 
   // Handles clicks on offpage connectors and
   // executes function in user object
-  graph.addListener(mxEvent.CLICK, function(source, evt) {
+  graph.addListener(InternalEvent.CLICK, function (source, evt) {
     const cell = evt.getProperty('cell');
 
-    if (
-      cell != null &&
-      cell.value != null &&
-      typeof cell.value.create === 'function'
-    ) {
+    if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
       cell.value.create();
     }
   });
 
   // Handles clicks on offpage connectors and
   // executes function in user object
-  graph.getCursorForCell = function(cell) {
-    if (
-      cell != null &&
-      cell.value != null &&
-      typeof cell.value.create === 'function'
-    ) {
+  graph.getCursorForCell = function (cell) {
+    if (cell != null && cell.value != null && typeof cell.value.create === 'function') {
       return 'pointer';
     }
   };
@@ -78,7 +61,7 @@ const Template = ({ label, ...args }) => {
   let first = null;
   let second = null;
 
-  first = function() {
+  first = function () {
     const value = {
       toString() {
         return 'Next';
@@ -122,21 +105,14 @@ const Template = ({ label, ...args }) => {
         40,
         'shape=triangle;align=left;fillColor=#C3D9FF;strokeColor=#4096EE'
       );
-      const e1 = graph.insertEdge(
-        parent,
-        null,
-        null,
-        v1,
-        v2,
-        'strokeColor=#FF1A00'
-      );
+      const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#FF1A00');
     } finally {
       // Updates the display
       graph.getModel().endUpdate();
     }
   };
 
-  second = function() {
+  second = function () {
     const value = {
       toString() {
         return 'Prev';
@@ -180,14 +156,7 @@ const Template = ({ label, ...args }) => {
         40,
         'shape=triangle;align=right;fillColor=#C3D9FF;strokeColor=#4096EE;direction=west'
       );
-      const e1 = graph.insertEdge(
-        parent,
-        null,
-        null,
-        v1,
-        v2,
-        'strokeColor=#008C00'
-      );
+      const e1 = graph.insertEdge(parent, null, null, v1, v2, 'strokeColor=#008C00');
     } finally {
       // Updates the display
       graph.getModel().endUpdate();
@@ -197,6 +166,6 @@ const Template = ({ label, ...args }) => {
   first();
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/OrgChart.stories.js b/packages/html/stories/OrgChart.stories.js
index fe531188c..f848ebf72 100644
--- a/packages/html/stories/OrgChart.stories.js
+++ b/packages/html/stories/OrgChart.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,28 +8,28 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
-    }
-  }
+      defaultValue: false,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxConstants,
-    mxEvent,
+    Graph,
+    Constants,
+    InternalEvent,
     mxClient,
-    mxPoint,
-    mxOutline,
-    mxEdgeStyle,
+    Point,
+    Outline,
+    EdgeStyle,
     mxKeyHandler,
-    mxCompactTreeLayout,
-    mxLayoutManager,
-    mxCellOverlay,
-    mxImage,
-    mxUtils,
-    mxToolbar
-  } = mxgraph;
+    CompactTreeLayout,
+    LayoutManager,
+    CellOverlay,
+    ImageBox,
+    utils,
+    mxToolbar,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -43,24 +43,22 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Makes the shadow brighter
-  mxConstants.SHADOWCOLOR = '#C0C0C0';
+  Constants.SHADOWCOLOR = '#C0C0C0';
 
   const outline = document.getElementById('outlineContainer');
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Sets a gradient background
   if (mxClient.IS_GC || mxClient.IS_SF) {
     container.style.background =
       '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E7E7E7))';
   } else if (mxClient.IS_NS) {
-    container.style.background =
-      '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';
+    container.style.background = '-moz-linear-gradient(top, #FFFFFF, #E7E7E7)';
   }
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Enables automatic sizing for vertices after editing and
   // panning by using the left mouse button.
@@ -78,7 +76,7 @@ const Template = ({ label, ...args }) => {
 
   // Creates the outline (navigator, overview) for moving
   // around the graph in the top, right corner of the window.
-  const outln = new mxOutline(graph, outline);
+  const outln = new Outline(graph, outline);
 
   // Disables tooltips on touch devices
   graph.setTooltips(!mxClient.IS_TOUCH);
@@ -87,8 +85,8 @@ const Template = ({ label, ...args }) => {
   let style = graph.getStylesheet().getDefaultVertexStyle();
   style.shape = 'label';
 
-  style.verticalAlign = mxConstants.ALIGN_MIDDLE;
-  style.align = mxConstants.ALIGN_LEFT;
+  style.verticalAlign = Constants.ALIGN_MIDDLE;
+  style.align = Constants.ALIGN_LEFT;
   style.spacingLeft = 54;
 
   style.gradientColor = '#7d85df';
@@ -121,7 +119,7 @@ const Template = ({ label, ...args }) => {
   style.entryPerimeter = 0; // disabled
 
   // Disable the following for straight lines
-  style.edge = mxEdgeStyle.TopToBottom;
+  style.edge = EdgeStyle.TopToBottom;
 
   // Stops editing on enter or escape keypress
   const keyHandler = new mxKeyHandler(graph);
@@ -129,7 +127,7 @@ const Template = ({ label, ...args }) => {
   // Enables automatic layout on the graph and installs
   // a tree layout for all groups who's children are
   // being changed, added or removed.
-  const layout = new mxCompactTreeLayout(graph, false);
+  const layout = new CompactTreeLayout(graph, false);
   layout.useBoundingBox = false;
   layout.edgeRouting = false;
   layout.levelDistance = 60;
@@ -137,26 +135,26 @@ const Template = ({ label, ...args }) => {
 
   // Allows the layout to move cells even though cells
   // aren't movable in the graph
-  layout.isVertexMovable = function(cell) {
+  layout.isVertexMovable = function (cell) {
     return true;
   };
 
-  const layoutMgr = new mxLayoutManager(graph);
+  const layoutMgr = new LayoutManager(graph);
 
-  layoutMgr.getLayout = function(cell) {
+  layoutMgr.getLayout = function (cell) {
     if (cell.getChildCount() > 0) {
       return layout;
     }
   };
 
   // Installs a popupmenu handler using local function (see below).
-  graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
+  graph.popupMenuHandler.factoryMethod = function (menu, cell, evt) {
     return createPopupMenu(graph, menu, cell, evt);
   };
 
   // Fix for wrong preferred size
   const oldGetPreferredSizeForCell = graph.getPreferredSizeForCell;
-  graph.getPreferredSizeForCell = function(cell) {
+  graph.getPreferredSizeForCell = function (cell) {
     const result = oldGetPreferredSizeForCell.apply(this, arguments);
 
     if (result != null) {
@@ -167,13 +165,13 @@ const Template = ({ label, ...args }) => {
   };
 
   // Sets the maximum text scale to 1
-  graph.cellRenderer.getTextScale = function(state) {
+  graph.cellRenderer.getTextScale = function (state) {
     return Math.min(1, state.view.scale);
   };
 
   // Dynamically adds text to the label as we zoom in
   // (without affecting the preferred size for new cells)
-  graph.cellRenderer.getLabelValue = function(state) {
+  graph.cellRenderer.getLabelValue = function (state) {
     let result = state.cell.value;
 
     if (state.cell.isVertex()) {
@@ -219,28 +217,28 @@ const Template = ({ label, ...args }) => {
   div.appendChild(content);
   const tb = new mxToolbar(content);
 
-  tb.addItem('Zoom In', 'images/zoom_in32.png', function(evt) {
+  tb.addItem('Zoom In', 'images/zoom_in32.png', function (evt) {
     graph.zoomIn();
   });
 
-  tb.addItem('Zoom Out', 'images/zoom_out32.png', function(evt) {
+  tb.addItem('Zoom Out', 'images/zoom_out32.png', function (evt) {
     graph.zoomOut();
   });
 
-  tb.addItem('Actual Size', 'images/view_1_132.png', function(evt) {
+  tb.addItem('Actual Size', 'images/view_1_132.png', function (evt) {
     graph.zoomActual();
   });
 
-  tb.addItem('Print', 'images/print32.png', function(evt) {
+  tb.addItem('Print', 'images/print32.png', function (evt) {
     const preview = new PrintPreview(graph, 1);
     preview.open();
   });
 
-  tb.addItem('Poster Print', 'images/press32.png', function(evt) {
-    const pageCount = mxUtils.prompt('Enter maximum page count', '1');
+  tb.addItem('Poster Print', 'images/press32.png', function (evt) {
+    const pageCount = utils.prompt('Enter maximum page count', '1');
 
     if (pageCount != null) {
-      const scale = mxUtils.getScaleForPageCount(pageCount, graph);
+      const scale = utils.getScaleForPageCount(pageCount, graph);
       const preview = new PrintPreview(graph, scale);
       preview.open();
     }
@@ -252,21 +250,17 @@ const Template = ({ label, ...args }) => {
 
     if (cell != null) {
       if (cell.isVertex()) {
-        menu.addItem(
-          'Add child',
-          '/images/overlays/check.png',
-          function() {
-            addChild(graph, cell);
-          }
-        );
+        menu.addItem('Add child', '/images/overlays/check.png', function () {
+          addChild(graph, cell);
+        });
       }
 
-      menu.addItem('Edit label', '/images/text.gif', function() {
+      menu.addItem('Edit label', '/images/text.gif', function () {
         graph.startEditingAtCell(cell);
       });
 
       if (cell.id != 'treeRoot' && cell.isVertex()) {
-        menu.addItem('Delete', '/images/delete.gif', function() {
+        menu.addItem('Delete', '/images/delete.gif', function () {
           deleteSubtree(graph, cell);
         });
       }
@@ -274,26 +268,26 @@ const Template = ({ label, ...args }) => {
       menu.addSeparator();
     }
 
-    menu.addItem('Fit', '/images/zoom.gif', function() {
+    menu.addItem('Fit', '/images/zoom.gif', function () {
       graph.fit();
     });
 
-    menu.addItem('Actual', '/images/zoomactual.gif', function() {
+    menu.addItem('Actual', '/images/zoomactual.gif', function () {
       graph.zoomActual();
     });
 
     menu.addSeparator();
 
-    menu.addItem('Print', '/images/print.gif', function() {
+    menu.addItem('Print', '/images/print.gif', function () {
       const preview = new PrintPreview(graph, 1);
       preview.open();
     });
 
-    menu.addItem('Poster Print', '/images/print.gif', function() {
-      const pageCount = mxUtils.prompt('Enter maximum page count', '1');
+    menu.addItem('Poster Print', '/images/print.gif', function () {
+      const pageCount = utils.prompt('Enter maximum page count', '1');
 
       if (pageCount != null) {
-        const scale = mxUtils.getScaleForPageCount(pageCount, graph);
+        const scale = utils.getScaleForPageCount(pageCount, graph);
         const preview = new PrintPreview(graph, scale);
         preview.open();
       }
@@ -301,36 +295,24 @@ const Template = ({ label, ...args }) => {
   }
 
   function addOverlays(graph, cell, addDeleteIcon) {
-    let overlay = new mxCellOverlay(
-      new mxImage('images/add.png', 24, 24),
-      'Add child'
-    );
+    let overlay = new CellOverlay(new ImageBox('images/add.png', 24, 24), 'Add child');
     overlay.cursor = 'hand';
-    overlay.align = mxConstants.ALIGN_CENTER;
-    overlay.addListener(
-      mxEvent.CLICK,
-      (sender, evt) => {
-        addChild(graph, cell);
-      }
-    );
+    overlay.align = Constants.ALIGN_CENTER;
+    overlay.addListener(InternalEvent.CLICK, (sender, evt) => {
+      addChild(graph, cell);
+    });
 
     graph.addCellOverlay(cell, overlay);
 
     if (addDeleteIcon) {
-      overlay = new mxCellOverlay(
-        new mxImage('images/close.png', 30, 30),
-        'Delete'
-      );
+      overlay = new CellOverlay(new ImageBox('images/close.png', 30, 30), 'Delete');
       overlay.cursor = 'hand';
-      overlay.offset = new mxPoint(-4, 8);
-      overlay.align = mxConstants.ALIGN_RIGHT;
-      overlay.verticalAlign = mxConstants.ALIGN_TOP;
-      overlay.addListener(
-        mxEvent.CLICK,
-        (sender, evt) => {
-          deleteSubtree(graph, cell);
-        }
-      );
+      overlay.offset = new Point(-4, 8);
+      overlay.align = Constants.ALIGN_RIGHT;
+      overlay.verticalAlign = Constants.ALIGN_TOP;
+      overlay.addListener(InternalEvent.CLICK, (sender, evt) => {
+        deleteSubtree(graph, cell);
+      });
 
       graph.addCellOverlay(cell, overlay);
     }
@@ -362,7 +344,7 @@ const Template = ({ label, ...args }) => {
       // of 20 pixels in negative, vertical direction.
       edge.geometry.x = 1;
       edge.geometry.y = 0;
-      edge.geometry.offset = new mxPoint(0, -20);
+      edge.geometry.offset = new Point(0, -20);
 
       addOverlays(graph, vertex, true);
     } finally {
@@ -375,7 +357,7 @@ const Template = ({ label, ...args }) => {
   function deleteSubtree(graph, cell) {
     // Gets the subtree from cell downwards
     const cells = [];
-    graph.traverse(cell, true, function(vertex) {
+    graph.traverse(cell, true, function (vertex) {
       cells.push(vertex);
 
       return true;
@@ -385,6 +367,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Orthogonal.stories.js b/packages/html/stories/Orthogonal.stories.js
index c4fe41f55..09e034aaa 100644
--- a/packages/html/stories/Orthogonal.stories.js
+++ b/packages/html/stories/Orthogonal.stories.js
@@ -1,27 +1,27 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Connections/Orthogonal',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxRubberband, 
-    mxConnectionHandler, 
-    mxGraphHandler,
-    mxGuide,
-    mxPoint,
-    mxCellState,
-    mxEdgeHandler,
-    mxGraphView,
-    mxEvent
-  } = mxgraph;
+    Graph,
+    Rubberband,
+    ConnectionHandler,
+    GraphHandler,
+    Guide,
+    Point,
+    CellState,
+    EdgeHandler,
+    GraphView,
+    InternalEvent,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -32,21 +32,21 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Enables guides
-  mxGraphHandler.prototype.guidesEnabled = true;
+  GraphHandler.prototype.guidesEnabled = true;
 
   // Alt disables guides
-  mxGuide.prototype.isEnabledForEvent = function(evt) {
-    return !mxEvent.isAltDown(evt);
+  Guide.prototype.isEnabledForEvent = function (evt) {
+    return !InternalEvent.isAltDown(evt);
   };
 
   // Enables snapping waypoints to terminals
-  mxEdgeHandler.prototype.snapToTerminals = true;
+  EdgeHandler.prototype.snapToTerminals = true;
 
   // Enables orthogonal connect preview in IE
-  mxConnectionHandler.prototype.movePreviewAway = false;
+  ConnectionHandler.prototype.movePreviewAway = false;
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.disconnectOnMove = false;
   graph.foldingEnabled = false;
   graph.cellsResizable = false;
@@ -54,46 +54,29 @@ const Template = ({ label, ...args }) => {
   graph.setConnectable(true);
 
   // Implements perimeter-less connection points as fixed points (computed before the edge style).
-  graph.view.updateFixedTerminalPoint = function(
-    edge,
-    terminal,
-    source,
-    constraint
-  ) {
-    mxGraphView.prototype.updateFixedTerminalPoint.apply(this, arguments);
+  graph.view.updateFixedTerminalPoint = function (edge, terminal, source, constraint) {
+    GraphView.prototype.updateFixedTerminalPoint.apply(this, arguments);
 
     const pts = edge.absolutePoints;
     const pt = pts[source ? 0 : pts.length - 1];
 
-    if (
-      terminal != null &&
-      pt == null &&
-      this.getPerimeterFunction(terminal) == null
-    ) {
+    if (terminal != null && pt == null && this.getPerimeterFunction(terminal) == null) {
       edge.setAbsoluteTerminalPoint(
-        new mxPoint(
-          this.getRoutingCenterX(terminal),
-          this.getRoutingCenterY(terminal)
-        ),
+        new Point(this.getRoutingCenterX(terminal), this.getRoutingCenterY(terminal)),
         source
       );
     }
   };
 
   // Changes the default edge style
-  graph.getStylesheet().getDefaultEdgeStyle().edgeStyle =
-    'orthogonalEdgeStyle';
+  graph.getStylesheet().getDefaultEdgeStyle().edgeStyle = 'orthogonalEdgeStyle';
   delete graph.getStylesheet().getDefaultEdgeStyle().endArrow;
 
   // Implements the connect preview
-  graph.connectionHandler.createEdgeState = function(me) {
+  graph.connectionHandler.createEdgeState = function (me) {
     const edge = graph.createEdge(null, null, null, null, null);
 
-    return new mxCellState(
-      this.graph.view,
-      edge,
-      this.graph.getCellStyle(edge)
-    );
+    return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
   };
 
   // Uncomment the following if you want the container
@@ -101,8 +84,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -124,7 +106,7 @@ const Template = ({ label, ...args }) => {
       'portConstraint=northsouth;',
       true
     );
-    v11.geometry.offset = new mxPoint(-5, -5);
+    v11.geometry.offset = new Point(-5, -5);
     const v12 = graph.insertVertex(
       v1,
       null,
@@ -137,7 +119,7 @@ const Template = ({ label, ...args }) => {
         'routingCenterX=-0.5;routingCenterY=0;',
       true
     );
-    v12.geometry.offset = new mxPoint(-10, -5);
+    v12.geometry.offset = new Point(-10, -5);
     const v13 = graph.insertVertex(
       v1,
       null,
@@ -150,7 +132,7 @@ const Template = ({ label, ...args }) => {
         'routingCenterX=0.5;routingCenterY=0;',
       true
     );
-    v13.geometry.offset = new mxPoint(0, -5);
+    v13.geometry.offset = new Point(0, -5);
 
     const v2 = graph.addCell(graph.getModel().cloneCell(v1));
     v2.geometry.x = 200;
@@ -173,6 +155,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Overlays.stories.js b/packages/html/stories/Overlays.stories.js
index 3f45e26a1..5ac85507f 100644
--- a/packages/html/stories/Overlays.stories.js
+++ b/packages/html/stories/Overlays.stories.js
@@ -1,23 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Effects/Overlays',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph, 
-    mxCellOverlay,
-    mxEvent,
-    mxCellTracker,
-    mxUtils,
-    mxImage
-  } = mxgraph;
+  const { Graph, CellOverlay, InternalEvent, CellTracker, utils, ImageBox } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -28,20 +21,20 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Disables basic selection and cell handling
   graph.setEnabled(false);
 
   // Highlights the vertices when the mouse enters
-  const highlight = new mxCellTracker(graph, '#00FF00');
+  const highlight = new CellTracker(graph, '#00FF00');
 
   // Enables tooltips for the overlays
   graph.setTooltips(true);
 
   // Installs a handler for click events in the graph
   // that toggles the overlay for the respective cell
-  graph.addListener(mxEvent.CLICK, (sender, evt) => {
+  graph.addListener(InternalEvent.CLICK, (sender, evt) => {
     const cell = evt.getProperty('cell');
 
     if (cell != null) {
@@ -49,14 +42,14 @@ const Template = ({ label, ...args }) => {
 
       if (overlays == null) {
         // Creates a new overlay with an image and a tooltip
-        const overlay = new mxCellOverlay(
-          new mxImage('/images/check.png', 16, 16),
+        const overlay = new CellOverlay(
+          new ImageBox('/images/check.png', 16, 16),
           'Overlay tooltip'
         );
 
         // Installs a handler for clicks on the overlay
-        overlay.addListener(mxEvent.CLICK, (sender, evt2) => {
-          mxUtils.alert('Overlay clicked');
+        overlay.addListener(InternalEvent.CLICK, (sender, evt2) => {
+          utils.alert('Overlay clicked');
         });
 
         // Sets the overlay for the cell in the graph
@@ -69,7 +62,7 @@ const Template = ({ label, ...args }) => {
 
   // Installs a handler for double click events in the graph
   // that shows an alert box
-  graph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {
+  graph.addListener(InternalEvent.DOUBLE_CLICK, (sender, evt) => {
     const cell = evt.getProperty('cell');
     alert(`Doubleclick: ${cell != null ? 'Cell' : 'Graph'}`);
     evt.consume();
@@ -101,6 +94,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/PageBreaks.stories.js b/packages/html/stories/PageBreaks.stories.js
index 2b2333333..23842d4e4 100644
--- a/packages/html/stories/PageBreaks.stories.js
+++ b/packages/html/stories/PageBreaks.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,23 +8,17 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxRectangle,
-    mxRubberband,
-    mxDomHelpers,
-    mxEvent
-  } = mxgraph;
+  const { Graph, Rectangle, Rubberband, mxDomHelpers, InternalEvent } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -37,11 +31,10 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
   div.appendChild(container);
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.view.setScale(0.15);
   graph.pageBreaksVisible = true;
   graph.pageBreakDashed = true;
@@ -60,8 +53,7 @@ const Template = ({ label, ...args }) => {
   graph.graphHandler.scaleGrid = true;
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -90,38 +82,38 @@ const Template = ({ label, ...args }) => {
   div.appendChild(buttons);
 
   buttons.appendChild(
-    mxDomHelpers.button('Toggle Page Breaks', function(evt) {
+    mxDomHelpers.button('Toggle Page Breaks', function (evt) {
       graph.pageBreaksVisible = !graph.pageBreaksVisible;
       graph.sizeDidChange();
     })
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('Zoom In', function(evt) {
+    mxDomHelpers.button('Zoom In', function (evt) {
       graph.zoomIn();
     })
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('Zoom Out', function(evt) {
+    mxDomHelpers.button('Zoom Out', function (evt) {
       graph.zoomOut();
     })
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('Print', function(evt) {
+    mxDomHelpers.button('Print', function (evt) {
       // Matches actual printer paper size and avoids blank pages
       const scale = 0.5;
 
       // Applies scale to page
-      const pf = mxRectangle.fromRectangle(
-        graph.pageFormat || mxConstants.PAGE_FORMAT_A4_PORTRAIT
+      const pf = Rectangle.fromRectangle(
+        graph.pageFormat || Constants.PAGE_FORMAT_A4_PORTRAIT
       );
       pf.width = Math.round(pf.width * scale * graph.pageScale);
       pf.height = Math.round(pf.height * scale * graph.pageScale);
 
       // Finds top left corner of top left page
-      const bounds = mxRectangle.fromRectangle(graph.getGraphBounds());
+      const bounds = Rectangle.fromRectangle(graph.getGraphBounds());
       bounds.x -= graph.view.translate.x * graph.view.scale;
       bounds.y -= graph.view.translate.y * graph.view.scale;
 
@@ -134,7 +126,7 @@ const Template = ({ label, ...args }) => {
       preview.autoOrigin = false;
 
       const oldRenderPage = preview.renderPage;
-      preview.renderPage = function(w, h, x, y, content, pageNumber) {
+      preview.renderPage = function (w, h, x, y, content, pageNumber) {
         const div = oldRenderPage.apply(this, arguments);
 
         const header = document.createElement('div');
@@ -172,12 +164,12 @@ const Template = ({ label, ...args }) => {
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('Reset View', function(evt) {
+    mxDomHelpers.button('Reset View', function (evt) {
       graph.view.scaleAndTranslate(0.15, 0, 0);
     })
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Perimeter.stories.js b/packages/html/stories/Perimeter.stories.js
index 01806ac03..2cc801d8d 100644
--- a/packages/html/stories/Perimeter.stories.js
+++ b/packages/html/stories/Perimeter.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,18 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxRubberband,
-    mxGraphView,
-    mxUtils
-  } = mxgraph;
+  const { Graph, Rubberband, GraphView, utils } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -31,14 +26,8 @@ const Template = ({ label, ...args }) => {
 
   // Redirects the perimeter to the label bounds if intersection
   // between edge and label is found
-  const mxGraphViewGetPerimeterPoint =
-    mxGraphView.prototype.getPerimeterPoint;
-  mxGraphView.prototype.getPerimeterPoint = function(
-    terminal,
-    next,
-    orthogonal,
-    border
-  ) {
+  const mxGraphViewGetPerimeterPoint = GraphView.prototype.getPerimeterPoint;
+  GraphView.prototype.getPerimeterPoint = function (terminal, next, orthogonal, border) {
     let point = mxGraphViewGetPerimeterPoint.apply(this, arguments);
 
     if (point != null) {
@@ -49,7 +38,7 @@ const Template = ({ label, ...args }) => {
         const b = terminal.text.boundingBox.clone();
         b.grow(3);
 
-        if (mxUtils.rectangleIntersectsSegment(b, point, next)) {
+        if (utils.rectangleIntersectsSegment(b, point, next)) {
           point = perimeter(b, terminal, next, orthogonal);
         }
       }
@@ -59,7 +48,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setVertexLabelsMovable(true);
   graph.setConnectable(true);
 
@@ -68,8 +57,7 @@ const Template = ({ label, ...args }) => {
   // graph.setResizeContainer(true);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -116,6 +104,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Permissions.stories.js b/packages/html/stories/Permissions.stories.js
index 5468571aa..8cc71329f 100644
--- a/packages/html/stories/Permissions.stories.js
+++ b/packages/html/stories/Permissions.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,20 +8,20 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxConnectionHandler,
-    mxImage,
-    mxRubberband,
+    Graph,
+    ConnectionHandler,
+    ImageBox,
+    Rubberband,
     mxKeyHandler,
-    mxDomHelpers
-  } = mxgraph;
+    mxDomHelpers,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -36,27 +36,22 @@ const Template = ({ label, ...args }) => {
 
   // Defines an icon for creating new connections in the connection handler.
   // This will automatically disable the highlighting of the source vertex.
-  mxConnectionHandler.prototype.connectImage = new mxImage(
-    'images/connector.gif',
-    16,
-    16
-  );
+  ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Enable tooltips, disables mutligraphs, enable loops
   graph.setMultigraph(false);
   graph.setAllowLoops(true);
 
   // Enables rubberband selection and key handling
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   const keyHandler = new mxKeyHandler(graph);
 
   // Assigns the delete key
-  keyHandler.bindKey(46, function(evt) {
+  keyHandler.bindKey(46, function (evt) {
     if (graph.isEnabled()) {
       graph.removeCells();
     }
@@ -66,7 +61,7 @@ const Template = ({ label, ...args }) => {
   // aka "private" variable
   let currentPermission = null;
 
-  const apply = function(permission) {
+  const apply = function (permission) {
     graph.clearSelection();
     permission.apply(graph);
     graph.setEnabled(true);
@@ -83,37 +78,37 @@ const Template = ({ label, ...args }) => {
   const buttons = document.createElement('div');
   div.appendChild(buttons);
 
-  let button = mxDomHelpers.button('Allow All', function(evt) {
+  let button = mxDomHelpers.button('Allow All', function (evt) {
     apply(new Permission());
   });
   buttons.appendChild(button);
 
-  button = mxDomHelpers.button('Connect Only', function(evt) {
+  button = mxDomHelpers.button('Connect Only', function (evt) {
     apply(new Permission(false, true, false, false, true));
   });
   buttons.appendChild(button);
 
-  button = mxDomHelpers.button('Edges Only', function(evt) {
+  button = mxDomHelpers.button('Edges Only', function (evt) {
     apply(new Permission(false, false, true, false, false));
   });
   buttons.appendChild(button);
 
-  button = mxDomHelpers.button('Vertices Only', function(evt) {
+  button = mxDomHelpers.button('Vertices Only', function (evt) {
     apply(new Permission(false, false, false, true, false));
   });
   buttons.appendChild(button);
 
-  button = mxDomHelpers.button('Select Only', function(evt) {
+  button = mxDomHelpers.button('Select Only', function (evt) {
     apply(new Permission(false, false, false, false, false));
   });
   buttons.appendChild(button);
 
-  button = mxDomHelpers.button('Locked', function(evt) {
+  button = mxDomHelpers.button('Locked', function (evt) {
     apply(new Permission(true, false));
   });
   buttons.appendChild(button);
 
-  button = mxDomHelpers.button('Disabled', function(evt) {
+  button = mxDomHelpers.button('Disabled', function (evt) {
     graph.clearSelection();
     graph.setEnabled(false);
     graph.setTooltips(false);
@@ -128,48 +123,37 @@ const Template = ({ label, ...args }) => {
   // specification for more functions to extend (eg.
   // isSelectable).
   const oldDisconnectable = graph.isCellDisconnectable;
-  graph.isCellDisconnectable = function(cell, terminal, source) {
-    return (
-      oldDisconnectable.apply(this, arguments) && currentPermission.editEdges
-    );
+  graph.isCellDisconnectable = function (cell, terminal, source) {
+    return oldDisconnectable.apply(this, arguments) && currentPermission.editEdges;
   };
 
   const oldTerminalPointMovable = graph.isTerminalPointMovable;
-  graph.isTerminalPointMovable = function(cell) {
-    return (
-      oldTerminalPointMovable.apply(this, arguments) &&
-      currentPermission.editEdges
-    );
+  graph.isTerminalPointMovable = function (cell) {
+    return oldTerminalPointMovable.apply(this, arguments) && currentPermission.editEdges;
   };
 
   const oldBendable = graph.isCellBendable;
-  graph.isCellBendable = function(cell) {
+  graph.isCellBendable = function (cell) {
     return oldBendable.apply(this, arguments) && currentPermission.editEdges;
   };
 
   const oldLabelMovable = graph.isLabelMovable;
-  graph.isLabelMovable = function(cell) {
-    return (
-      oldLabelMovable.apply(this, arguments) && currentPermission.editEdges
-    );
+  graph.isLabelMovable = function (cell) {
+    return oldLabelMovable.apply(this, arguments) && currentPermission.editEdges;
   };
 
   const oldMovable = graph.isCellMovable;
-  graph.isCellMovable = function(cell) {
-    return (
-      oldMovable.apply(this, arguments) && currentPermission.editVertices
-    );
+  graph.isCellMovable = function (cell) {
+    return oldMovable.apply(this, arguments) && currentPermission.editVertices;
   };
 
   const oldResizable = graph.isCellResizable;
-  graph.isCellResizable = function(cell) {
-    return (
-      oldResizable.apply(this, arguments) && currentPermission.editVertices
-    );
+  graph.isCellResizable = function (cell) {
+    return oldResizable.apply(this, arguments) && currentPermission.editVertices;
   };
 
   const oldEditable = graph.isCellEditable;
-  graph.isCellEditable = function(cell) {
+  graph.isCellEditable = function (cell) {
     return (
       (oldEditable.apply(this, arguments) &&
         cell.isVertex() &&
@@ -179,7 +163,7 @@ const Template = ({ label, ...args }) => {
   };
 
   const oldDeletable = graph.isCellDeletable;
-  graph.isCellDeletable = function(cell) {
+  graph.isCellDeletable = function (cell) {
     return (
       (oldDeletable.apply(this, arguments) &&
         cell.isVertex() &&
@@ -189,10 +173,8 @@ const Template = ({ label, ...args }) => {
   };
 
   const oldCloneable = graph.isCellCloneable;
-  graph.isCellCloneable = function(cell) {
-    return (
-      oldCloneable.apply(this, arguments) && currentPermission.cloneCells
-    );
+  graph.isCellCloneable = function (cell) {
+    return oldCloneable.apply(this, arguments) && currentPermission.cloneCells;
   };
 
   // Gets the default parent for inserting new cells. This
@@ -212,7 +194,7 @@ const Template = ({ label, ...args }) => {
   }
 
   return div;
-}
+};
 
 class Permission {
   constructor(locked, createEdges, editEdges, editVertices, cloneCells) {
@@ -229,4 +211,4 @@ class Permission {
   }
 }
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/PortRefs.stories.js b/packages/html/stories/PortRefs.stories.js
index 4017a8932..fed064cea 100644
--- a/packages/html/stories/PortRefs.stories.js
+++ b/packages/html/stories/PortRefs.stories.js
@@ -1,28 +1,28 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Connections/PortRefs',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph, 
-    mxRubberband, 
-    mxPoint,
-    mxEdgeHandler,
-    mxConstraintHandler,
-    mxImage,
-    mxShape,
-    mxTriangle,
-    mxConstants,
-    mxConnectionConstraint,
-    mxClient
-  } = mxgraph;
+    Graph,
+    Rubberband,
+    Point,
+    EdgeHandler,
+    ConstraintHandler,
+    ImageBox,
+    Shape,
+    TriangleShape,
+    Constants,
+    ConnectionConstraint,
+    mxClient,
+  } = maxgraph;
 
   mxClient.setImageBasePath('/images');
 
@@ -35,22 +35,18 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Replaces the port image
-  mxConstraintHandler.prototype.pointImage = new mxImage(
-    '/images/dot.gif',
-    10,
-    10
-  );
+  ConstraintHandler.prototype.pointImage = new ImageBox('/images/dot.gif', 10, 10);
 
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setConnectable(true);
 
   // Disables automatic handling of ports. This disables the reset of the
-  // respective style in mxGraph.cellConnected. Note that this feature may
+  // respective style in Graph.cellConnected. Note that this feature may
   // be useful if floating and fixed connections are combined.
   graph.setPortsEnabled(false);
 
   // Enables rubberband selection
-  new mxRubberband(graph);
+  new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -94,34 +90,30 @@ const Template = ({ label, ...args }) => {
   };
 
   // Extends shapes classes to return their ports
-  mxShape.prototype.getPorts = function() {
+  Shape.prototype.getPorts = function () {
     return ports;
   };
 
-  mxTriangle.prototype.getPorts = function() {
+  TriangleShape.prototype.getPorts = function () {
     return ports2;
   };
 
   // Disables floating connections (only connections via ports allowed)
-  graph.connectionHandler.isConnectableCell = function(cell) {
+  graph.connectionHandler.isConnectableCell = function (cell) {
     return false;
   };
-  mxEdgeHandler.prototype.isConnectableCell = function(cell) {
+  EdgeHandler.prototype.isConnectableCell = function (cell) {
     return graph.connectionHandler.isConnectableCell(cell);
   };
 
   // Disables existing port functionality
-  graph.view.getTerminalPort = function(state, terminal, source) {
+  graph.view.getTerminalPort = function (state, terminal, source) {
     return terminal;
   };
 
   // Returns all possible ports for a given terminal
-  graph.getAllConnectionConstraints = function(terminal, source) {
-    if (
-      terminal != null &&
-      terminal.shape != null &&
-      terminal.shape.stencil != null
-    ) {
+  graph.getAllConnectionConstraints = function (terminal, source) {
+    if (terminal != null && terminal.shape != null && terminal.shape.stencil != null) {
       // for stencils with existing constraints...
       if (terminal.shape.stencil != null) {
         return terminal.shape.stencil.constraints;
@@ -134,8 +126,8 @@ const Template = ({ label, ...args }) => {
         for (const id in ports) {
           const port = ports[id];
 
-          const cstr = new mxConnectionConstraint(
-            new mxPoint(port.x, port.y),
+          const cstr = new ConnectionConstraint(
+            new Point(port.x, port.y),
             port.perimeter
           );
           cstr.id = id;
@@ -150,16 +142,9 @@ const Template = ({ label, ...args }) => {
   };
 
   // Sets the port for the given connection
-  graph.setConnectionConstraint = function(
-    edge,
-    terminal,
-    source,
-    constraint
-  ) {
+  graph.setConnectionConstraint = function (edge, terminal, source, constraint) {
     if (constraint != null) {
-      const key = source
-        ? 'sourcePort'
-        : 'targetPort';
+      const key = source ? 'sourcePort' : 'targetPort';
 
       if (constraint == null || constraint.id == null) {
         this.setCellStyles(key, null, [edge]);
@@ -170,14 +155,12 @@ const Template = ({ label, ...args }) => {
   };
 
   // Returns the port for the given connection
-  graph.getConnectionConstraint = function(edge, terminal, source) {
-    const key = source
-      ? 'sourcePort'
-      : 'targetPort';
+  graph.getConnectionConstraint = function (edge, terminal, source) {
+    const key = source ? 'sourcePort' : 'targetPort';
     const id = edge.style[key];
 
     if (id != null) {
-      const c = new mxConnectionConstraint(null, null);
+      const c = new ConnectionConstraint(null, null);
       c.id = id;
 
       return c;
@@ -188,15 +171,12 @@ const Template = ({ label, ...args }) => {
 
   // Returns the actual point for a port by redirecting the constraint to the port
   const graphGetConnectionPoint = graph.getConnectionPoint;
-  graph.getConnectionPoint = function(vertex, constraint) {
+  graph.getConnectionPoint = function (vertex, constraint) {
     if (constraint.id != null && vertex != null && vertex.shape != null) {
       const port = vertex.shape.getPorts()[constraint.id];
 
       if (port != null) {
-        constraint = new mxConnectionConstraint(
-          new mxPoint(port.x, port.y),
-          port.perimeter
-        );
+        constraint = new ConnectionConstraint(new Point(port.x, port.y), port.perimeter);
       }
     }
 
@@ -227,22 +207,8 @@ const Template = ({ label, ...args }) => {
       60,
       'shape=triangle;perimeter=trianglePerimeter;direction=south'
     );
-    const e1 = graph.insertEdge(
-      parent,
-      null,
-      '',
-      v1,
-      v2,
-      'sourcePort=s;targetPort=nw'
-    );
-    const e2 = graph.insertEdge(
-      parent,
-      null,
-      '',
-      v1,
-      v3,
-      'sourcePort=e;targetPort=out3'
-    );
+    const e1 = graph.insertEdge(parent, null, '', v1, v2, 'sourcePort=s;targetPort=nw');
+    const e2 = graph.insertEdge(parent, null, '', v1, v3, 'sourcePort=e;targetPort=out3');
   } finally {
     // Updates the display
     graph.getModel().endUpdate();
@@ -251,10 +217,10 @@ const Template = ({ label, ...args }) => {
   // Comming soon... Integration with orthogonal edge style
   // Sets default edge style to use port constraints (needs to be moved up when uncommented)
   // graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
-  /* let mxUtilsGetPortConstraints = mxUtils.getPortConstraints;
-    mxUtils.getPortConstraints = function(terminal, edge, source, defaultValue)
+  /* let mxUtilsGetPortConstraints = utils.getPortConstraints;
+    utils.getPortConstraints = function(terminal, edge, source, defaultValue)
     {
-      let key = (source) ? mxConstants.STYLE_SOURCE_PORT : mxConstants.STYLE_TARGET_PORT;
+      let key = (source) ? Constants.STYLE_SOURCE_PORT : Constants.STYLE_TARGET_PORT;
       let id = edge.style[key];
 
       let port = terminal.shape.getPorts()[id];
@@ -272,11 +238,11 @@ const Template = ({ label, ...args }) => {
     {
       let edge = graph.createEdge(null, null, null, null, null);
 
-      return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
+      return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
     };
     */
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/RadialTreeLayout.stories.js b/packages/html/stories/RadialTreeLayout.stories.js
index fdb8ea4a6..6f6d9939e 100644
--- a/packages/html/stories/RadialTreeLayout.stories.js
+++ b/packages/html/stories/RadialTreeLayout.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,19 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxRubberband,
-    mxConstants,
-    mxRadialTreeLayout,
-    mxPerimeter
-  } = mxgraph;
+  const { Graph, Rubberband, Constants, mxRadialTreeLayout, Perimeter } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -31,15 +25,14 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Adds rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style.perimiter = mxPerimeter.RectanglePerimeter;
+  style.perimiter = Perimeter.RectanglePerimeter;
   style.gradientColor = 'white';
   style.perimeterSpacing = 6;
   style.rounded = true;
@@ -100,6 +93,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/SecondLabel.stories.js b/packages/html/stories/SecondLabel.stories.js
index 59d8aa9b6..2b2844a11 100644
--- a/packages/html/stories/SecondLabel.stories.js
+++ b/packages/html/stories/SecondLabel.stories.js
@@ -1,24 +1,24 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Labels/SecondLabel',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxRectangleShape,
+    Graph,
+    RectangleShape,
     mxDomHelpers,
-    mxText,
-    mxPoint,
-    mxRectangle,
-    mxConstants
-  } = mxgraph;
+    Text,
+    Point,
+    Rectangle,
+    Constants,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -32,19 +32,14 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Simple solution to add additional text to the rectangle shape definition:
-  (function() {
-    const mxRectangleShapeIsHtmlAllowed =
-      mxRectangleShape.prototype.isHtmlAllowed;
-    mxRectangleShape.prototype.isHtmlAllowed = function() {
-      return (
-        mxRectangleShapeIsHtmlAllowed.apply(this, arguments) &&
-        this.state == null
-      );
+  (function () {
+    const mxRectangleShapeIsHtmlAllowed = RectangleShape.prototype.isHtmlAllowed;
+    RectangleShape.prototype.isHtmlAllowed = function () {
+      return mxRectangleShapeIsHtmlAllowed.apply(this, arguments) && this.state == null;
     };
 
-    const mxRectangleShapePaintForeground =
-      mxRectangleShape.prototype.paintForeground;
-    mxRectangleShape.prototype.paintForeground = function(c, x, y, w, h) {
+    const mxRectangleShapePaintForeground = RectangleShape.prototype.paintForeground;
+    RectangleShape.prototype.paintForeground = function (c, x, y, w, h) {
       if (
         this.state != null &&
         this.state.cell.geometry != null &&
@@ -59,17 +54,17 @@ const Template = ({ label, ...args }) => {
   })();
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Disables the folding icon
-  graph.isCellFoldable = function(cell) {
+  graph.isCellFoldable = function (cell) {
     return false;
   };
 
   let secondLabelVisible = true;
 
   // Hook for returning shape number for a given cell
-  graph.getSecondLabel = function(cell) {
+  graph.getSecondLabel = function (cell) {
     if (!cell.isEdge()) {
       // Possible to return any string here
       return `The ID of this cell is ${cell.id}`;
@@ -82,7 +77,7 @@ const Template = ({ label, ...args }) => {
 
   // Overrides method to hide relative child vertices
   // TODO this function is not used
-  const isVisible = function() {
+  const isVisible = function () {
     return (
       !cell.isVertex() ||
       cell.geometry == null ||
@@ -93,7 +88,7 @@ const Template = ({ label, ...args }) => {
 
   // Creates the shape for the shape number and puts it into the draw pane
   const { redrawShape } = graph.cellRenderer;
-  graph.cellRenderer.redrawShape = function(state, force, rendering) {
+  graph.cellRenderer.redrawShape = function (state, force, rendering) {
     const result = redrawShape.apply(this, arguments);
 
     if (
@@ -104,28 +99,24 @@ const Template = ({ label, ...args }) => {
     ) {
       const secondLabel = graph.getSecondLabel(state.cell);
 
-      if (
-        secondLabel != null &&
-        state.shape != null &&
-        state.secondLabel == null
-      ) {
-        state.secondLabel = new mxText(
+      if (secondLabel != null && state.shape != null && state.secondLabel == null) {
+        state.secondLabel = new Text(
           secondLabel,
-          new mxRectangle(),
-          mxConstants.ALIGN_LEFT,
-          mxConstants.ALIGN_BOTTOM
+          new Rectangle(),
+          Constants.ALIGN_LEFT,
+          Constants.ALIGN_BOTTOM
         );
 
         // Styles the label
         state.secondLabel.color = 'black';
         state.secondLabel.family = 'Verdana';
         state.secondLabel.size = 8;
-        state.secondLabel.fontStyle = mxConstants.FONT_ITALIC;
+        state.secondLabel.fontStyle = Constants.FONT_ITALIC;
         state.secondLabel.background = 'yellow';
         state.secondLabel.border = 'black';
         state.secondLabel.valign = 'bottom';
         state.secondLabel.dialect = state.shape.dialect;
-        state.secondLabel.dialect = mxConstants.DIALECT_STRICTHTML;
+        state.secondLabel.dialect = Constants.DIALECT_STRICTHTML;
         state.secondLabel.wrap = true;
         graph.cellRenderer.initializeLabel(state, state.secondLabel);
       }
@@ -133,7 +124,7 @@ const Template = ({ label, ...args }) => {
 
     if (state.secondLabel != null) {
       const scale = graph.getView().getScale();
-      const bounds = new mxRectangle(
+      const bounds = new Rectangle(
         state.x + state.width - 8 * scale,
         state.y + 8 * scale,
         35,
@@ -151,7 +142,7 @@ const Template = ({ label, ...args }) => {
 
   // Destroys the shape number
   const { destroy } = graph.cellRenderer;
-  graph.cellRenderer.destroy = function(state) {
+  graph.cellRenderer.destroy = function (state) {
     destroy.apply(this, arguments);
 
     if (state.secondLabel != null) {
@@ -160,7 +151,7 @@ const Template = ({ label, ...args }) => {
     }
   };
 
-  graph.cellRenderer.getShapesForState = function(state) {
+  graph.cellRenderer.getShapesForState = function (state) {
     return [state.shape, state.text, state.secondLabel, state.control];
   };
 
@@ -186,7 +177,7 @@ const Template = ({ label, ...args }) => {
       'align=left;verticalAlign=top;labelBackgroundColor=red;labelBorderColor=black',
       true
     );
-    v11.geometry.offset = new mxPoint(-8, -8);
+    v11.geometry.offset = new Point(-8, -8);
     const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
     // Another alternative solution of creating a second label as a relative child vertex
     // but this time with an automatic size so that the cell is actually selectable and
@@ -202,7 +193,7 @@ const Template = ({ label, ...args }) => {
       'align=left;verticalAlign=top;fillColor=red;rounded=1;spacingLeft=4;spacingRight=4',
       true
     );
-    v21.geometry.offset = new mxPoint(-8, -8);
+    v21.geometry.offset = new Point(-8, -8);
     graph.updateCellSize(v21);
     const e1 = graph.insertEdge(parent, null, '', v1, v2);
   } finally {
@@ -215,7 +206,7 @@ const Template = ({ label, ...args }) => {
 
   // Adds a button to execute the layout
   buttons.appendChild(
-    mxDomHelpers.button('Toggle Child Vertices', function(evt) {
+    mxDomHelpers.button('Toggle Child Vertices', function (evt) {
       relativeChildVerticesVisible = !relativeChildVerticesVisible;
       graph.refresh();
     })
@@ -223,13 +214,13 @@ const Template = ({ label, ...args }) => {
 
   // Adds a button to execute the layout
   buttons.appendChild(
-    mxDomHelpers.button('Toggle IDs', function(evt) {
+    mxDomHelpers.button('Toggle IDs', function (evt) {
       secondLabelVisible = !secondLabelVisible;
       graph.refresh();
     })
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Shape.stories.js b/packages/html/stories/Shape.stories.js
index 6f65d53ad..ddee680b2 100644
--- a/packages/html/stories/Shape.stories.js
+++ b/packages/html/stories/Shape.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -6,16 +6,11 @@ export default {
   title: 'Shapes/Shape',
   argTypes: {
     ...globalTypes,
-  }
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxCylinder,
-    mxConstants,
-    mxCellRenderer
-  } = mxgraph;
+  const { Graph, CylinderShape, Constants, CellRenderer } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -36,17 +31,17 @@ const Template = ({ label, ...args }) => {
     The code below defines the shape. The BoxShape function
     it the constructor which creates a new object instance.
     
-    The next lines use an mxCylinder instance to augment the
+    The next lines use an CylinderShape instance to augment the
     prototype of the shape ("inheritance") and reset the
     constructor to the topmost function of the c'tor chain.
   */
 
-  class BoxShape extends mxCylinder {
+  class BoxShape extends CylinderShape {
     // Defines the extrusion of the box as a "static class variable"
     extrude = 10;
 
     /*
-          Next, the mxCylinder's redrawPath method is "overridden".
+          Next, the CylinderShape's redrawPath method is "overridden".
           This method has a isForeground argument to separate two
           paths, one for the background (which must be closed and
           might be filled) and one for the foreground, which is
@@ -85,10 +80,10 @@ const Template = ({ label, ...args }) => {
       }
     }
   }
-  mxCellRenderer.registerShape('box', BoxShape);
+  CellRenderer.registerShape('box', BoxShape);
 
   // Creates the graph inside the DOM node.
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Disables basic selection and cell handling
   graph.setEnabled(false);
@@ -123,6 +118,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Stencils.stories.js b/packages/html/stories/Stencils.stories.js
index cefd2c8d0..95f9f051e 100644
--- a/packages/html/stories/Stencils.stories.js
+++ b/packages/html/stories/Stencils.stories.js
@@ -1,5 +1,5 @@
-import mxgraph from '@mxgraph/core';
-import { load } from "@mxgraph/core/src/util/network/mxXmlRequest";
+import maxgraph from '@maxgraph/core';
+import { load } from '@mxgraph/core/src/util/network/mxXmlRequest';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -9,33 +9,33 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxConnectionHandler,
+    Graph,
+    ConnectionHandler,
     mxDomHelpers,
-    mxEdgeHandler,
-    mxEvent,
-    mxPoint,
-    mxCellHighlight,
-    mxConstants,
-    mxVertexHandler,
-    mxRubberband,
-    mxShape,
-    mxStencil,
-    mxStencilRegistry,
-    mxCellRenderer,
-    mxUtils
-  } = mxgraph;
+    EdgeHandler,
+    InternalEvent,
+    Point,
+    CellHighlight,
+    Constants,
+    VertexHandler,
+    Rubberband,
+    Shape,
+    StencilShape,
+    StencilRegistry,
+    CellRenderer,
+    utils,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -49,31 +49,31 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Sets the global shadow color
-  mxConstants.SHADOWCOLOR = '#C0C0C0';
-  mxConstants.SHADOW_OPACITY = 0.5;
-  mxConstants.SHADOW_OFFSET_X = 4;
-  mxConstants.SHADOW_OFFSET_Y = 4;
-  mxConstants.HANDLE_FILLCOLOR = '#99ccff';
-  mxConstants.HANDLE_STROKECOLOR = '#0088cf';
-  mxConstants.VERTEX_SELECTION_COLOR = '#00a8ff';
+  Constants.SHADOWCOLOR = '#C0C0C0';
+  Constants.SHADOW_OPACITY = 0.5;
+  Constants.SHADOW_OFFSET_X = 4;
+  Constants.SHADOW_OFFSET_Y = 4;
+  Constants.HANDLE_FILLCOLOR = '#99ccff';
+  Constants.HANDLE_STROKECOLOR = '#0088cf';
+  Constants.VERTEX_SELECTION_COLOR = '#00a8ff';
 
   // Enables connections along the outline
-  mxConnectionHandler.prototype.outlineConnect = true;
-  mxEdgeHandler.prototype.manageLabelHandle = true;
-  mxEdgeHandler.prototype.outlineConnect = true;
-  mxCellHighlight.prototype.keepOnTop = true;
+  ConnectionHandler.prototype.outlineConnect = true;
+  EdgeHandler.prototype.manageLabelHandle = true;
+  EdgeHandler.prototype.outlineConnect = true;
+  CellHighlight.prototype.keepOnTop = true;
 
   // Enable rotation handle
-  mxVertexHandler.prototype.rotationEnabled = true;
+  VertexHandler.prototype.rotationEnabled = true;
 
   // Uses the shape for resize previews
-  mxVertexHandler.prototype.createSelectionShape = function(bounds) {
+  VertexHandler.prototype.createSelectionShape = function (bounds) {
     const key = this.state.style.shape;
-    const stencil = mxStencilRegistry.getStencil(key);
+    const stencil = StencilRegistry.getStencil(key);
     let shape = null;
 
     if (stencil != null) {
-      shape = new mxShape(stencil);
+      shape = new Shape(stencil);
       shape.apply(this.state);
     } else {
       shape = new this.state.shape.constructor();
@@ -81,7 +81,7 @@ const Template = ({ label, ...args }) => {
 
     shape.outline = true;
     shape.bounds = bounds;
-    shape.stroke = mxConstants.HANDLE_STROKECOLOR;
+    shape.stroke = Constants.HANDLE_STROKECOLOR;
     shape.strokewidth = this.getSelectionStrokeWidth();
     shape.isDashed = this.isSelectionDashed();
     shape.isShadow = false;
@@ -92,7 +92,7 @@ const Template = ({ label, ...args }) => {
   // Defines a custom stencil via the canvas API as defined here:
   // http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html
 
-  class CustomShape extends mxShape {
+  class CustomShape extends Shape {
     paintBackground(c, x, y, w, h) {
       c.translate(x, y);
 
@@ -122,7 +122,7 @@ const Template = ({ label, ...args }) => {
   }
 
   // Replaces existing actor shape
-  mxCellRenderer.registerShape('customShape', CustomShape);
+  CellRenderer.registerShape('customShape', CustomShape);
 
   // Loads the stencils into the registry
   const req = load('stencils.xml');
@@ -130,26 +130,22 @@ const Template = ({ label, ...args }) => {
   let shape = root.firstChild;
 
   while (shape != null) {
-    if (shape.nodeType === mxConstants.NODETYPE_ELEMENT) {
-      mxStencilRegistry.addStencil(
-        shape.getAttribute('name'),
-        new mxStencil(shape)
-      );
+    if (shape.nodeType === Constants.NODETYPE_ELEMENT) {
+      StencilRegistry.addStencil(shape.getAttribute('name'), new StencilShape(shape));
     }
 
     shape = shape.nextSibling;
   }
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setConnectable(true);
   graph.setTooltips(true);
   graph.setPanning(true);
 
-  graph.getTooltipForCell = function(cell) {
+  graph.getTooltipForCell = function (cell) {
     if (cell != null) {
       return cell.style;
     }
@@ -166,8 +162,7 @@ const Template = ({ label, ...args }) => {
   style.shadow = '1';
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -176,40 +171,13 @@ const Template = ({ label, ...args }) => {
   // Adds cells to the model in a single step
   graph.getModel().beginUpdate();
   try {
-    const v1 = graph.insertVertex(
-      parent,
-      null,
-      'A1',
-      20,
-      20,
-      40,
-      80,
-      'shape=and'
-    );
-    const v2 = graph.insertVertex(
-      parent,
-      null,
-      'A2',
-      20,
-      220,
-      40,
-      80,
-      'shape=and'
-    );
-    const v3 = graph.insertVertex(
-      parent,
-      null,
-      'X1',
-      160,
-      110,
-      80,
-      80,
-      'shape=xor'
-    );
+    const v1 = graph.insertVertex(parent, null, 'A1', 20, 20, 40, 80, 'shape=and');
+    const v2 = graph.insertVertex(parent, null, 'A2', 20, 220, 40, 80, 'shape=and');
+    const v3 = graph.insertVertex(parent, null, 'X1', 160, 110, 80, 80, 'shape=xor');
     const e1 = graph.insertEdge(parent, null, '', v1, v3);
-    e1.geometry.points = [new mxPoint(90, 60), new mxPoint(90, 130)];
+    e1.geometry.points = [new Point(90, 60), new Point(90, 130)];
     const e2 = graph.insertEdge(parent, null, '', v2, v3);
-    e2.geometry.points = [new mxPoint(90, 260), new mxPoint(90, 170)];
+    e2.geometry.points = [new Point(90, 260), new Point(90, 170)];
 
     const v4 = graph.insertVertex(
       parent,
@@ -242,9 +210,9 @@ const Template = ({ label, ...args }) => {
       'shape=xor;flipH=1'
     );
     const e3 = graph.insertEdge(parent, null, '', v4, v6);
-    e3.geometry.points = [new mxPoint(490, 60), new mxPoint(130, 130)];
+    e3.geometry.points = [new Point(490, 60), new Point(130, 130)];
     const e4 = graph.insertEdge(parent, null, '', v5, v6);
-    e4.geometry.points = [new mxPoint(490, 260), new mxPoint(130, 170)];
+    e4.geometry.points = [new Point(490, 260), new Point(130, 170)];
 
     const v7 = graph.insertVertex(
       parent,
@@ -257,12 +225,12 @@ const Template = ({ label, ...args }) => {
       'shape=or;direction=south'
     );
     const e5 = graph.insertEdge(parent, null, '', v6, v7);
-    e5.geometry.points = [new mxPoint(310, 150)];
+    e5.geometry.points = [new Point(310, 150)];
     const e6 = graph.insertEdge(parent, null, '', v3, v7);
-    e6.geometry.points = [new mxPoint(270, 150)];
+    e6.geometry.points = [new Point(270, 150)];
 
     const e7 = graph.insertEdge(parent, null, '', v7, v5);
-    e7.geometry.points = [new mxPoint(290, 370)];
+    e7.geometry.points = [new Point(290, 370)];
   } finally {
     // Updates the display
     graph.getModel().endUpdate();
@@ -272,13 +240,13 @@ const Template = ({ label, ...args }) => {
   div.appendChild(buttons);
 
   buttons.appendChild(
-    mxDomHelpers.button('FlipH', function() {
+    mxDomHelpers.button('FlipH', function () {
       graph.toggleCellStyles('flipH');
     })
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('FlipV', function() {
+    mxDomHelpers.button('FlipV', function () {
       graph.toggleCellStyles('flipV');
     })
   );
@@ -289,7 +257,7 @@ const Template = ({ label, ...args }) => {
   buttons.appendChild(document.createTextNode('\u00a0'));
 
   buttons.appendChild(
-    mxDomHelpers.button('Rotate', function() {
+    mxDomHelpers.button('Rotate', function () {
       const cell = graph.getSelectionCell();
 
       if (cell != null) {
@@ -311,9 +279,7 @@ const Template = ({ label, ...args }) => {
             const state = graph.view.getState(cell);
 
             if (state != null) {
-              let dir =
-                state.style.direction ||
-                'east'; /* default */
+              let dir = state.style.direction || 'east'; /* default */
 
               if (dir === 'east') {
                 dir = 'south';
@@ -341,17 +307,17 @@ const Template = ({ label, ...args }) => {
   buttons.appendChild(document.createTextNode('\u00a0'));
 
   buttons.appendChild(
-    mxDomHelpers.button('And', function() {
+    mxDomHelpers.button('And', function () {
       graph.setCellStyles('shape', 'and');
     })
   );
   buttons.appendChild(
-    mxDomHelpers.button('Or', function() {
+    mxDomHelpers.button('Or', function () {
       graph.setCellStyles('shape', 'or');
     })
   );
   buttons.appendChild(
-    mxDomHelpers.button('Xor', function() {
+    mxDomHelpers.button('Xor', function () {
       graph.setCellStyles('shape', 'xor');
     })
   );
@@ -362,14 +328,11 @@ const Template = ({ label, ...args }) => {
   buttons.appendChild(document.createTextNode('\u00a0'));
 
   buttons.appendChild(
-    mxDomHelpers.button('Style', function() {
+    mxDomHelpers.button('Style', function () {
       const cell = graph.getSelectionCell();
 
       if (cell != null) {
-        const style = mxUtils.prompt(
-          'Style',
-          cell.getStyle()
-        );
+        const style = utils.prompt('Style', cell.getStyle());
 
         if (style != null) {
           graph.getModel().setStyle(cell, style);
@@ -379,17 +342,17 @@ const Template = ({ label, ...args }) => {
   );
 
   buttons.appendChild(
-    mxDomHelpers.button('+', function() {
+    mxDomHelpers.button('+', function () {
       graph.zoomIn();
     })
   );
   buttons.appendChild(
-    mxDomHelpers.button('-', function() {
+    mxDomHelpers.button('-', function () {
       graph.zoomOut();
     })
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Stylesheet.stories.js b/packages/html/stories/Stylesheet.stories.js
index 1dd532710..4c0041a3b 100644
--- a/packages/html/stories/Stylesheet.stories.js
+++ b/packages/html/stories/Stylesheet.stories.js
@@ -1,21 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Styles/Stylesheet',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxPerimeter,
-    mxConstants,
-    mxEdgeStyle
-  } = mxgraph;
+  const { Graph, Perimeter, Constants, EdgeStyle } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -26,15 +21,15 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the DOM node.
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Disables basic selection and cell handling
   graph.setEnabled(false);
 
   // Returns a special label for edges. Note: This does
   // a supercall to use the default implementation.
-  graph.getLabel = function(cell) {
-    const label = mxGraph.prototype.getLabel.apply(this, arguments);
+  graph.getLabel = function (cell) {
+    const label = Graph.prototype.getLabel.apply(this, arguments);
 
     if (cell.isEdge()) {
       return `Transfer ${label}`;
@@ -44,7 +39,7 @@ const Template = ({ label, ...args }) => {
 
   // Installs a custom global tooltip
   graph.setTooltips(true);
-  graph.getTooltip = function(state) {
+  graph.getTooltip = function (state) {
     const { cell } = state;
     const model = this.getModel();
 
@@ -59,27 +54,27 @@ const Template = ({ label, ...args }) => {
 
   // Creates the default style for vertices
   let style = [];
-  style.shape = mxConstants.SHAPE_RECTANGLE;
-  style.perimiter = mxPerimeter.RectanglePerimeter;
+  style.shape = Constants.SHAPE_RECTANGLE;
+  style.perimiter = Perimeter.RectanglePerimeter;
   style.strokeColor = 'gray';
   style.rounded = true;
   style.fillColor = '#EEEEEE';
   style.gradientColor = 'white';
   style.fontColor = '#774400';
-  style.align = mxConstants.ALIGN_CENTER;
-  style.verticalAlign = mxConstants.ALIGN_MIDDLE;
+  style.align = Constants.ALIGN_CENTER;
+  style.verticalAlign = Constants.ALIGN_MIDDLE;
   style.fontSize = '12';
   style.fontStyle = 1;
   graph.getStylesheet().putDefaultVertexStyle(style);
 
   // Creates the default style for edges
   style = [];
-  style.shape = mxConstants.SHAPE_CONNECTOR;
+  style.shape = Constants.SHAPE_CONNECTOR;
   style.strokeColor = '#6482B9';
-  style.align = mxConstants.ALIGN_CENTER;
-  style.verticalAlign = mxConstants.ALIGN_MIDDLE;
-  style.edge = mxEdgeStyle.ElbowConnector;
-  style.endArrow = mxConstants.ARROW_CLASSIC;
+  style.align = Constants.ALIGN_CENTER;
+  style.verticalAlign = Constants.ALIGN_MIDDLE;
+  style.edge = EdgeStyle.ElbowConnector;
+  style.endArrow = Constants.ARROW_CLASSIC;
   style.fontSize = '10';
   graph.getStylesheet().putDefaultEdgeStyle(style);
 
@@ -90,51 +85,11 @@ const Template = ({ label, ...args }) => {
   // Adds cells to the model in a single step
   graph.getModel().beginUpdate();
   try {
-    const v1 = graph.insertVertex(
-      parent,
-      null,
-      'Interval 1',
-      20,
-      20,
-      180,
-      30
-    );
-    const v2 = graph.insertVertex(
-      parent,
-      null,
-      'Interval 2',
-      140,
-      80,
-      280,
-      30
-    );
-    const v3 = graph.insertVertex(
-      parent,
-      null,
-      'Interval 3',
-      200,
-      140,
-      360,
-      30
-    );
-    const v4 = graph.insertVertex(
-      parent,
-      null,
-      'Interval 4',
-      480,
-      200,
-      120,
-      30
-    );
-    const v5 = graph.insertVertex(
-      parent,
-      null,
-      'Interval 5',
-      60,
-      260,
-      400,
-      30
-    );
+    const v1 = graph.insertVertex(parent, null, 'Interval 1', 20, 20, 180, 30);
+    const v2 = graph.insertVertex(parent, null, 'Interval 2', 140, 80, 280, 30);
+    const v3 = graph.insertVertex(parent, null, 'Interval 3', 200, 140, 360, 30);
+    const v4 = graph.insertVertex(parent, null, 'Interval 4', 480, 200, 120, 30);
+    const v5 = graph.insertVertex(parent, null, 'Interval 5', 60, 260, 400, 30);
     const e1 = graph.insertEdge(parent, null, '1', v1, v2);
     e1.getGeometry().points = [{ x: 160, y: 60 }];
     const e2 = graph.insertEdge(parent, null, '2', v1, v5);
@@ -151,6 +106,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/SwimLanes.stories.js b/packages/html/stories/SwimLanes.stories.js
index 4764b17e0..4e59bf8fe 100644
--- a/packages/html/stories/SwimLanes.stories.js
+++ b/packages/html/stories/SwimLanes.stories.js
@@ -1,29 +1,29 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Layouts/SwimLanes',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
     mxEditor,
-    mxConnectionHandler,
-    mxImage,
-    mxPerimeter,
-    mxPoint,
-    mxConstants,
-    mxCloneUtils,
-    mxEdgeStyle,
-    mxEvent,
-    mxSwimlaneManager,
-    mxStackLayout,
-    mxLayoutManager
-  } = mxgraph;
+    ConnectionHandler,
+    ImageBox,
+    Perimeter,
+    Point,
+    Constants,
+    CloneUtils,
+    EdgeStyle,
+    InternalEvent,
+    SwimlaneManager,
+    StackLayout,
+    LayoutManager,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -35,16 +35,12 @@ const Template = ({ label, ...args }) => {
 
   // Defines an icon for creating new connections in the connection handler.
   // This will automatically disable the highlighting of the source vertex.
-  mxConnectionHandler.prototype.connectImage = new mxImage(
-    'images/connector.gif',
-    16,
-    16
-  );
+  ConnectionHandler.prototype.connectImage = new ImageBox('images/connector.gif', 16, 16);
 
   // Creates a wrapper editor around a new graph inside
   // the given container using an XML config for the
   // keyboard bindings
-  // const config = mxUtils
+  // const config = utils
   //   .load('editors/config/keyhandler-commons.xml')
   //   .getDocumentElement();
   // const editor = new mxEditor(config);
@@ -55,13 +51,13 @@ const Template = ({ label, ...args }) => {
 
   // Auto-resizes the container
   graph.border = 80;
-  graph.getView().translate = new mxPoint(graph.border / 2, graph.border / 2);
+  graph.getView().translate = new Point(graph.border / 2, graph.border / 2);
   graph.setResizeContainer(true);
   graph.graphHandler.setRemoveCellsFromParent(false);
 
   // Changes the default vertex style in-place
   let style = graph.getStylesheet().getDefaultVertexStyle();
-  style.shape = mxConstants.SHAPE_SWIMLANE;
+  style.shape = Constants.SHAPE_SWIMLANE;
   style.verticalAlign = 'middle';
   style.labelBackgroundColor = 'white';
   style.fontSize = 11;
@@ -71,8 +67,8 @@ const Template = ({ label, ...args }) => {
   style.strokeColor = 'black';
   delete style.fillColor;
 
-  style = mxCloneUtils.clone(style);
-  style.shape = mxConstants.SHAPE_RECTANGLE;
+  style = CloneUtils.clone(style);
+  style.shape = Constants.SHAPE_RECTANGLE;
   style.fontSize = 10;
   style.rounded = true;
   style.horizontal = true;
@@ -81,23 +77,23 @@ const Template = ({ label, ...args }) => {
   style.labelBackgroundColor = 'none';
   graph.getStylesheet().putCellStyle('process', style);
 
-  style = mxCloneUtils.clone(style);
-  style.shape = mxConstants.SHAPE_ELLIPSE;
-  style.perimiter = mxPerimeter.EllipsePerimeter;
+  style = CloneUtils.clone(style);
+  style.shape = Constants.SHAPE_ELLIPSE;
+  style.perimiter = Perimeter.EllipsePerimeter;
   delete style.rounded;
   graph.getStylesheet().putCellStyle('state', style);
 
-  style = mxCloneUtils.clone(style);
-  style.shape = mxConstants.SHAPE_RHOMBUS;
-  style.perimiter = mxPerimeter.RhombusPerimeter;
+  style = CloneUtils.clone(style);
+  style.shape = Constants.SHAPE_RHOMBUS;
+  style.perimiter = Perimeter.RhombusPerimeter;
   style.verticalAlign = 'top';
   style.spacingTop = 40;
   style.spacingRight = 64;
   graph.getStylesheet().putCellStyle('condition', style);
 
-  style = mxCloneUtils.clone(style);
-  style.shape = mxConstants.SHAPE_DOUBLE_ELLIPSE;
-  style.perimiter = mxPerimeter.EllipsePerimeter;
+  style = CloneUtils.clone(style);
+  style.shape = Constants.SHAPE_DOUBLE_ELLIPSE;
+  style.perimiter = Perimeter.EllipsePerimeter;
   style.spacingTop = 28;
   style.fontSize = 14;
   style.fontStyle = 1;
@@ -105,16 +101,16 @@ const Template = ({ label, ...args }) => {
   graph.getStylesheet().putCellStyle('end', style);
 
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style.edge = mxEdgeStyle.ElbowConnector;
-  style.endArrow = mxConstants.ARROW_BLOCK;
+  style.edge = EdgeStyle.ElbowConnector;
+  style.endArrow = Constants.ARROW_BLOCK;
   style.rounded = true;
   style.fontColor = 'black';
   style.strokeColor = 'black';
 
-  style = mxCloneUtils.clone(style);
+  style = CloneUtils.clone(style);
   style.dashed = true;
-  style.endArrow = mxConstants.ARROW_OPEN;
-  style.startArrow = mxConstants.ARROW_OVAL;
+  style.endArrow = Constants.ARROW_OPEN;
+  style.startArrow = Constants.ARROW_OVAL;
   graph.getStylesheet().putCellStyle('crossover', style);
 
   // Installs double click on middle control point and
@@ -131,13 +127,11 @@ const Template = ({ label, ...args }) => {
     // End-states are no valid sources
     const previousIsValidSource = graph.isValidSource;
 
-    graph.isValidSource = function(cell) {
+    graph.isValidSource = function (cell) {
       if (previousIsValidSource.apply(this, arguments)) {
         const style = cell.getStyle();
 
-        return (
-          style == null || !(style == 'end' || style.indexOf('end') == 0)
-        );
+        return style == null || !(style == 'end' || style.indexOf('end') == 0);
       }
 
       return false;
@@ -149,7 +143,7 @@ const Template = ({ label, ...args }) => {
     // Note: All states are start states in
     // the example below, so we use the state
     // style below
-    graph.isValidTarget = function(cell) {
+    graph.isValidTarget = function (cell) {
       const style = cell.getStyle();
 
       return (
@@ -166,7 +160,7 @@ const Template = ({ label, ...args }) => {
     graph.setSplitEnabled(false);
 
     // Returns true for valid drop operations
-    graph.isValidDropTarget = function(target, cells, evt) {
+    graph.isValidDropTarget = function (target, cells, evt) {
       if (this.isSplitEnabled() && this.isSplitTarget(target, cells, evt)) {
         return true;
       }
@@ -188,13 +182,12 @@ const Template = ({ label, ...args }) => {
       return (
         !pool &&
         cell != lane &&
-        ((lane && this.isPool(target)) ||
-        (cell && this.isPool(target.getParent())))
+        ((lane && this.isPool(target)) || (cell && this.isPool(target.getParent())))
       );
     };
 
     // Adds new method for identifying a pool
-    graph.isPool = function(cell) {
+    graph.isPool = function (cell) {
       const model = this.getModel();
       const parent = cell.getParent();
 
@@ -202,7 +195,7 @@ const Template = ({ label, ...args }) => {
     };
 
     // Keeps widths on collapse/expand
-    const foldingHandler = function(sender, evt) {
+    const foldingHandler = function (sender, evt) {
       const cells = evt.getProperty('cells');
 
       for (let i = 0; i < cells.length; i++) {
@@ -214,11 +207,11 @@ const Template = ({ label, ...args }) => {
       }
     };
 
-    graph.addListener(mxEvent.FOLD_CELLS, foldingHandler);
+    graph.addListener(InternalEvent.FOLD_CELLS, foldingHandler);
   }
 
   // Changes swimlane orientation while collapsed
-  const getStyle = function() {
+  const getStyle = function () {
     // TODO super cannot be used here
     // let style = super.getStyle();
     let style;
@@ -234,10 +227,10 @@ const Template = ({ label, ...args }) => {
   };
 
   // Applies size changes to siblings and parents
-  new mxSwimlaneManager(graph);
+  new SwimlaneManager(graph);
 
   // Creates a stack depending on the orientation of the swimlane
-  const layout = new mxStackLayout(graph, false);
+  const layout = new StackLayout(graph, false);
 
   // Makes sure all children fit into the parent swimlane
   layout.resizeParent = true;
@@ -246,14 +239,14 @@ const Template = ({ label, ...args }) => {
   layout.fill = true;
 
   // Only update the size of swimlanes
-  layout.isVertexIgnored = function(vertex) {
+  layout.isVertexIgnored = function (vertex) {
     return !graph.isSwimlane(vertex);
   };
 
   // Keeps the lanes and pools stacked
-  const layoutMgr = new mxLayoutManager(graph);
+  const layoutMgr = new LayoutManager(graph);
 
-  layoutMgr.getLayout = function(cell) {
+  layoutMgr.getLayout = function (cell) {
     if (
       !cell.isEdge() &&
       cell.getChildCount() > 0 &&
@@ -271,13 +264,13 @@ const Template = ({ label, ...args }) => {
   // is normally the first child of the root (ie. layer 0).
   const parent = graph.getDefaultParent();
 
-  const insertVertex = options => {
+  const insertVertex = (options) => {
     const v = graph.insertVertex(options);
     v.getStyle = getStyle;
     return v;
   };
 
-  const insertEdge = options => {
+  const insertEdge = (options) => {
     const e = graph.insertEdge(options);
     e.getStyle = getStyle;
     return e;
@@ -518,7 +511,7 @@ const Template = ({ label, ...args }) => {
     });
 
     e.geometry.points = [
-      new mxPoint(
+      new Point(
         step444.geometry.x + step444.geometry.width / 2,
         end3.geometry.y + end3.geometry.height / 2
       ),
@@ -544,7 +537,7 @@ const Template = ({ label, ...args }) => {
     });
 
     e.geometry.points = [
-      new mxPoint(
+      new Point(
         step33.geometry.x + step33.geometry.width / 2 + 20,
         step11.geometry.y + (step11.geometry.height * 4) / 5
       ),
@@ -563,6 +556,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Thread.stories.js b/packages/html/stories/Thread.stories.js
index ae12a0478..88a073382 100644
--- a/packages/html/stories/Thread.stories.js
+++ b/packages/html/stories/Thread.stories.js
@@ -1,19 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Misc/Thread',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxClient
-  } = mxgraph;
+  const { Graph, mxClient } = maxgraph;
 
   mxClient.setImageBasePath('/images');
 
@@ -26,7 +23,7 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Disables basic selection and cell handling
   graph.setEnabled(false);
@@ -66,6 +63,6 @@ const Template = ({ label, ...args }) => {
   f();
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Toolbar.stories.js b/packages/html/stories/Toolbar.stories.js
index 6b0bca0d6..62068e71e 100644
--- a/packages/html/stories/Toolbar.stories.js
+++ b/packages/html/stories/Toolbar.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,26 +8,26 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxRubberband,
-    mxConnectionHandler,
-    mxImage,
+    Graph,
+    Rubberband,
+    ConnectionHandler,
+    ImageBox,
     mxToolbar,
-    mxGraphModel,
+    GraphModel,
     mxKeyHandler,
-    mxCell,
-    mxGeometry,
-    mxDragSource,
+    Cell,
+    Geometry,
+    DragSource,
     mxDomHelpers,
-    mxGestureUtils
-  } = mxgraph;
+    GestureUtils,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -42,7 +42,7 @@ const Template = ({ label, ...args }) => {
 
   // Defines an icon for creating new connections in the connection handler.
   // This will automatically disable the highlighting of the source vertex.
-  mxConnectionHandler.prototype.connectImage = new mxImage(
+  ConnectionHandler.prototype.connectImage = new ImageBox(
     '/images/connector.gif',
     16,
     16
@@ -66,12 +66,12 @@ const Template = ({ label, ...args }) => {
 
   // Creates the model and the graph inside the container
   // using the fastest rendering available on the browser
-  const model = new mxGraphModel();
-  const graph = new mxGraph(container, model);
+  const model = new GraphModel();
+  const graph = new Graph(container, model);
   graph.dropEnabled = true;
 
   // Matches DnD inside the graph
-  mxDragSource.prototype.getDropTarget = function(graph, x, y) {
+  DragSource.prototype.getDropTarget = function (graph, x, y) {
     let cell = graph.getCellAt(x, y);
     if (!graph.isValidDropTarget(cell)) {
       cell = null;
@@ -86,22 +86,16 @@ const Template = ({ label, ...args }) => {
   // Stops editing on enter or escape keypress
   const keyHandler = new mxKeyHandler(graph);
 
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   const addVertex = (icon, w, h, style) => {
-    const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
+    const vertex = new Cell(null, new Geometry(0, 0, w, h), style);
     vertex.setVertex(true);
 
     addToolbarItem(graph, toolbar, vertex, icon);
   };
 
-  addVertex(
-    '/images/swimlane.gif',
-    120,
-    160,
-    'shape=swimlane;startSize=20;'
-  );
+  addVertex('/images/swimlane.gif', 120, 160, 'shape=swimlane;startSize=20;');
   addVertex('/images/rectangle.gif', 100, 40, '');
   addVertex('/images/rounded.gif', 100, 40, 'shape=rounded');
   addVertex('/images/ellipse.gif', 40, 40, 'shape=ellipse');
@@ -111,37 +105,30 @@ const Template = ({ label, ...args }) => {
   addVertex('/images/actor.gif', 30, 40, 'shape=actor');
   toolbar.addLine();
 
-  const button = mxDomHelpers.button(
-    'Create toolbar entry from selection',
-    evt => {
-      if (!graph.isSelectionEmpty()) {
-        // Creates a copy of the selection array to preserve its state
-        const cells = graph.getSelectionCells();
-        const bounds = graph.getView().getBounds(cells);
+  const button = mxDomHelpers.button('Create toolbar entry from selection', (evt) => {
+    if (!graph.isSelectionEmpty()) {
+      // Creates a copy of the selection array to preserve its state
+      const cells = graph.getSelectionCells();
+      const bounds = graph.getView().getBounds(cells);
 
-        // Function that is executed when the image is dropped on
-        // the graph. The cell argument points to the cell under
-        // the mousepointer if there is one.
-        const funct = (graph, evt, cell) => {
-          graph.stopEditing(false);
+      // Function that is executed when the image is dropped on
+      // the graph. The cell argument points to the cell under
+      // the mousepointer if there is one.
+      const funct = (graph, evt, cell) => {
+        graph.stopEditing(false);
 
-          const pt = graph.getPointForEvent(evt);
-          const dx = pt.x - bounds.x;
-          const dy = pt.y - bounds.y;
+        const pt = graph.getPointForEvent(evt);
+        const dx = pt.x - bounds.x;
+        const dy = pt.y - bounds.y;
 
-          graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
-        };
+        graph.setSelectionCells(graph.importCells(cells, dx, dy, cell));
+      };
 
-        // Creates the image which is used as the drag icon (preview)
-        const img = toolbar.addMode(
-          null,
-          '/images/outline.gif',
-          funct
-        );
-        mxGestureUtils.makeDraggable(img, graph, funct);
-      }
+      // Creates the image which is used as the drag icon (preview)
+      const img = toolbar.addMode(null, '/images/outline.gif', funct);
+      GestureUtils.makeDraggable(img, graph, funct);
     }
-  );
+  });
 
   tbContainer.appendChild(button);
 
@@ -162,10 +149,10 @@ const Template = ({ label, ...args }) => {
 
     // Creates the image which is used as the drag icon (preview)
     const img = toolbar.addMode(null, image, funct);
-    mxGestureUtils.makeDraggable(img, graph, funct);
+    GestureUtils.makeDraggable(img, graph, funct);
   }
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Tree.stories.js b/packages/html/stories/Tree.stories.js
index af97c8ff1..4f5ee65f2 100644
--- a/packages/html/stories/Tree.stories.js
+++ b/packages/html/stories/Tree.stories.js
@@ -1,30 +1,30 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Layouts/Tree',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxConstants,
-    mxCylinder,
-    mxCellRenderer,
-    mxGraphView,
-    mxImage,
+    Graph,
+    Constants,
+    CylinderShape,
+    CellRenderer,
+    GraphView,
+    ImageBox,
     mxClient,
-    mxEdgeStyle,
+    EdgeStyle,
     mxKeyHandler,
-    mxCompactTreeLayout,
-    mxLayoutManager,
-    mxRectangle,
-    mxPoint
-  } = mxgraph;
+    CompactTreeLayout,
+    LayoutManager,
+    Rectangle,
+    Point,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -40,7 +40,7 @@ const Template = ({ label, ...args }) => {
     Defines a custom shape for the tree node that includes the
     upper half of the outgoing edge(s).
   */
-  class TreeNodeShape extends mxCylinder {
+  class TreeNodeShape extends CylinderShape {
     // Defines the length of the upper edge segment.
     static segment = 20;
 
@@ -56,8 +56,7 @@ const Template = ({ label, ...args }) => {
 
     redrawPath(path, x, y, w, h, isForeground) {
       const { graph } = this.state.view;
-      const hasChildren =
-        graph.model.getOutgoingEdges(this.state.cell).length > 0;
+      const hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0;
 
       if (isForeground) {
         if (hasChildren) {
@@ -75,27 +74,27 @@ const Template = ({ label, ...args }) => {
       }
     }
   }
-  mxCellRenderer.registerShape('treenode', TreeNodeShape);
+  CellRenderer.registerShape('treenode', TreeNodeShape);
 
-  class MyCustomGraphView extends mxGraphView {
+  class MyCustomGraphView extends GraphView {
     updateFloatingTerminalPoint(edge, start, end, source) {
       // Defines a custom perimeter for the nodes in the tree
       let pt = null;
 
       if (source) {
-        pt = new mxPoint(
+        pt = new Point(
           start.x + start.width / 2,
           start.y + start.height + TreeNodeShape.segment
         );
       } else {
-        pt = new mxPoint(start.x + start.width / 2, start.y);
+        pt = new Point(start.x + start.width / 2, start.y);
       }
 
       edge.setAbsoluteTerminalPoint(pt, source);
     }
   }
 
-  class MyCustomCellRenderer extends mxCellRenderer {
+  class MyCustomCellRenderer extends CellRenderer {
     getControlBounds(state) {
       // Defines the position of the folding icon
       if (state.control != null) {
@@ -104,12 +103,9 @@ const Template = ({ label, ...args }) => {
         const h = state.control.bounds.height / oldScale;
         const s = state.view.scale;
 
-        return new mxRectangle(
+        return new Rectangle(
           state.x + state.width / 2 - (w / 2) * s,
-          state.y +
-            state.height +
-            TreeNodeShape.segment * s -
-            (h / 2) * s,
+          state.y + state.height + TreeNodeShape.segment * s - (h / 2) * s,
           w * s,
           h * s
         );
@@ -121,20 +117,12 @@ const Template = ({ label, ...args }) => {
   // Make the layout instance accessible by MyCustomGraph
   let layout;
 
-  class MyCustomGraph extends mxGraph {
+  class MyCustomGraph extends Graph {
     // Sets the collapse and expand icons. The values below are the default
     // values, but this is how to replace them if you need to.
-    collapsedImage = new mxImage(
-      `${mxClient.imageBasePath}/collapsed.gif`,
-      9,
-      9
-    );
+    collapsedImage = new ImageBox(`${mxClient.imageBasePath}/collapsed.gif`, 9, 9);
 
-    expandedImage = new mxImage(
-      `${mxClient.imageBasePath}/expanded.gif`,
-      9,
-      9
-    );
+    expandedImage = new ImageBox(`${mxClient.imageBasePath}/expanded.gif`, 9, 9);
 
     isCellFoldable(cell) {
       // Defines the condition for showing the folding icon
@@ -171,7 +159,7 @@ const Template = ({ label, ...args }) => {
       show = show != null ? show : true;
       const cells = [];
 
-      this.traverse(cell, true, function(vertex) {
+      this.traverse(cell, true, function (vertex) {
         if (vertex !== cell) {
           cells.push(vertex);
         }
@@ -200,7 +188,7 @@ const Template = ({ label, ...args }) => {
   style.shadow = true;
 
   style = graph.getStylesheet().getDefaultEdgeStyle();
-  style.edge = mxEdgeStyle.TopToBottom;
+  style.edge = EdgeStyle.TopToBottom;
   style.rounded = true;
 
   // Enables automatic sizing for vertices after editing and
@@ -215,15 +203,15 @@ const Template = ({ label, ...args }) => {
   // Enables automatic layout on the graph and installs
   // a tree layout for all groups who's children are
   // being changed, added or removed.
-  layout = new mxCompactTreeLayout(graph, false);
+  layout = new CompactTreeLayout(graph, false);
   layout.useBoundingBox = false;
   layout.edgeRouting = false;
   layout.levelDistance = 30;
   layout.nodeDistance = 10;
 
-  const layoutMgr = new mxLayoutManager(graph);
+  const layoutMgr = new LayoutManager(graph);
 
-  layoutMgr.getLayout = function(cell) {
+  layoutMgr.getLayout = function (cell) {
     if (cell.getChildCount() > 0) {
       return layout;
     }
@@ -237,15 +225,7 @@ const Template = ({ label, ...args }) => {
   graph.getModel().beginUpdate();
   try {
     const w = graph.container.offsetWidth;
-    const root = graph.insertVertex(
-      parent,
-      'treeRoot',
-      'Root',
-      w / 2 - 30,
-      20,
-      60,
-      40
-    );
+    const root = graph.insertVertex(parent, 'treeRoot', 'Root', w / 2 - 30, 20, 60, 40);
 
     const v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40);
     graph.insertEdge(parent, null, '', root, v1);
@@ -268,26 +248,10 @@ const Template = ({ label, ...args }) => {
     const v22 = graph.insertVertex(parent, 'v22', 'Child 2.2', 0, 0, 60, 40);
     graph.insertEdge(parent, null, '', v2, v22);
 
-    const v221 = graph.insertVertex(
-      parent,
-      'v221',
-      'Child 2.2.1',
-      0,
-      0,
-      60,
-      40
-    );
+    const v221 = graph.insertVertex(parent, 'v221', 'Child 2.2.1', 0, 0, 60, 40);
     graph.insertEdge(parent, null, '', v22, v221);
 
-    const v222 = graph.insertVertex(
-      parent,
-      'v222',
-      'Child 2.2.2',
-      0,
-      0,
-      60,
-      40
-    );
+    const v222 = graph.insertVertex(parent, 'v222', 'Child 2.2.2', 0, 0, 60, 40);
     graph.insertEdge(parent, null, '', v22, v222);
 
     const v31 = graph.insertVertex(parent, 'v31', 'Child 3.1', 0, 0, 60, 40);
@@ -298,6 +262,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/UserObject.stories.js b/packages/html/stories/UserObject.stories.js
index aa28b81e7..52ffab0c0 100644
--- a/packages/html/stories/UserObject.stories.js
+++ b/packages/html/stories/UserObject.stories.js
@@ -1,31 +1,31 @@
-import mxgraph from '@mxgraph/core';
-import { popup } from '@mxgraph/core/src/util/gui/mxWindow';
+import maxgraph from '@maxgraph/core';
+import { popup } from '@maxgraph/core/util/gui/mxWindow';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Xml_Json/UserObject',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxRectangle,
+    Graph,
+    Rectangle,
     mxDomHelpers,
     mxKeyHandler,
-    mxEvent,
+    InternalEvent,
     mxXmlUtils,
     mxCodec,
-    mxConstants,
-    mxUtils,
-    mxEdgeStyle,
+    Constants,
+    utils,
+    EdgeStyle,
     mxDomUtils,
     mxForm,
-    mxCellAttributeChange
-  } = mxgraph;
+    CellAttributeChange,
+  } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -39,7 +39,7 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Note that these XML nodes will be enclosing the
-  // mxCell nodes for the model cells in the output
+  // Cell nodes for the model cells in the output
   const doc = mxXmlUtils.createXmlDocument();
 
   const person1 = doc.createElement('Person');
@@ -54,7 +54,7 @@ const Template = ({ label, ...args }) => {
   relation.setAttribute('since', '1985');
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Optional disabling of sizing
   graph.setCellsResizable(false);
@@ -62,19 +62,19 @@ const Template = ({ label, ...args }) => {
   // Configures the graph contains to resize and
   // add a border at the bottom, right
   graph.setResizeContainer(true);
-  graph.minimumContainerSize = new mxRectangle(0, 0, 500, 380);
+  graph.minimumContainerSize = new Rectangle(0, 0, 500, 380);
   graph.setBorder(60);
 
   // Stops editing on enter key, handles escape
   new mxKeyHandler(graph);
 
   // Overrides method to disallow edge label editing
-  graph.isCellEditable = function(cell) {
+  graph.isCellEditable = function (cell) {
     return !cell.isEdge();
   };
 
   // Overrides method to provide a cell label in the display
-  graph.convertValueToString = function(cell) {
+  graph.convertValueToString = function (cell) {
     if (mxDomUtils.isNode(cell.value)) {
       if (cell.value.nodeName.toLowerCase() == 'person') {
         const firstName = cell.getAttribute('firstName', '');
@@ -87,10 +87,7 @@ const Template = ({ label, ...args }) => {
         return firstName;
       }
       if (cell.value.nodeName.toLowerCase() == 'knows') {
-        return `${cell.value.nodeName} (Since ${cell.getAttribute(
-          'since',
-          ''
-        )})`;
+        return `${cell.value.nodeName} (Since ${cell.getAttribute('since', '')})`;
       }
     }
 
@@ -99,16 +96,12 @@ const Template = ({ label, ...args }) => {
 
   // Overrides method to store a cell label in the model
   const { cellLabelChanged } = graph;
-  graph.cellLabelChanged = function(cell, newValue, autoSize) {
-    if (
-      mxDomUtils.isNode(cell.value) &&
-      cell.value.nodeName.toLowerCase() == 'person'
-    ) {
+  graph.cellLabelChanged = function (cell, newValue, autoSize) {
+    if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
       const pos = newValue.indexOf(' ');
 
       const firstName = pos > 0 ? newValue.substring(0, pos) : newValue;
-      const lastName =
-        pos > 0 ? newValue.substring(pos + 1, newValue.length) : '';
+      const lastName = pos > 0 ? newValue.substring(pos + 1, newValue.length) : '';
 
       // Clones the value for correct undo/redo
       const elt = cell.value.cloneNode(true);
@@ -125,11 +118,8 @@ const Template = ({ label, ...args }) => {
 
   // Overrides method to create the editing value
   const { getEditingValue } = graph;
-  graph.getEditingValue = function(cell) {
-    if (
-      mxDomUtils.isNode(cell.value) &&
-      cell.value.nodeName.toLowerCase() == 'person'
-    ) {
+  graph.getEditingValue = function (cell) {
+    if (mxDomUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'person') {
       const firstName = cell.getAttribute('firstName', '');
       const lastName = cell.getAttribute('lastName', '');
 
@@ -141,7 +131,7 @@ const Template = ({ label, ...args }) => {
   graph.setTooltips(true);
 
   const { getTooltipForCell } = graph;
-  graph.getTooltipForCell = function(cell) {
+  graph.getTooltipForCell = function (cell) {
     // Adds some relation details for edges
     if (cell.isEdge()) {
       const src = this.getLabel(cell.getTerminal(true));
@@ -154,8 +144,7 @@ const Template = ({ label, ...args }) => {
   };
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new RubberBand(graph);
+  if (args.rubberBand) new RubberBand(graph);
 
   const buttons = document.createElement('div');
   div.appendChild(buttons);
@@ -165,10 +154,10 @@ const Template = ({ label, ...args }) => {
 
   // Adds an option to view the XML of the graph
   buttons.appendChild(
-    mxDomHelpers.button('View XML', function() {
+    mxDomHelpers.button('View XML', function () {
       const encoder = new mxCodec();
       const node = encoder.encode(graph.getModel());
-      popup(mxUtils.getPrettyXml(node), true);
+      popup(utils.getPrettyXml(node), true);
     })
   );
 
@@ -188,7 +177,7 @@ const Template = ({ label, ...args }) => {
   style = graph.getStylesheet().getDefaultEdgeStyle();
   style.strokeColor = '#0C0C0C';
   style.labelBackgroundColor = 'white';
-  style.edge = mxEdgeStyle.ElbowConnector;
+  style.edge = EdgeStyle.ElbowConnector;
   style.rounded = true;
   style.fontColor = 'black';
   style.fontSize = '10';
@@ -209,12 +198,10 @@ const Template = ({ label, ...args }) => {
   }
 
   // Implements a properties panel that uses
-  // mxCellAttributeChange to change properties
-  graph
-    .getSelectionModel()
-    .addListener(mxEvent.CHANGE, function(sender, evt) {
-      selectionChanged(graph);
-    });
+  // CellAttributeChange to change properties
+  graph.getSelectionModel().addListener(InternalEvent.CHANGE, function (sender, evt) {
+    selectionChanged(graph);
+  });
 
   selectionChanged(graph);
 
@@ -262,7 +249,7 @@ const Template = ({ label, ...args }) => {
   function createTextField(graph, form, cell, attribute) {
     const input = form.addText(`${attribute.nodeName}:`, attribute.nodeValue);
 
-    const applyHandler = function() {
+    const applyHandler = function () {
       const newValue = input.value || '';
       const oldValue = cell.getAttribute(attribute.nodeName, '');
 
@@ -270,11 +257,7 @@ const Template = ({ label, ...args }) => {
         graph.getModel().beginUpdate();
 
         try {
-          const edit = new mxCellAttributeChange(
-            cell,
-            attribute.nodeName,
-            newValue
-          );
+          const edit = new CellAttributeChange(cell, attribute.nodeName, newValue);
           graph.getModel().execute(edit);
           graph.updateCellSize(cell);
         } finally {
@@ -283,9 +266,9 @@ const Template = ({ label, ...args }) => {
       }
     };
 
-    mxEvent.addListener(input, 'keypress', function(evt) {
+    InternalEvent.addListener(input, 'keypress', function (evt) {
       // Needs to take shift into account for textareas
-      if (evt.keyCode == /* enter */ 13 && !mxEvent.isShiftDown(evt)) {
+      if (evt.keyCode == /* enter */ 13 && !InternalEvent.isShiftDown(evt)) {
         input.blur();
       }
     });
@@ -296,10 +279,10 @@ const Template = ({ label, ...args }) => {
     // As a workaround you should use a local variable
     // that stores the focused field and invoke blur
     // explicitely where we do the graph.focus above.
-    mxEvent.addListener(input, 'blur', applyHandler);
+    InternalEvent.addListener(input, 'blur', applyHandler);
   }
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Validation.stories.js b/packages/html/stories/Validation.stories.js
index 041a7c6b1..6b9bd0cf0 100644
--- a/packages/html/stories/Validation.stories.js
+++ b/packages/html/stories/Validation.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,20 +8,20 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
-    mxRubberband,
+    Graph,
+    Rubberband,
     mxXmlUtils,
-    mxMultiplicity,
+    Multiplicity,
     mxKeyHandler,
-    mxEvent
-  } = mxgraph;
+    InternalEvent,
+  } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -37,7 +37,7 @@ const Template = ({ label, ...args }) => {
   const subtargetNode = xmlDocument.createElement('Subtarget');
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
   graph.setConnectable(true);
   graph.setTooltips(true);
   graph.setAllowDanglingEdges(false);
@@ -45,7 +45,7 @@ const Template = ({ label, ...args }) => {
 
   // Source nodes needs 1..2 connected Targets
   graph.multiplicities.push(
-    new mxMultiplicity(
+    new Multiplicity(
       true,
       'Source',
       null,
@@ -60,7 +60,7 @@ const Template = ({ label, ...args }) => {
 
   // Source node does not want any incoming connections
   graph.multiplicities.push(
-    new mxMultiplicity(
+    new Multiplicity(
       false,
       'Source',
       null,
@@ -75,7 +75,7 @@ const Template = ({ label, ...args }) => {
 
   // Target needs exactly one incoming connection from Source
   graph.multiplicities.push(
-    new mxMultiplicity(
+    new Multiplicity(
       false,
       'Target',
       null,
@@ -89,11 +89,11 @@ const Template = ({ label, ...args }) => {
   );
 
   // Enables rubberband selection
-  new mxRubberband(graph);
+  new Rubberband(graph);
 
   // Removes cells when [DELETE] is pressed
   const keyHandler = new mxKeyHandler(graph);
-  keyHandler.bindKey(46, function(evt) {
+  keyHandler.bindKey(46, function (evt) {
     if (graph.isEnabled()) {
       graph.removeCells();
     }
@@ -101,11 +101,11 @@ const Template = ({ label, ...args }) => {
 
   // Installs automatic validation (use editor.validation = true
   // if you are using an mxEditor instance)
-  const listener = function(sender, evt) {
+  const listener = function (sender, evt) {
     graph.validateGraph();
   };
 
-  graph.getModel().addListener(mxEvent.CHANGE, listener);
+  graph.getModel().addListener(InternalEvent.CHANGE, listener);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -131,15 +131,7 @@ const Template = ({ label, ...args }) => {
       80,
       30
     );
-    const v5 = graph.insertVertex(
-      parent,
-      null,
-      subtargetNode,
-      200,
-      200,
-      80,
-      30
-    );
+    const v5 = graph.insertVertex(parent, null, subtargetNode, 200, 200, 80, 30);
     const v6 = graph.insertVertex(
       parent,
       null,
@@ -159,6 +151,6 @@ const Template = ({ label, ...args }) => {
   }
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Visibility.stories.js b/packages/html/stories/Visibility.stories.js
index a91412144..78b9d15d0 100644
--- a/packages/html/stories/Visibility.stories.js
+++ b/packages/html/stories/Visibility.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,17 +8,13 @@ export default {
     ...globalTypes,
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph,
-    mxRubberband,
-    mxDomHelpers
-  } = mxgraph;
+  const { Graph, Rubberband, mxDomHelpers } = maxgraph;
 
   const div = document.createElement('div');
 
@@ -32,11 +28,10 @@ const Template = ({ label, ...args }) => {
   div.appendChild(container);
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Enables rubberband selection
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -47,7 +42,7 @@ const Template = ({ label, ...args }) => {
   let showThree = true;
 
   // Overridden to implement dynamic conditions
-  const isVisible = function() {
+  const isVisible = function () {
     // TODO super cannot be used here
     // let result = super.isVisible();
     let result;
@@ -93,19 +88,19 @@ const Template = ({ label, ...args }) => {
 
   // Dynamic conditions (requires refresh)
   buttons.appendChild(
-    mxDomHelpers.button('Cond 1', function() {
+    mxDomHelpers.button('Cond 1', function () {
       showOne = !showOne;
       graph.refresh();
     })
   );
   buttons.appendChild(
-    mxDomHelpers.button('Cond 2', function() {
+    mxDomHelpers.button('Cond 2', function () {
       showTwo = !showTwo;
       graph.refresh();
     })
   );
   buttons.appendChild(
-    mxDomHelpers.button('Cond 3', function() {
+    mxDomHelpers.button('Cond 3', function () {
       showThree = !showThree;
       graph.refresh();
     })
@@ -113,7 +108,7 @@ const Template = ({ label, ...args }) => {
 
   // Explicit show/hide
   buttons.appendChild(
-    mxDomHelpers.button('Toggle cell', function() {
+    mxDomHelpers.button('Toggle cell', function () {
       graph.toggleCells(!v1.isVisible(), [v1], true);
     })
   );
@@ -122,7 +117,7 @@ const Template = ({ label, ...args }) => {
   let removed = null;
 
   buttons.appendChild(
-    mxDomHelpers.button('Add/remove cell', function() {
+    mxDomHelpers.button('Add/remove cell', function () {
       if (removed != null) {
         graph.addCells(removed);
         removed = null;
@@ -133,6 +128,6 @@ const Template = ({ label, ...args }) => {
   );
 
   return div;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Window.stories.js b/packages/html/stories/Window.stories.js
index 050b6f826..271099db0 100644
--- a/packages/html/stories/Window.stories.js
+++ b/packages/html/stories/Window.stories.js
@@ -1,4 +1,4 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
@@ -8,26 +8,26 @@ export default {
     ...globalTypes,
     contextMenu: {
       type: 'boolean',
-      defaultValue: false
+      defaultValue: false,
     },
     rubberBand: {
       type: 'boolean',
-      defaultValue: true
-    }
-  }
+      defaultValue: true,
+    },
+  },
 };
 
 const Template = ({ label, ...args }) => {
   const {
-    mxGraph,
+    Graph,
     mxWindow,
     mxKeyHandler,
-    mxRubberband,
-    mxEvent,
+    Rubberband,
+    InternalEvent,
     mxLog,
     mxDomUtils,
-    mxClient
-  } = mxgraph;
+    mxClient,
+  } = maxgraph;
 
   mxClient.setImageBasePath('/images');
 
@@ -53,19 +53,17 @@ const Template = ({ label, ...args }) => {
   );
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Adds rubberband selection and keystrokes
   graph.setTooltips(true);
   graph.setPanning(true);
 
-  if (args.rubberBand)
-    new mxRubberband(graph);
+  if (args.rubberBand) new Rubberband(graph);
 
   new mxKeyHandler(graph);
 
-  if (!args.contextMenu)
-    mxEvent.disableContextMenu(container);
+  if (!args.contextMenu) InternalEvent.disableContextMenu(container);
 
   // Gets the default parent for inserting new cells. This
   // is normally the first child of the root (ie. layer 0).
@@ -127,6 +125,6 @@ const Template = ({ label, ...args }) => {
   mxLog.show();
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/stories/Wrapping.stories.js b/packages/html/stories/Wrapping.stories.js
index e5c239ab2..ba38d4771 100644
--- a/packages/html/stories/Wrapping.stories.js
+++ b/packages/html/stories/Wrapping.stories.js
@@ -1,18 +1,16 @@
-import mxgraph from '@mxgraph/core';
+import maxgraph from '@maxgraph/core';
 
 import { globalTypes } from '../.storybook/preview';
 
 export default {
   title: 'Labels/Wrapping',
   argTypes: {
-    ...globalTypes
-  }
+    ...globalTypes,
+  },
 };
 
 const Template = ({ label, ...args }) => {
-  const {
-    mxGraph
-  } = mxgraph;
+  const { Graph } = maxgraph;
 
   const container = document.createElement('div');
   container.style.position = 'relative';
@@ -23,13 +21,13 @@ const Template = ({ label, ...args }) => {
   container.style.cursor = 'default';
 
   // Creates the graph inside the given container
-  const graph = new mxGraph(container);
+  const graph = new Graph(container);
 
   // Enables HTML labels as wrapping is only available for those
   graph.setHtmlLabels(true);
 
   // Disables in-place editing for edges
-  graph.isCellEditable = function(cell) {
+  graph.isCellEditable = function (cell) {
     return !cell.isEdge();
   };
 
@@ -64,6 +62,6 @@ const Template = ({ label, ...args }) => {
   });
 
   return container;
-}
+};
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
diff --git a/packages/html/webpack.config.js b/packages/html/webpack.config.js
index 982593e2a..6b0e9e663 100644
--- a/packages/html/webpack.config.js
+++ b/packages/html/webpack.config.js
@@ -1,11 +1,11 @@
 const path = require('path');
-const {merge} = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const base = require('../../webpack.config');
 
 module.exports = merge(base, {
   resolve: {
     alias: {
-      '@mxgraph/core': path.resolve(__dirname, '../core')
-    }
-  }
-});
\ No newline at end of file
+      '@maxgraph/core': path.resolve(__dirname, '../core/src'),
+    },
+  },
+});
diff --git a/tsconfig.json b/tsconfig.json
index dcd8889ce..374f8c4d4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,17 +7,17 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ],
+    "lib": ["es2020", "dom"],
     "moduleResolution": "node",
     "noEmit": true,
     "strict": true,
     "target": "es2020",
     "resolveJsonModule": true, // Required for JSON files
     "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "core/*": ["./packages/core/src/*"]
+    }
   },
   "exclude": [
     "node_modules",
@@ -25,9 +25,5 @@
     "**/*.json", // Don't try and check JSON files
     "**/*.spec.ts"
   ],
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }
diff --git a/webpack.config.js b/webpack.config.js
index 190009653..ff5928128 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   devtool: 'eval-source-map',
   module: {
@@ -7,14 +9,17 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            rootMode: 'upward'
-          }
+            rootMode: 'upward',
+          },
         },
-        exclude: /node_modules/
-      }
-    ]
+        exclude: /node_modules/,
+      },
+    ],
   },
   resolve: {
-    extensions: ['.ts', '.js', '.css']
-  }
-}
\ No newline at end of file
+    alias: {
+      core: path.resolve(__dirname, 'packages/core/src'),
+    },
+    extensions: ['.ts', '.js', '.css'],
+  },
+};