diff --git a/docs/modules/graph-layers/api-reference/layouts/custom-layout.md b/docs/modules/graph-layers/api-reference/layouts/custom-layout.md
index 5e0cb517..1cb2cdf6 100644
--- a/docs/modules/graph-layers/api-reference/layouts/custom-layout.md
+++ b/docs/modules/graph-layers/api-reference/layouts/custom-layout.md
@@ -3,9 +3,9 @@
 Here's the method you will likely to implement when creating your own custom layout:
 
 ```js
-import {BaseLayout} from '@deck.gl-community/graph-layers';
+import {GraphLayout} from '@deck.gl-community/graph-layers';
 
-export default class MyLayout extends BaseLayout {
+export default class MyLayout extends GraphLayout {
   // initialize the layout
   constructor(options) {}
   // first time to pass the graph data into this layout
@@ -71,14 +71,14 @@ In the constructor, you can initialize some internal object you'll need for the
 The most important part is to create a 'map' to keep the position of nodes.
 
 ```js
-export default class RandomLayout extends BaseLayout {
+export default class RandomLayout extends GraphLayout {
   static defaultOptions = {
     viewportWidth: 1000,
     viewportHeight: 1000
   };
 
   constructor(options) {
-    // init BaseLayout
+    // init GraphLayout
     super(options);
     // give a name to this layout
     this._name = 'RandomLayout';
@@ -184,9 +184,9 @@ getEdgePosition = (edge) => {
 ### Full source code
 
 ```js
-import {BaseLayout} from '@deck.gl-community/graph-layers';
+import {GraphLayout} from '@deck.gl-community/graph-layers';
 
-export default class RandomLayout extends BaseLayout {
+export default class RandomLayout extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'RandomLayout';
diff --git a/examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx b/examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx
index a4713c6f..0085f2c1 100644
--- a/examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx
+++ b/examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx
@@ -6,7 +6,7 @@ import React, {useCallback, useEffect, useLayoutEffect, useMemo, useState} from
 import PropTypes from 'prop-types';
 import DeckGL from '@deck.gl/react';
 import {OrthographicView} from '@deck.gl/core';
-import {BaseLayout, Graph, GraphLayer, log, SimpleLayout} from '@deck.gl-community/graph-layers';
+import {GraphLayout, Graph, GraphLayer, log, SimpleLayout} from '@deck.gl-community/graph-layers';
 import {PositionedViewControl} from '@deck.gl-community/react';
 import {ViewControlWidget} from '@deck.gl-community/graph-layers';
 import '@deck.gl/widgets/stylesheet.css';
@@ -70,7 +70,7 @@ export const GraphGL = ({
     log.error('Invalid graph data class')();
     return null;
   }
-  if (!(layout instanceof BaseLayout)) {
+  if (!(layout instanceof GraphLayout)) {
     log.error('Invalid layout class')();
     return null;
   }
diff --git a/examples/graph-layers/graph-viewer-legacy/react-graph-layers/use-graph-engine.tsx b/examples/graph-layers/graph-viewer-legacy/react-graph-layers/use-graph-engine.tsx
index d89a9b2c..6b510034 100644
--- a/examples/graph-layers/graph-viewer-legacy/react-graph-layers/use-graph-engine.tsx
+++ b/examples/graph-layers/graph-viewer-legacy/react-graph-layers/use-graph-engine.tsx
@@ -3,9 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {useLayoutEffect, useRef, useState} from 'react';
-import {BaseLayout, Graph, GraphEngine} from '@deck.gl-community/graph-layers';
+import {GraphLayout, Graph, GraphEngine} from '@deck.gl-community/graph-layers';
 
-export const useGraphEngine = (graph: Graph, layout: BaseLayout): GraphEngine => {
+export const useGraphEngine = (graph: Graph, layout: GraphLayout): GraphEngine => {
   const [engine, setEngine] = useState(new GraphEngine(graph, layout));
   const isFirstMount = useRef(true);
 
diff --git a/examples/graph-layers/graph-viewer/app.tsx b/examples/graph-layers/graph-viewer/app.tsx
index 1c25a113..96ca61fc 100644
--- a/examples/graph-layers/graph-viewer/app.tsx
+++ b/examples/graph-layers/graph-viewer/app.tsx
@@ -9,7 +9,7 @@ import DeckGL from '@deck.gl/react';
 import {PositionedViewControl} from '@deck.gl-community/react';
 
 import {OrthographicView} from '@deck.gl/core';
-import {GraphEngine, GraphLayer, Graph, log, BaseLayout, SimpleLayout, D3ForceLayout, JSONLoader, NODE_TYPE} from '@deck.gl-community/graph-layers';
+import {GraphEngine, GraphLayer, Graph, log, GraphLayout, SimpleLayout, D3ForceLayout, JSONLoader, NODE_TYPE} from '@deck.gl-community/graph-layers';
 
 // import {ViewControlWidget} from '@deck.gl-community/graph-layers';
 import '@deck.gl/widgets/stylesheet.css';
diff --git a/examples/graph-layers/graph-viewer/layouts/hive-plot-layout.ts b/examples/graph-layers/graph-viewer/layouts/hive-plot-layout.ts
index dbca7902..78fb4009 100644
--- a/examples/graph-layers/graph-viewer/layouts/hive-plot-layout.ts
+++ b/examples/graph-layers/graph-viewer/layouts/hive-plot-layout.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout, EDGE_TYPE} from '../../src';
+import {GraphLayout, EDGE_TYPE} from '../../src';
 
 const defaultOptions = {
   innerRadius: 100,
@@ -54,7 +54,7 @@ const computeControlPoint = ({
   ];
 };
 
-export default class HivePlot extends BaseLayout {
+export default class HivePlot extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'HivePlot';
diff --git a/examples/graph-layers/graph-viewer/layouts/multi-graph-layout.ts b/examples/graph-layers/graph-viewer/layouts/multi-graph-layout.ts
index 02099054..9256da92 100644
--- a/examples/graph-layers/graph-viewer/layouts/multi-graph-layout.ts
+++ b/examples/graph-layers/graph-viewer/layouts/multi-graph-layout.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout, EDGE_TYPE} from '../../src';
+import {GraphLayout, EDGE_TYPE} from '../../src';
 import * as d3 from 'd3-force';
 
 const defaultOptions = {
@@ -33,7 +33,7 @@ function computeControlPoint(source, target, direction, offset) {
   ];
 }
 
-export default class ForceMultiGraphLayout extends BaseLayout {
+export default class ForceMultiGraphLayout extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'ForceMultiGraphLayout';
diff --git a/examples/graph-layers/graph-viewer/layouts/radial-layout.ts b/examples/graph-layers/graph-viewer/layouts/radial-layout.ts
index 9bb34a47..18bc7bb6 100644
--- a/examples/graph-layers/graph-viewer/layouts/radial-layout.ts
+++ b/examples/graph-layers/graph-viewer/layouts/radial-layout.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout, EDGE_TYPE} from '../../src';
+import {GraphLayout, EDGE_TYPE} from '../../src';
 
 const defaultOptions = {
   radius: 500,
@@ -59,7 +59,7 @@ const getPath = (node, targetId, path) => {
   return false;
 };
 
-export default class RadialLayout extends BaseLayout {
+export default class RadialLayout extends GraphLayout {
   constructor(options) {
     super(options);
     this._name = 'RadialLayout';
diff --git a/examples/playground/json-examples/graph-layer.json b/examples/playground/json-examples/graph-layer.json
new file mode 100644
index 00000000..ef10ce3a
--- /dev/null
+++ b/examples/playground/json-examples/graph-layer.json
@@ -0,0 +1,40 @@
+{
+  "description": "@deck.gl-community/graph-layers JSON bindings",
+  "websiteUrl": "https://deck.gl-community/#/examples/playground",
+  "initialViewState": {
+    "longitude": -74,
+    "latitude": 40.7,
+    "zoom": 11,
+    "maxZoom": 16,
+    "pitch": 0,
+    "bearing": 0
+  },
+  "views": [
+    {
+      "@@type": "OrthographicView",
+      "controller": true
+    }
+  ],
+  "layers": [
+    {
+      "@@type": "GraphLayer",
+      "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/scatterplot/manhattan.json",
+      "engine": {
+        "@@type": "GraphEngine",
+        "graph": {},
+        "layout": {
+          "@@type": "SimpleLayout"
+        }
+      },
+      "radiusScale": 30,
+      "radiusMinPixels": 0.25,
+      "getPosition": "@@=-",
+      "getFillColor": [
+        0,
+        128,
+        255
+      ],
+      "getRadius": 1
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/playground/json-examples/index.js b/examples/playground/json-examples/index.js
index 497db2e5..dbeb4bf8 100644
--- a/examples/playground/json-examples/index.js
+++ b/examples/playground/json-examples/index.js
@@ -1,5 +1,6 @@
 
 import tileSource from './tile-source.json';
+import graphLayer from './graph-layer.json';
 
 import heatmap from './3d-heatmap.json';
 import heatmapMinimap from './3d-heatmap-minimap.json';
@@ -18,6 +19,7 @@ import dotText from './dot-text.json';
 
 export default {
   // WEBSITE EXAMPLES AS JSON PAYLOADS
+  'Graph (GraphLayer)': graphLayer,
   'website/Vector Tiles (TileSourceLayer)': tileSource,
   'website/3D Heatmap (HexagonLayer)': heatmap,
   'website/3D Heatmap (wth Minimap)': heatmapMinimap,
diff --git a/examples/playground/src/app.tsx b/examples/playground/src/app.tsx
index f20456ae..c96cbe2b 100644
--- a/examples/playground/src/app.tsx
+++ b/examples/playground/src/app.tsx
@@ -105,8 +105,8 @@ export class App extends Component {
           initialViewState: {
             ...initialViewState,
             // Tells deck.gl to animate the camera move to the new tileset
-            transitionDuration: 4000,
-            transitionInterpolator: new FlyToInterpolator()
+            // transitionDuration: 4000,
+            // transitionInterpolator: new FlyToInterpolator()
           }
         });
       }
diff --git a/examples/playground/src/json-configuration.ts b/examples/playground/src/json-configuration.ts
index 312fc56e..f4fa1416 100644
--- a/examples/playground/src/json-configuration.ts
+++ b/examples/playground/src/json-configuration.ts
@@ -50,9 +50,9 @@ export const JSON_CONFIGURATION = {
     ...MeshLayers,
 
     // community layer modules
-    CommunityLayers,
-    EditableLayers,
-    GraphLayers,
+    ...CommunityLayers,
+    ...EditableLayers,
+    ...GraphLayers,
     // ArrowLayers,
   },
 
diff --git a/modules/graph-layers/src/core/graph-engine.ts b/modules/graph-layers/src/core/graph-engine.ts
index 479a96d0..d6fe22f6 100644
--- a/modules/graph-layers/src/core/graph-engine.ts
+++ b/modules/graph-layers/src/core/graph-engine.ts
@@ -2,23 +2,43 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout} from './base-layout';
+import type {Node} from '../graph/node';
+import {Edge} from '../graph/edge';
+import {Graph} from '../graph/graph';
+import {GraphLayout} from './graph-layout';
 import {Cache} from './cache';
-import {Edge} from './edge';
-import {Graph} from './graph';
 
-// Graph engine controls the graph data and layout calculation
+export type GraphEngineProps = {
+  graph: Graph;
+  layout: GraphLayout;
+};
+
+/** Graph engine controls the graph data and layout calculation */
 export class GraphEngine extends EventTarget {
+  props: Readonly<Required<GraphEngineProps>>;
+
   private readonly _graph: Graph;
-  private readonly _layout: BaseLayout;
+  private readonly _layout: GraphLayout;
   private readonly _cache = new Cache<'nodes' | 'edges', Node[] | Edge[]>();
   private _layoutDirty = false;
   private _transactionInProgress = false;
 
-  constructor(graph: Graph, layout: BaseLayout) {
+  constructor(props: GraphEngineProps);
+  /** @deprecated Use props constructor: new GraphEngine(props) */
+  constructor(graph: Graph, layout: GraphLayout);
+
+  constructor(props: GraphEngineProps | Graph, layout?: GraphLayout) {
     super();
-    this._graph = graph;
-    this._layout = layout;
+    if (props instanceof Graph) {
+      props = {
+        graph: props,
+        layout
+      };
+    }
+
+    this.props = props;
+    this._graph = props.graph;
+    this._layout = props.layout;
   }
 
   /** Getters */
@@ -39,9 +59,9 @@ export class GraphEngine extends EventTarget {
     return this._cache.get('edges') as Edge[];
   };
 
-  getNodePosition = (node) => this._layout.getNodePosition(node);
+  getNodePosition = (node: Node) => this._layout.getNodePosition(node);
 
-  getEdgePosition = (edge) => this._layout.getEdgePosition(edge);
+  getEdgePosition = (edge: Edge) => this._layout.getEdgePosition(edge);
 
   getGraphVersion = () => this._graph.version;
 
diff --git a/modules/graph-layers/src/core/base-layout.ts b/modules/graph-layers/src/core/graph-layout.ts
similarity index 61%
rename from modules/graph-layers/src/core/base-layout.ts
rename to modules/graph-layers/src/core/graph-layout.ts
index 49f19dd3..3c09d171 100644
--- a/modules/graph-layers/src/core/base-layout.ts
+++ b/modules/graph-layers/src/core/graph-layout.ts
@@ -2,91 +2,96 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {Graph} from '../graph/graph';
+import type {Node} from '../graph/node';
+import type {Edge} from '../graph/edge';
+
 import isEqual from 'lodash.isequal';
-import {EDGE_TYPE, LAYOUT_STATE} from './constants';
+import {EDGE_TYPE} from './constants';
+
+// the status of the layout
+export type GraphLayoutState = 'INIT' | 'START' | 'CALCULATING' | 'DONE' | 'ERROR';
 
-export type BaseLayoutOptions = {};
+export type GraphLayoutOptions = {};
 
-/**
- * All the layout classes are extended from this base layout class.
- */
-export class BaseLayout extends EventTarget {
+/** All the layout classes are extended from this base layout class. */
+export class GraphLayout extends EventTarget {
   /** Name of the layout. */
-  protected readonly _name: string = 'BaseLayout';
+  protected readonly _name: string = 'GraphLayout';
   /** Extra configuration options of the layout. */
-  protected _options: BaseLayoutOptions;
+  protected _options: GraphLayoutOptions;
 
   public version = 0;
-  public state = LAYOUT_STATE.INIT;
+  public state: GraphLayoutState = 'INIT';
 
   /**
-   * Constructor of BaseLayout
+   * Constructor of GraphLayout
    * @param  {Object} options extra configuration options of the layout
    */
-  constructor(options: BaseLayoutOptions) {
+  constructor(options: GraphLayoutOptions) {
     super();
     this._options = options;
   }
 
   /**
-   * @fires BaseLayout#onLayoutStart
+   * @fires GraphLayout#onLayoutStart
    * @protected
    */
   _onLayoutStart(): void {
-    this._updateState(LAYOUT_STATE.CALCULATING);
+    this._updateState('CALCULATING');
 
     /**
      * Layout calculation start.
      *
-     * @event BaseLayout#onLayoutChange
+     * @event GraphLayout#onLayoutChange
      * @type {CustomEvent}
      */
     this.dispatchEvent(new CustomEvent('onLayoutStart'));
   }
 
   /**
-   * @fires BaseLayout#onLayoutChange
+   * @fires GraphLayout#onLayoutChange
    * @protected
    */
   _onLayoutChange(): void {
-    this._updateState(LAYOUT_STATE.CALCULATING);
+    this._updateState('CALCULATING');
 
     /**
      * Layout calculation iteration.
      *
-     * @event BaseLayout#onLayoutChange
+     * @event GraphLayout#onLayoutChange
      * @type {CustomEvent}
      */
     this.dispatchEvent(new CustomEvent('onLayoutChange'));
   }
 
   /**
-   * @fires BaseLayout#onLayoutDone
+   * @fires GraphLayout#onLayoutDone
    * @protected
    */
   _onLayoutDone(): void {
-    this._updateState(LAYOUT_STATE.DONE);
+    this._updateState('DONE');
 
     /**
      * Layout calculation is done.
      *
-     * @event BaseLayout#onLayoutDone
+     * @event GraphLayout#onLayoutDone
      * @type {CustomEvent}
      */
     this.dispatchEvent(new CustomEvent('onLayoutDone'));
   }
 
   /**
-   * @fires BaseLayout#onLayoutError
+   * @fires GraphLayout#onLayoutError
    * @protected
    */
   _onLayoutError(): void {
-    this._updateState(LAYOUT_STATE.ERROR);
+    this._updateState('ERROR');
 
     /**
      * Layout calculation went wrong.
      *
-     * @event BaseLayout#onLayoutError
+     * @event GraphLayout#onLayoutError
      * @type {CustomEvent}
      */
     this.dispatchEvent(new CustomEvent('onLayoutError'));
@@ -97,8 +102,8 @@ export class BaseLayout extends EventTarget {
    * @param  {Object} layout The layout to be compared.
    * @return {Bool}   True if the layout is the same as itself.
    */
-  equals(layout: BaseLayout): boolean {
-    if (!layout || !(layout instanceof BaseLayout)) {
+  equals(layout: GraphLayout): boolean {
+    if (!layout || !(layout instanceof GraphLayout)) {
       return false;
     }
     return this._name === layout._name && isEqual(this._options, layout._options);
@@ -107,9 +112,9 @@ export class BaseLayout extends EventTarget {
   /** virtual functions: will be implemented in the child class */
 
   // first time to pass the graph data into this layout
-  initializeGraph(graph) {}
+  initializeGraph(graph: Graph) {}
   // update the existing graph
-  updateGraph(graph) {}
+  updateGraph(graph: Graph) {}
   // start the layout calculation
   start() {}
   // update the layout calculation
@@ -123,7 +128,7 @@ export class BaseLayout extends EventTarget {
     return [0, 0];
   }
   // access the layout information of the edge
-  getEdgePosition(edge) {
+  getEdgePosition(edge: Edge) {
     return {
       type: EDGE_TYPE.LINE,
       sourcePosition: [0, 0],
@@ -134,17 +139,17 @@ export class BaseLayout extends EventTarget {
 
   /**
    * Pin the node to a designated position, and the node won't move anymore
-   * @param  {Object} node Node to be locked
-   * @param  {Number} x    x coordinate
-   * @param  {Number} y    y coordinate
+   * @param  node Node to be locked
+   * @param  x    x coordinate
+   * @param  y    y coordinate
    */
-  lockNodePosition(node, x, y) {}
+  lockNodePosition(node: Node, x: number, y: number) {}
 
   /**
    * Unlock the node, the node will be able to move freely.
    * @param  {Object} node Node to be unlocked
    */
-  unlockNodePosition(node) {}
+  unlockNodePosition(node: Node) {}
 
   _updateState(state) {
     this.state = state;
diff --git a/modules/graph-layers/src/core/interaction-manager.ts b/modules/graph-layers/src/core/interaction-manager.ts
index ab9191dd..235adca6 100644
--- a/modules/graph-layers/src/core/interaction-manager.ts
+++ b/modules/graph-layers/src/core/interaction-manager.ts
@@ -3,9 +3,9 @@
 // Copyright (c) vis.gl contributors
 
 import {EDGE_STATE, NODE_STATE, ValueOf} from './constants';
-import {Edge} from './edge';
+import {Edge} from '../graph/edge';
+import {Node} from '../graph/node';
 import {GraphEngine} from './graph-engine';
-import {Node} from './node';
 
 const NODE_TO_EDGE_STATE_MAP: Record<ValueOf<typeof NODE_STATE>, ValueOf<typeof EDGE_STATE>> = {
   [NODE_STATE.DEFAULT]: EDGE_STATE.DEFAULT,
diff --git a/modules/graph-layers/src/utils/create-graph.ts b/modules/graph-layers/src/graph/create-graph.ts
similarity index 70%
rename from modules/graph-layers/src/utils/create-graph.ts
rename to modules/graph-layers/src/graph/create-graph.ts
index ea9e6cdb..c91b902e 100644
--- a/modules/graph-layers/src/utils/create-graph.ts
+++ b/modules/graph-layers/src/graph/create-graph.ts
@@ -2,11 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Edge} from '../core/edge';
-import {Node} from '../core/node';
-import {Graph} from '../core/graph';
+import {Edge} from './edge';
+import {Node} from './node';
+import {Graph} from './graph';
 
-export function createGraph({name, nodes, edges, nodeParser, edgeParser}) {
+/** Create a graph from a list of Nodes and edges */
+export function createGraph(props: {name; nodes; edges; nodeParser; edgeParser}) {
+  const {name, nodes, edges, nodeParser, edgeParser} = props;
   // create a new empty graph
   const graph = new Graph();
 
diff --git a/modules/graph-layers/src/core/edge.ts b/modules/graph-layers/src/graph/edge.ts
similarity index 76%
rename from modules/graph-layers/src/core/edge.ts
rename to modules/graph-layers/src/graph/edge.ts
index 7381d519..12036edd 100644
--- a/modules/graph-layers/src/core/edge.ts
+++ b/modules/graph-layers/src/graph/edge.ts
@@ -3,17 +3,23 @@
 // Copyright (c) vis.gl contributors
 
 // Basic data structure of an edge
-import {EDGE_STATE} from './constants';
+import {EDGE_STATE} from '../core/constants';
 import {Node} from './node';
 
-interface EdgeOptions {
+export interface EdgeOptions {
+  /** the unique ID of the edge */
   id: string | number;
+  /** the ID of the source node */
   sourceId: string | number;
+  /** the ID of the target node */
   targetId: string | number;
+  /** whether the edge is directed or not */
   directed?: boolean;
+  /** origin data reference */
   data: Record<string, unknown>;
 }
 
+/** Basic edge data structure */
 export class Edge {
   /** Unique uuid of the edge. */
   public id: string | number;
@@ -34,11 +40,7 @@ export class Edge {
 
   /**
    * The constructor
-   * @param  {String|Number} options.id - the unique ID of the edge
-   * @param  {String|Number} options.sourceId - the ID of the source node
-   * @param  {String|Number} options.targetId - the ID of the target node
-   * @param  {Boolean} options.directed - whether the edge is directed or not
-   * @param  {Record<string, unknown>} options.data - origin data reference
+   * @param options.id - information about the edge
    */
   constructor({id, sourceId, targetId, data, directed = false}: EdgeOptions) {
     this.id = id;
@@ -66,7 +68,7 @@ export class Edge {
 
   /**
    * Get the ID of the source node.
-   * @return {String|Number} the ID of the source node.
+   * @return the ID of the source node.
    */
   getSourceNodeId(): string | number {
     return this._sourceId;
@@ -74,7 +76,7 @@ export class Edge {
 
   /**
    * Get the ID of the target node.
-   * @return {String|Number} the ID of the target node.
+   * @return the ID of the target node.
    */
   getTargetNodeId(): string | number {
     return this._targetId;
@@ -82,8 +84,8 @@ export class Edge {
 
   /**
    * Return of the value of the selected property key.
-   * @param  {String} key - property key.
-   * @return {Any} - the value of the property.
+   * @param  key - property key.
+   * @return - the value of the property.
    */
   getPropertyValue(key: string): unknown {
     // try to search the key within this object
@@ -100,7 +102,7 @@ export class Edge {
 
   /**
    * Set the origin data as a reference.
-   * @param {Object} data - the origin data.
+   * @param data - the origin data.
    */
   setData(data: Record<string, unknown>): void {
     this._data = data;
@@ -108,8 +110,8 @@ export class Edge {
 
   /**
    * Update a data property.
-   * @param {String} key - the key of the property
-   * @param {Any} value - the value of the property.
+   * @param key - the key of the property
+   * @param value - the value of the property.
    */
   setDataProperty(key: string, value: unknown): void {
     this._data[key] = value;
@@ -117,7 +119,7 @@ export class Edge {
 
   /**
    * Set edge state
-   * @param {String} state - one of EDGE_STATE
+   * @param state - one of EDGE_STATE
    */
   setState(state: string): void {
     this.state = state;
@@ -125,7 +127,7 @@ export class Edge {
 
   /**
    * Get edge state
-   * @returns {string} state - one of EDGE_STATE
+   * @returns state - one of EDGE_STATE
    */
   getState(): string {
     return this.state;
diff --git a/modules/graph-layers/src/core/graph.ts b/modules/graph-layers/src/graph/graph.ts
similarity index 84%
rename from modules/graph-layers/src/core/graph.ts
rename to modules/graph-layers/src/graph/graph.ts
index 26f2fb62..6e9acc59 100644
--- a/modules/graph-layers/src/core/graph.ts
+++ b/modules/graph-layers/src/graph/graph.ts
@@ -3,11 +3,11 @@
 // Copyright (c) vis.gl contributors
 
 import {log} from '../utils/log';
-import {Cache} from './cache';
+import {Cache} from '../core/cache';
 import {Edge} from './edge';
 import {Node} from './node';
 
-// Basic graph data structure
+/** Basic graph data structure */
 export class Graph extends EventTarget {
   /** List object of nodes. */
   private _nodeMap: Record<string, Node> = {};
@@ -25,7 +25,7 @@ export class Graph extends EventTarget {
 
   /**
    * The constructor of the Graph class.
-   * @param  {Object} graph - copy the graph if this exists.
+   * @param graph - copy the graph if this exists.
    */
   constructor(graph: Graph | null = null) {
     super();
@@ -41,14 +41,14 @@ export class Graph extends EventTarget {
 
   /**
    * Set graph name
-   * @param {string} name
+   * @param name
    */
   setGraphName(name: string): void {
     this._name = name;
   }
 
   /** Get the name of the graph. Default value is the time stamp when creating this graph.
-   * @return {string} graph name.
+   * @return graph name.
    */
   getGraphName(): string {
     return this._name.toString();
@@ -69,7 +69,7 @@ export class Graph extends EventTarget {
 
   /**
    * Add a new node to the graph.
-   * @param {Node} node - expect a Node object to be added to the graph.
+   * @paramnode - expect a Node object to be added to the graph.
    */
   addNode(node: Node): void {
     // add it to the list and map
@@ -81,7 +81,7 @@ export class Graph extends EventTarget {
 
   /**
    * Batch add nodes to the graph.
-   * @param  {Node[]} nodes - a list of nodes to be added.
+   * @param nodes - a list of nodes to be added.
    */
   batchAddNodes(nodes: Node[]): void {
     // convert an array of objects to an object
@@ -108,7 +108,7 @@ export class Graph extends EventTarget {
 
   /**
    * Get the node map of the graph. The key of the map is the ID of the nodes.
-   * @return {Object} - a map of nodes keyed by node IDs.
+   * @return - a map of nodes keyed by node IDs.
    */
   getNodeMap(): Record<string | number, Node> {
     return this._nodeMap;
@@ -116,8 +116,8 @@ export class Graph extends EventTarget {
 
   /**
    * Find a node by id
-   * @param  {String} nodeId The id of the node
-   * @return {Object} Node
+   * @param nodeId The id of the node
+   * @return  Node
    */
   findNode(nodeId: string | number): Node | undefined {
     return this._nodeMap[nodeId];
@@ -125,7 +125,7 @@ export class Graph extends EventTarget {
 
   /**
    * Update the indicated node to the provided value
-   * @param {Node} node
+   * @param node
    */
   updateNode(node: Node): void {
     this._nodeMap[node.getId()] = node;
@@ -135,7 +135,7 @@ export class Graph extends EventTarget {
 
   /**
    * Add a new edge to the graph.
-   * @param {Edge} edge - expect a Edge object to be added to the graph.
+   * @param edge - expect a Edge object to be added to the graph.
    */
   addEdge(edge: Edge): void {
     const sourceNode = this.findNode(edge.getSourceNodeId());
@@ -155,7 +155,7 @@ export class Graph extends EventTarget {
 
   /**
    * Batch add edges to the graph
-   * @param  {Edge[]} edges - a list of edges to be added.
+   * @param edges - a list of edges to be added.
    */
   batchAddEdges(edges: Edge[]): void {
     edges.forEach((edge) => this.addEdge(edge));
@@ -164,7 +164,7 @@ export class Graph extends EventTarget {
 
   /**
    * Update the indicated edge to the provided value
-   * @param {Edge} edge
+   * @param edge
    */
   updateEdge(edge: Edge): void {
     this._edgeMap[edge.getId()] = edge;
@@ -174,7 +174,7 @@ export class Graph extends EventTarget {
 
   /**
    * Remove a node from the graph by node ID
-   * @param  {String|Number} nodeId - the ID of the target node.
+   * @param nodeId - the ID of the target node.
    */
   removeNode(nodeId: string | number): void {
     const node = this.findNode(nodeId);
@@ -194,7 +194,7 @@ export class Graph extends EventTarget {
 
   /**
    * Get all the edges of the graph.
-   * @return {Edge[]} get all the edges in the graph.
+   * @return get all the edges in the graph.
    */
   getEdges(): Edge[] {
     this._updateCache('edges', () => Object.values(this._edgeMap));
@@ -204,7 +204,7 @@ export class Graph extends EventTarget {
 
   /**
    * Get the edge map of the graph. The key of the map is the ID of the edges.
-   * @return {Object} - a map of edges keyed by edge IDs.
+   * @return - a map of edges keyed by edge IDs.
    */
   getEdgeMap(): Record<string, Edge> {
     return this._edgeMap;
@@ -231,8 +231,8 @@ export class Graph extends EventTarget {
 
   /**
    * Find the edge by edge ID.
-   * @param  {String|Number} id - the target edge ID
-   * @return {Edge} - the target edge.
+   * @param id - the target edge ID
+   * @return - the target edge.
    */
   findEdge(edgeId: string | number): Edge {
     return this._edgeMap[edgeId];
@@ -240,8 +240,8 @@ export class Graph extends EventTarget {
 
   /**
    * Return all the connected edges of a node by nodeID.
-   * @param  {String|Number} nodeId - the target node ID
-   * @return {Edge[]} - an array of the connected edges.
+   * @param  nodeId - the target node ID
+   * @return - an array of the connected edges.
    */
   getConnectedEdges(nodeId: string | number): Edge[] {
     const node = this.findNode(nodeId);
@@ -254,8 +254,8 @@ export class Graph extends EventTarget {
 
   /**
    * Return all the sibling nodes of a node by nodeID.
-   * @param  {String|Number} nodeId - the target node ID
-   * @return {Node[]} - an array of the sibling nodes.
+   * @param nodeId - the target node ID
+   * @return - an array of the sibling nodes.
    */
   getNodeSiblings(nodeId: string | number): Node[] {
     const node = this.findNode(nodeId);
@@ -268,8 +268,8 @@ export class Graph extends EventTarget {
 
   /**
    * Get the degree of a node.
-   * @param  {String|Number} nodeId - the target node ID.
-   * @return {Number} - the degree of the node.
+   * @param nodeId - the target node ID.
+   * @return - the degree of the node.
    */
   getDegree(nodeId: string | number): number {
     const node = this.findNode(nodeId);
@@ -322,14 +322,14 @@ export class Graph extends EventTarget {
 
   /**
    * Check the equality of two graphs data by checking last update time stamp
-   * @param  {Object} g Another graph to be compared against itself
-   * @return {Bool}   True if the graph is the same as itself.
+   * @param graph Another graph to be compared against itself
+   * @return true if the graph is the same as itself.
    */
-  equals(g: Graph): boolean {
-    if (!g || !(g instanceof Graph)) {
+  equals(graph: Graph): boolean {
+    if (!graph || !(graph instanceof Graph)) {
       return false;
     }
-    return this.version === g.version;
+    return this.version === graph.version;
   }
 
   _bumpVersion(): void {
diff --git a/modules/graph-layers/src/core/node.ts b/modules/graph-layers/src/graph/node.ts
similarity index 80%
rename from modules/graph-layers/src/core/node.ts
rename to modules/graph-layers/src/graph/node.ts
index ad0726b4..779eda14 100644
--- a/modules/graph-layers/src/core/node.ts
+++ b/modules/graph-layers/src/graph/node.ts
@@ -2,17 +2,20 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {NODE_STATE, ValueOf} from './constants';
+import {NODE_STATE, ValueOf} from '../core/constants';
 import {Edge} from './edge';
 
-interface NodeOptions {
+/** Properties for creating a new node */
+export interface NodeOptions {
+  /** the unique ID of the node */
   id: number | string;
   selectable?: boolean;
   highlightConnectedEdges?: boolean;
+  /* origin data reference */
   data: Record<string, unknown>;
 }
 
-// Basic data structure of a node
+/** Basic data structure of a node */
 export class Node {
   public id: string | number;
   /** Keep a reference to origin data. */
@@ -29,8 +32,6 @@ export class Node {
   public readonly isNode = true;
   /**
    * The constructor of a node
-   * @param  {String|Number} options.id   - the unique ID of the node
-   * @param  {Record<string, unknown>} options.data - origin data reference
    */
   constructor({id, selectable = false, highlightConnectedEdges = false, data = {}}: NodeOptions) {
     this.id = id;
@@ -41,7 +42,7 @@ export class Node {
 
   /**
    * Return the ID of the node
-   * @return {String|Number} - the ID of the node.
+   * @return - the ID of the node.
    */
   getId(): string | number {
     return this.id;
@@ -57,7 +58,7 @@ export class Node {
 
   /**
    * Return the in-degree of the node.
-   * @return {Number} - the in-degree of the node.
+   * @return - the in-degree of the node.
    */
   getInDegree(): number {
     const nodeId = this.getId();
@@ -72,7 +73,7 @@ export class Node {
 
   /**
    * Return the out-degree of the node.
-   * @return {Number} - the out-degree of the node.
+   * @return - the out-degree of the node.
    */
   getOutDegree(): number {
     const nodeId = this.getId();
@@ -87,7 +88,7 @@ export class Node {
 
   /**
    * Return all the IDs of the sibling nodes.
-   * @return {String[]} [description]
+   * @return [description]
    */
   getSiblingIds(): (string | number)[] {
     const nodeId = this.getId();
@@ -106,7 +107,7 @@ export class Node {
 
   /**
    * Return all the connected edges.
-   * @return {Object[]} - an array of the connected edges.
+   * @return - an array of the connected edges.
    */
   getConnectedEdges(): Edge[] {
     return Object.values(this._connectedEdges);
@@ -114,8 +115,8 @@ export class Node {
 
   /**
    * Return of the value of the selected property key.
-   * @param  {String} key - property key.
-   * @return {Any} - the value of the property or undefined (not found).
+   * @param key - property key.
+   * @return - the value of the property or undefined (not found).
    */
   getPropertyValue(key: string): unknown {
     // try to search the key within this object
@@ -132,7 +133,7 @@ export class Node {
 
   /**
    * Set the new node data.
-   * @param {Record<string, unknown>} data - the new data of the node
+   * @param data - the new data of the node
    */
   setData(data: Record<string, unknown>): void {
     this._data = data;
@@ -140,8 +141,8 @@ export class Node {
 
   /**
    * Update a data property.
-   * @param {String} key - the key of the property
-   * @param {Any} value - the value of the property.
+   * @param key - the key of the property
+   * @param value - the value of the property.
    */
   setDataProperty(key: string, value: unknown): void {
     this._data[key] = value;
@@ -149,7 +150,7 @@ export class Node {
 
   /**
    * Set node state
-   * @param {String} state - one of NODE_STATE
+   * @param state - one of NODE_STATE
    */
   setState(state: ValueOf<typeof NODE_STATE>): void {
     this.state = state;
@@ -157,7 +158,7 @@ export class Node {
 
   /**
    * Get node state
-   * @returns {string} state - one of NODE_STATE
+   * @returns state - one of NODE_STATE
    */
   getState(): ValueOf<typeof NODE_STATE> {
     return this.state;
@@ -165,7 +166,7 @@ export class Node {
 
   /**
    * Add connected edges to the node
-   * @param {Edge || Edge[]} edge an edge or an array of edges to be added to this._connectedEdges
+   * @param edge an edge or an array of edges to be added to this._connectedEdges
    */
   addConnectedEdges(edge: Edge | Edge[]): void {
     const iterableEdges = Array.isArray(edge) ? edge : [edge];
@@ -177,7 +178,7 @@ export class Node {
 
   /**
    * Remove edges from this._connectedEdges
-   * @param {Edge | Edge[]} edge an edge or an array of edges to be removed from this._connectedEdges
+   * @param edge an edge or an array of edges to be removed from this._connectedEdges
    */
   removeConnectedEdges(edge: Edge | Edge[]): void {
     const iterableEdges = Array.isArray(edge) ? edge : [edge];
diff --git a/modules/graph-layers/src/index.ts b/modules/graph-layers/src/index.ts
index f14e95d2..1868705a 100644
--- a/modules/graph-layers/src/index.ts
+++ b/modules/graph-layers/src/index.ts
@@ -2,45 +2,37 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-// graph-layers core
+// core - Graph representation and layout
+export {Graph} from './graph/graph';
+export {Node} from './graph/node';
+export {Edge} from './graph/edge';
+export {createGraph} from './graph/create-graph';
+
 export {GraphEngine} from './core/graph-engine';
-export {Graph} from './core/graph';
-export {Node} from './core/node';
-export {Edge} from './core/edge';
-export {
-  NODE_STATE,
-  NODE_TYPE,
-  EDGE_TYPE,
-  EDGE_DECORATOR_TYPE,
-  LAYOUT_STATE,
-  MARKER_TYPE
-} from './core/constants';
 
 // graph-layers layouts
-export {BaseLayout} from './core/base-layout';
+export type {GraphLayoutState} from './core/graph-layout';
+export {GraphLayout} from './core/graph-layout';
 export {D3ForceLayout} from './layouts/d3-force/d3-force-layout';
 export {GPUForceLayout} from './layouts/gpu-force/gpu-force-layout';
 export {SimpleLayout} from './layouts/simple-layout/simple-layout';
 
-// graph-layers loaders
-export {JSONLoader} from './loaders/json-loader';
-export {basicNodeParser} from './loaders/node-parsers';
-export {basicEdgeParser} from './loaders/edge-parsers';
-
-// graph-layers utils
-export {createGraph} from './utils/create-graph';
-export * from './utils/layer-utils';
-export * from './utils/log';
+export {NODE_STATE, NODE_TYPE, EDGE_TYPE, EDGE_DECORATOR_TYPE, MARKER_TYPE} from './core/constants';
 
 // deck.gl components
 export {GraphLayer} from './layers/graph-layer';
 export {EdgeLayer} from './layers/edge-layer';
 
-// DEPRECATED
-
-/** @deprecated Use EdgeLayer */
-export {EdgeLayer as CompositeEdgeLayer} from './layers/edge-layer';
-
 // Widgets
 
 export {ViewControlWidget} from './widgets/view-control-widget';
+
+// graph format loaders
+export {loadSimpleJSONGraph} from './loaders/simple-json-graph-loader';
+
+// utils
+export {mixedGetPosition} from './utils/layer-utils';
+export {log} from './utils/log';
+
+// DEPRECATED
+export {JSONLoader} from './loaders/simple-json-graph-loader';
diff --git a/modules/graph-layers/src/layers/graph-layer.ts b/modules/graph-layers/src/layers/graph-layer.ts
index 9709966e..7324000d 100644
--- a/modules/graph-layers/src/layers/graph-layer.ts
+++ b/modules/graph-layers/src/layers/graph-layer.ts
@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {COORDINATE_SYSTEM, CompositeLayer, CompositeLayerProps} from '@deck.gl/core';
+import type {CompositeLayerProps} from '@deck.gl/core';
+import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
 
 import {Stylesheet} from '../style/style-sheet';
 import {NODE_TYPE, EDGE_DECORATOR_TYPE} from '../core/constants';
diff --git a/modules/graph-layers/src/layouts/d3-force/d3-force-layout.ts b/modules/graph-layers/src/layouts/d3-force/d3-force-layout.ts
index 5e4d44f7..464f8e87 100644
--- a/modules/graph-layers/src/layouts/d3-force/d3-force-layout.ts
+++ b/modules/graph-layers/src/layouts/d3-force/d3-force-layout.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout} from '../../core/base-layout';
+import {GraphLayout} from '../../core/graph-layout';
 
 import {EDGE_TYPE} from '../../core/constants';
 
@@ -15,7 +15,7 @@ export type D3ForceLayoutOptions = {
   getCollisionRadius?: number;
 };
 
-export class D3ForceLayout extends BaseLayout {
+export class D3ForceLayout extends GraphLayout {
   static defaultOptions: Required<D3ForceLayoutOptions> = {
     alpha: 0.3,
     resumeAlpha: 0.1,
diff --git a/modules/graph-layers/src/layouts/gpu-force/gpu-force-layout.ts b/modules/graph-layers/src/layouts/gpu-force/gpu-force-layout.ts
index 09d310bd..5842d554 100644
--- a/modules/graph-layers/src/layouts/gpu-force/gpu-force-layout.ts
+++ b/modules/graph-layers/src/layouts/gpu-force/gpu-force-layout.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout} from '../../core/base-layout';
+import {GraphLayout} from '../../core/graph-layout';
 
 import {EDGE_TYPE} from '../../core/constants';
 
@@ -18,7 +18,7 @@ export type GPUForceLayoutOptions = {
 /**
  * @todo this layout should be updated with the organizational and logic improvements made in d3-force
  */
-export class GPUForceLayout extends BaseLayout {
+export class GPUForceLayout extends GraphLayout {
   static defaultOptions: Required<GPUForceLayoutOptions> = {
     alpha: 0.3,
     resumeAlpha: 0.1,
diff --git a/modules/graph-layers/src/layouts/simple-layout/simple-layout.ts b/modules/graph-layers/src/layouts/simple-layout/simple-layout.ts
index 4502aab9..ef6c8374 100644
--- a/modules/graph-layers/src/layouts/simple-layout/simple-layout.ts
+++ b/modules/graph-layers/src/layouts/simple-layout/simple-layout.ts
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {BaseLayout, BaseLayoutOptions} from '../../core/base-layout';
-import {Node} from '../../core/node';
+import {GraphLayout, GraphLayoutOptions} from '../../core/graph-layout';
+import {Node} from '../../graph/node';
 import {EDGE_TYPE} from '../../core/constants';
-import {Graph} from '../../core/graph';
+import {Graph} from '../../graph/graph';
 
-export type SimpleLayoutOptions = BaseLayoutOptions & {
+export type SimpleLayoutOptions = GraphLayoutOptions & {
   /** The accessor lets the application supply the position ([x, y]) of each node.
    * @example
     ```js
@@ -28,7 +28,7 @@ export type SimpleLayoutOptions = BaseLayoutOptions & {
 };
 
 /** A basic layout where the application controls positions of each node */
-export class SimpleLayout extends BaseLayout {
+export class SimpleLayout extends GraphLayout {
   static defaultOptions: Required<SimpleLayoutOptions> = {
     nodePositionAccessor: (node) =>
       [node.getPropertyValue('x'), node.getPropertyValue('y')] as [number, number]
diff --git a/modules/graph-layers/src/loaders/edge-parsers.ts b/modules/graph-layers/src/loaders/edge-parsers.ts
index 9a17c019..c95c2c61 100644
--- a/modules/graph-layers/src/loaders/edge-parsers.ts
+++ b/modules/graph-layers/src/loaders/edge-parsers.ts
@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {EdgeOptions} from '../graph/edge';
 import {log} from '../utils/log';
 
-export function basicEdgeParser(edge) {
+export function basicEdgeParser(edge: any): Omit<EdgeOptions, 'data'> {
   const {id, directed, sourceId, targetId} = edge;
 
   if (sourceId === undefined || targetId === undefined) {
diff --git a/modules/graph-layers/src/loaders/json-loader.ts b/modules/graph-layers/src/loaders/json-loader.ts
index a795e6dc..e5c2a344 100644
--- a/modules/graph-layers/src/loaders/json-loader.ts
+++ b/modules/graph-layers/src/loaders/json-loader.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {createGraph} from '../utils/create-graph';
+import {createGraph} from '../graph/create-graph';
 import {basicNodeParser} from './node-parsers';
 import {basicEdgeParser} from './edge-parsers';
 import {log} from '../utils/log';
diff --git a/modules/graph-layers/src/loaders/node-parsers.ts b/modules/graph-layers/src/loaders/node-parsers.ts
index f0843e59..777f3c90 100644
--- a/modules/graph-layers/src/loaders/node-parsers.ts
+++ b/modules/graph-layers/src/loaders/node-parsers.ts
@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {NodeOptions} from '../graph/node';
 import {log} from '../utils/log';
 
-export function basicNodeParser(node) {
+export function basicNodeParser(node: any): Pick<NodeOptions, 'id'> {
   if (node.id === undefined) {
     log.error('Invalid node: id is missing.')();
     return null;
diff --git a/modules/graph-layers/src/loaders/simple-json-graph-loader.ts b/modules/graph-layers/src/loaders/simple-json-graph-loader.ts
new file mode 100644
index 00000000..38f53a48
--- /dev/null
+++ b/modules/graph-layers/src/loaders/simple-json-graph-loader.ts
@@ -0,0 +1,28 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {createGraph} from '../graph/create-graph';
+import {log} from '../utils/log';
+import {basicNodeParser} from './node-parsers';
+import {basicEdgeParser} from './edge-parsers';
+
+/** @deprecated Use loadSimpleJSONGraph */
+export const JSONLoader = ({json, nodeParser, edgeParser}) =>
+  loadSimpleJSONGraph(json, {nodeParser, edgeParser});
+
+/** A loader for a simple graph format  */
+export function loadSimpleJSONGraph(
+  json: Record<string, unknown>,
+  options?: {nodeParser; edgeParser}
+) {
+  const {nodeParser = basicNodeParser, edgeParser = basicEdgeParser} = options;
+  const {name = 'default', nodes, edges} = json;
+  if (!nodes) {
+    log.error('Invalid graph: nodes is missing.')();
+    return null;
+  }
+
+  const graph = createGraph({name, nodes, edges, nodeParser, edgeParser});
+  return graph;
+}
diff --git a/modules/graph-layers/test/core/base-layout.spec.ts b/modules/graph-layers/test/core/graph-layout.spec.ts
similarity index 100%
rename from modules/graph-layers/test/core/base-layout.spec.ts
rename to modules/graph-layers/test/core/graph-layout.spec.ts
diff --git a/modules/graph-layers/test/core/interaction-manager.spec.ts b/modules/graph-layers/test/core/interaction-manager.spec.ts
index 9fb8257e..a2e8a1c5 100644
--- a/modules/graph-layers/test/core/interaction-manager.spec.ts
+++ b/modules/graph-layers/test/core/interaction-manager.spec.ts
@@ -4,8 +4,8 @@
 
 import {describe, it, expect} from 'vitest';
 import {InteractionManager} from '../../src/core/interaction-manager';
-import {Node} from '../../src/core/node';
-import {Edge} from '../../src/core/edge';
+import {Node} from '../../src/graph/node';
+import {Edge} from '../../src/graph/edge';
 
 function generateIMProps(extraProps = {}) {
   const engine = {
diff --git a/modules/graph-layers/test/create-graph.spec.ts b/modules/graph-layers/test/graph/create-graph.spec.ts
similarity index 90%
rename from modules/graph-layers/test/create-graph.spec.ts
rename to modules/graph-layers/test/graph/create-graph.spec.ts
index 0bd8217c..073f04cc 100644
--- a/modules/graph-layers/test/create-graph.spec.ts
+++ b/modules/graph-layers/test/graph/create-graph.spec.ts
@@ -3,8 +3,8 @@
 // Copyright (c) vis.gl contributors
 
 import {beforeAll, describe, it, expect} from 'vitest';
-import SAMPLE_GRAPH from './__fixtures__/graph.json';
-import {createGraph} from '../src/utils/create-graph';
+import SAMPLE_GRAPH from '../__fixtures__/graph.json';
+import {createGraph} from '../../src/graph/create-graph';
 
 beforeAll(() => {
   global.CustomEvent = Event as any;
diff --git a/modules/graph-layers/test/core/edge.spec.ts b/modules/graph-layers/test/graph/edge.spec.ts
similarity index 97%
rename from modules/graph-layers/test/core/edge.spec.ts
rename to modules/graph-layers/test/graph/edge.spec.ts
index 257d4c2e..e5d7d667 100644
--- a/modules/graph-layers/test/core/edge.spec.ts
+++ b/modules/graph-layers/test/graph/edge.spec.ts
@@ -4,7 +4,7 @@
 
 import {describe, it, expect} from 'vitest';
 import SAMPLE_EDGE from '../__fixtures__/edge.json';
-import {Edge} from '../../src/core/edge';
+import {Edge} from '../../src/graph/edge';
 
 describe('core/edge', () => {
   it('should have correctly functioning getters', () => {
diff --git a/modules/graph-layers/test/core/graph.spec.ts b/modules/graph-layers/test/graph/graph.spec.ts
similarity index 95%
rename from modules/graph-layers/test/core/graph.spec.ts
rename to modules/graph-layers/test/graph/graph.spec.ts
index 1928f558..f494de4c 100644
--- a/modules/graph-layers/test/core/graph.spec.ts
+++ b/modules/graph-layers/test/graph/graph.spec.ts
@@ -5,9 +5,9 @@
 import {beforeAll, describe, it, expect} from 'vitest';
 import SAMPLE_GRAPH1 from '../__fixtures__/graph1.json';
 
-import {Graph} from '../../src/core/graph';
-import {Node} from '../../src/core/node';
-import {Edge} from '../../src/core/edge';
+import {Graph} from '../../src/graph/graph';
+import {Node} from '../../src/graph/node';
+import {Edge} from '../../src/graph/edge';
 
 beforeAll(() => {
   global.CustomEvent = Event as any;
diff --git a/modules/graph-layers/test/core/node.spec.ts b/modules/graph-layers/test/graph/node.spec.ts
similarity index 96%
rename from modules/graph-layers/test/core/node.spec.ts
rename to modules/graph-layers/test/graph/node.spec.ts
index a6a744fc..133452b4 100644
--- a/modules/graph-layers/test/core/node.spec.ts
+++ b/modules/graph-layers/test/graph/node.spec.ts
@@ -5,8 +5,8 @@
 import {describe, it, expect} from 'vitest';
 import {SAMPLE_NODE} from '../__fixtures__/edge.json';
 
-import {Node} from '../../src/core/node';
-import {Edge} from '../../src/core/edge';
+import {Node} from '../../src/graph/node';
+import {Edge} from '../../src/graph/edge';
 
 const createEdges = (edges) => edges.map((e) => new Edge(e));
 
diff --git a/modules/react/src/components/view-control.tsx b/modules/react/src/components/view-control.tsx
index e8bff483..3b80000d 100644
--- a/modules/react/src/components/view-control.tsx
+++ b/modules/react/src/components/view-control.tsx
@@ -30,9 +30,9 @@ export const NavigationButtonContainer = styled.div`
 export const NavigationButton = styled.div`
   color: #848484;
   cursor: pointer;
-  left: ${(props: any) => props.left};
+  left: ${(props: any) => props.$left};
   position: absolute;
-  top: ${(props: any) => props.top};
+  top: ${(props: any) => props.$top};
   transform: rotate(${(props: any) => props.rotate || 0}deg);
 
   &:hover,
@@ -59,7 +59,7 @@ export const VerticalSlider = styled.div`
   width: 10px;
 
   > input[type='range'][orient='vertical'] {
-    -webkit-appearance: slider-vertical;
+    writing-mode: vertical-lr;
     height: 100px;
     padding: 0;
     margin: 0;
@@ -142,7 +142,7 @@ export class ViewControl extends PureComponent {
             </NavigationButton>
           ))}
           {/* @ts-expect-error TODO */}
-          <NavigationButton top={'12px'} left={'16px'} onClick={this.props.fitBounds}>
+          <NavigationButton $top={'12px'} $left={'16px'} onClick={this.props.fitBounds}>
             {'¤'}
           </NavigationButton>
         </NavigationButtonContainer>
diff --git a/website/src/docs-sidebar.js b/website/src/docs-sidebar.js
index d5918982..37d6b6f7 100644
--- a/website/src/docs-sidebar.js
+++ b/website/src/docs-sidebar.js
@@ -9,13 +9,15 @@
  Create as many sidebars as you want.
  */
 
-const bingMapsDocs = require('../../docs/modules/bing-maps/sidebar.json');
+const graphLayerDocs = require('../../docs/modules/graph-layers/sidebar.json');
 
 const layerDocs = require('../../docs/modules/layers/sidebar.json');
 const editableLayerDocs = require('../../docs/modules/editable-layers/sidebar.json');
-const graphLayerDocs = require('../../docs/modules/graph-layers/sidebar.json');
 const arrowLayerDocs = require('../../docs/modules/arrow-layers/sidebar.json');
 
+const bingMapsDocs = require('../../docs/modules/bing-maps/sidebar.json');
+const leafletDocs = require('../../docs/modules/leaflet/sidebar.json');
+
 const reactDocs = require('../../docs/modules/react/sidebar.json');
 
 const experimentalDocs = require('../../docs/modules/experimental/sidebar.json');
@@ -25,24 +27,28 @@ const sidebars = {
     {
       type: 'category',
       label: 'Overview',
+      className: 'heading_bold',
       items: ['README', 'whats-new', 'upgrade-guide', 'CONTRIBUTING']
     },
     {
       type: 'category',
       label: 'Non-Geospatial Layers',
+      className: 'heading_bold',
       items: [graphLayerDocs]
     },
     {
       type: 'category',
       label: 'Geospatial Layers',
+      className: 'heading_bold',
       items: [layerDocs, editableLayerDocs, arrowLayerDocs, experimentalDocs]
     },
     {
       type: 'category',
       label: 'Basemaps',
-      items: [bingMapsDocs]
+      className: 'heading_bold',
+      items: [leafletDocs, bingMapsDocs]
     },
-    {type: 'category', label: 'React Bindings', items: [reactDocs]}
+    {type: 'category', label: 'React Bindings', className: 'heading_bold', items: [reactDocs]}
   ]
 };
 
diff --git a/website/src/styles.css b/website/src/styles.css
index 01150eb2..1b56fce5 100644
--- a/website/src/styles.css
+++ b/website/src/styles.css
@@ -50,3 +50,6 @@ main .container {
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.heading_bold {
+}
\ No newline at end of file