diff --git a/modules/demo/ssr/graph/index.js b/modules/demo/ssr/graph/index.js
index c038048d1..75d6c6e93 100755
--- a/modules/demo/ssr/graph/index.js
+++ b/modules/demo/ssr/graph/index.js
@@ -15,10 +15,22 @@
 // limitations under the License.
 
 const fastify = require('fastify')();
+const fs      = require('fs');
+const path    = require('path');
+
+// create `/data` directory if it does not exist
+const basePath = path.join(__dirname, 'data/');
+fs.access(basePath, fs.constants.F_OK, (err, _) => () => {
+  if (!err) { fs.mkdir(basePath); }
+});
 
 fastify  //
   .register(require('./plugins/webrtc'), require('./plugins/graph')(fastify))
   .register(require('fastify-static'), {root: require('path').join(__dirname, 'public')})
-  .get('/', (req, reply) => reply.sendFile('video.html'));
+  .register(require('fastify-multipart'))
+  .register(require('fastify-cors'), {})
+  .register((require('fastify-arrow')))
+  .register(require('./plugins/api'))
+  .get('/', (req, reply) => reply.sendFile('video.html'))
 
 fastify.listen(8080).then(() => console.log('server ready'));
diff --git a/modules/demo/ssr/graph/package.json b/modules/demo/ssr/graph/package.json
index c9cfb891d..8963a5690 100644
--- a/modules/demo/ssr/graph/package.json
+++ b/modules/demo/ssr/graph/package.json
@@ -17,18 +17,24 @@
     "@rapidsai/cuda": "0.0.1",
     "@rapidsai/deck.gl": "0.0.1",
     "@rapidsai/jsdom": "0.0.1",
+    "@rapidsai/ssr-render-cluster": "0.0.1",
     "fastify-plugin": "3.0.0",
     "fastify-socket.io": "2.0.0",
     "fastify-static": "4.4.1",
     "fastify": "3.20.2",
-    "nanoid": "3.1.31",
+    "fastify-multipart": "5.0.2",
+    "fastify-cors": "6.0.2",
+    "fastify-arrow": "0.1.0",
+    "apache-arrow": "^4.0.0",
+    "nanoid": "3.1.25",
     "rxjs": "6.6.7",
     "shm-typed-array": "0.0.13",
     "simple-peer": "9.11.0",
-    "socket.io": "4.1.3"
+    "socket.io": "4.1.3",
+    "glob": "7.2.0",
+    "sharp": "0.29.2"
   },
   "files": [
-    "render",
     "public",
     "plugins",
     "index.js",
diff --git a/modules/demo/ssr/graph/plugins/api/index.js b/modules/demo/ssr/graph/plugins/api/index.js
new file mode 100644
index 000000000..5938b7322
--- /dev/null
+++ b/modules/demo/ssr/graph/plugins/api/index.js
@@ -0,0 +1,165 @@
+// Copyright (c) 2021, NVIDIA CORPORATION.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const {graphs, clients}         = require('../graph');
+const fs                        = require('fs')
+const util                      = require('util')
+const {pipeline}                = require('stream')
+const pump                      = util.promisify(pipeline)
+const glob                      = require('glob');
+const {Graph}                   = require('@rapidsai/cugraph');
+const {loadEdges, loadNodes}    = require('../graph/loader');
+const {RecordBatchStreamWriter} = require('apache-arrow');
+const path                      = require('path');
+const {readDataFrame, getNodesForGraph, getEdgesForGraph, getPaginatedRows} = require('./utils');
+
+module.exports = function(fastify, opts, done) {
+  fastify.addHook('preValidation', (request, reply, done) => {
+    // handle upload validation after reading request.file() in the route function itself
+    if (request.url == '/datasets/upload') {
+      done();
+    } else {
+      request.query.id =
+        (request.method == 'POST') ? `${request.body.id}:video` : `${request.query.id}:video`;
+      if (request.query.id in fastify[clients]) {
+        done();
+      } else {
+        reply.code(500).send('client handshake not established');
+      }
+    }
+  });
+
+  async function renderGraph(id, data) {
+    const asDeviceMemory = (buf) => new (buf[Symbol.species])(buf);
+    const src                    = data.edges.dataframe.get(data.edges.src);
+    const dst                    = data.edges.dataframe.get(data.edges.dst);
+    const graph                  = Graph.fromEdgeList(src, dst, {directedEdges: true});
+    fastify[graphs][id]          = {
+      refCount: 0,
+      nodes: await getNodesForGraph(asDeviceMemory, data.nodes, graph.numNodes),
+      edges: await getEdgesForGraph(asDeviceMemory, data.edges),
+      graph: graph,
+    };
+
+    ++fastify[graphs][id].refCount;
+
+    return {
+      gravity: 0.0,
+      linLogMode: false,
+      scalingRatio: 5.0,
+      barnesHutTheta: 0.0,
+      jitterTolerance: 0.05,
+      strongGravityMode: false,
+      outboundAttraction: false,
+      graph: fastify[graphs][id].graph,
+      nodes: {
+        ...fastify[graphs][id].nodes,
+        length: fastify[graphs][id].graph.numNodes,
+      },
+      edges: {
+        ...fastify[graphs][id].edges,
+        length: fastify[graphs][id].graph.numEdges,
+      },
+    };
+  }
+
+  fastify.post('/datasets/upload', async function(req, reply) {
+    const data = await req.file();
+    const id   = `${data.fields.id.value}:video`;
+    if (id in fastify[clients]) {
+      const basePath = `${__dirname}/../../data/`;
+      const filepath = path.join(basePath, data.filename);
+      const target   = fs.createWriteStream(filepath);
+      try {
+        await pump(data.file, target);
+      } catch (err) { console.log(err); }
+      reply.send();
+    } else {
+      reply.code(500).send('client handshake not established');
+    }
+  });
+
+  fastify.get('/datasets', async (request, reply) => {
+    glob(`*.{csv,parquet}`,
+         {cwd: `${__dirname}/../../data/`},
+         (er, files) => { reply.send(JSON.stringify(files.concat(['defaultExample']))); });
+  });
+
+  fastify.post('/dataframe/load', async (request, reply) => {
+    const filePath = `${__dirname}/../../data/`
+    if (fs.existsSync(`${filePath}${request.body.nodes}`) &&
+        fs.existsSync(`${filePath}${request.body.edges}`)) {
+      fastify[clients][request.query.id].data.nodes.dataframe =
+        await readDataFrame(`${filePath}${request.body.nodes}`);
+
+      fastify[clients][request.query.id].data.edges.dataframe =
+        await readDataFrame(`${filePath}${request.body.edges}`);
+    }
+    else {
+      fastify[clients][request.query.id].data.nodes.dataframe = await loadNodes();
+      fastify[clients][request.query.id].data.edges.dataframe = await loadEdges();
+    }
+    if (fastify[clients][request.query.id].data.nodes.dataframe.numRows == 0) {
+      reply.code(500).send('no dataframe loaded');
+    }
+    reply.send(JSON.stringify({
+      'nodes': fastify[clients][request.query.id].data.nodes.dataframe.numRows,
+      'edges': fastify[clients][request.query.id].data.edges.dataframe.numRows
+    }));
+  })
+
+  fastify.get('/dataframe/columnNames/read', async (request, reply) => {
+    reply.send(JSON.stringify({
+      nodesParams: fastify[clients][request.query.id].data.nodes.dataframe.names.concat([null]),
+      edgesParams: fastify[clients][request.query.id].data.edges.dataframe.names.concat([null])
+    }));
+  });
+
+  fastify.post('/dataframe/columnNames/update', async (request, reply) => {
+    try {
+      Object.assign(fastify[clients][request.query.id].data.nodes, request.body.nodes);
+      Object.assign(fastify[clients][request.query.id].data.edges, request.body.edges);
+      reply.code(200).send('successfully updated columnNames');
+    } catch (err) { reply.code(500).send(err); }
+  });
+
+  fastify.post('/graph/render', async (request, reply) => {
+    try {
+      fastify[clients][request.query.id].graph =
+        await renderGraph('default', fastify[clients][request.query.id].data);
+      reply.code(200).send('successfully rendered graph');
+    } catch (err) { reply.code(500).send(err); }
+  })
+
+  fastify.get('/dataframe/read', async (request, reply) => {
+    try {
+      const pageIndex = parseInt(request.query.pageIndex);
+      const pageSize  = parseInt(request.query.pageSize);
+      const dataframe = request.query.dataframe;  //{'nodes', 'edges'}
+      const [arrowTable, numRows] =
+        await getPaginatedRows(fastify[clients][request.query.id].data[dataframe].dataframe,
+                               pageIndex,
+                               pageSize,
+                               fastify[clients][request.query.id].state.selectedInfo[dataframe]);
+
+      arrowTable.schema.metadata.set('numRows', numRows);
+      RecordBatchStreamWriter.writeAll(arrowTable).pipe(reply.stream());
+    } catch (err) {
+      request.log.error({err}, '/run_query error');
+      reply.code(500).send(err);
+    }
+  });
+
+  done();
+}
diff --git a/modules/demo/ssr/graph/plugins/api/utils.js b/modules/demo/ssr/graph/plugins/api/utils.js
new file mode 100644
index 000000000..1d27c73c0
--- /dev/null
+++ b/modules/demo/ssr/graph/plugins/api/utils.js
@@ -0,0 +1,95 @@
+const {DataFrame, Series, Int32, Uint8, Uint32, Uint64} = require('@rapidsai/cudf');
+const {Float32Buffer}                                   = require('@rapidsai/cuda');
+
+function readDataFrame(path) {
+  if (path.indexOf('.csv', path.length - 4) !== -1) {
+    // csv file
+    return DataFrame.readCSV({sources: [path], header: 0, sourceType: 'files'});
+  } else if (path.indexOf('.parquet', path.length - 8) !== -1) {
+    // csv file
+    return DataFrame.readParquet({sources: [path]});
+  }
+  // if (df.names.includes('Unnamed: 0')) { df = df.cast({'Unnamed: 0': new Uint32}); }
+  return new DataFrame({});
+}
+
+async function getNodesForGraph(asDeviceMemory, nodes, numNodes) {
+  let nodesRes = {};
+  const pos    = new Float32Buffer(Array.from(
+    {length: numNodes * 2},
+    () => Math.random() * 1000 * (Math.random() < 0.5 ? -1 : 1),
+    ));
+
+  if (nodes.x in nodes.dataframe.names) {
+    nodesRes.nodeXPositions = asDeviceMemory(nodes.dataframe.get(node.x).data);
+  } else {
+    nodesRes.nodeXPositions = pos.subarray(0, pos.length / 2);
+  }
+  if (nodes.y in nodes.dataframe.names) {
+    nodesRes.nodeYPositions = asDeviceMemory(nodes.dataframe.get(node.y).data);
+  } else {
+    nodesRes.nodeYPositions = pos.subarray(pos.length / 2);
+  }
+  if (nodes.dataframe.names.includes(nodes.size)) {
+    nodesRes.nodeRadius = asDeviceMemory(nodes.dataframe.get(nodes.size).cast(new Uint8).data);
+  }
+  if (nodes.dataframe.names.includes(nodes.color)) {
+    nodesRes.nodeFillColors =
+      asDeviceMemory(nodes.dataframe.get(nodes.color).cast(new Uint32).data);
+  }
+  if (nodes.dataframe.names.includes(nodes.id)) {
+    nodesRes.nodeElementIndices =
+      asDeviceMemory(nodes.dataframe.get(nodes.id).cast(new Uint32).data);
+  }
+  return nodesRes;
+}
+
+async function getEdgesForGraph(asDeviceMemory, edges) {
+  let edgesRes = {};
+
+  if (edges.dataframe.names.includes(edges.color)) {
+    edgesRes.edgeColors = asDeviceMemory(edges.dataframe.get(edges.color).data);
+  } else {
+    edgesRes.edgeColors = asDeviceMemory(
+      Series
+        .sequence(
+          {type: new Uint64, size: edges.dataframe.numRows, init: 18443486512814075489n, step: 0})
+        .data);
+  }
+  if (edges.dataframe.names.includes(edges.id)) {
+    edgesRes.edgeList = asDeviceMemory(edges.dataframe.get(edges.id).cast(new Uint64).data);
+  }
+  if (edges.dataframe.names.includes(edges.bundle)) {
+    edgesRes.edgeBundles = asDeviceMemory(edges.dataframe.get(edges.bundle).data);
+  }
+  return edgesRes;
+}
+
+async function getPaginatedRows(df, pageIndex = 0, pageSize = 400, selected = []) {
+  if (selected.length != 0) {
+    const selectedSeries = Series.new({type: new Int32, data: selected}).unique(true);
+    const updatedDF      = df.gather(selectedSeries);
+    const idxs           = Series.sequence({
+      type: new Int32,
+      init: (pageIndex - 1) * pageSize,
+      size: Math.min(pageSize, updatedDF.numRows),
+      step: 1
+    });
+    return [updatedDF.gather(idxs).toArrow(), updatedDF.numRows];
+  } else {
+    const idxs = Series.sequence({
+      type: new Int32,
+      init: (pageIndex - 1) * pageSize,
+      size: Math.min(pageSize, df.numRows),
+      step: 1
+    });
+    return [df.gather(idxs).toArrow(), df.numRows];
+  }
+}
+
+module.exports = {
+  readDataFrame,
+  getNodesForGraph,
+  getEdgesForGraph,
+  getPaginatedRows
+}
diff --git a/modules/demo/ssr/graph/render/render.js b/modules/demo/ssr/graph/plugins/graph/deck.js
similarity index 64%
rename from modules/demo/ssr/graph/render/render.js
rename to modules/demo/ssr/graph/plugins/graph/deck.js
index 5035460e1..b2bf12477 100644
--- a/modules/demo/ssr/graph/render/render.js
+++ b/modules/demo/ssr/graph/plugins/graph/deck.js
@@ -11,97 +11,17 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
 const {IpcMemory, Uint8Buffer} = require('@rapidsai/cuda');
-const {RapidsJSDOM}            = require('@rapidsai/jsdom');
-const copyFramebuffer          = require('./copy')();
-
-class Renderer {
-  constructor() {
-    const onAnimationFrameRequested = immediateAnimationFrame(this);
-    const jsdom                     = new RapidsJSDOM({module, onAnimationFrameRequested});
-
-    const {deck, render} = jsdom.window.evalFn(makeDeck);
-
-    this.deck    = deck;
-    this.jsdom   = jsdom;
-    this._render = render;
-  }
-  async render(props = {}, graph = {}, state = {}, events = [], frame = 0) {
-    const window = this.jsdom.window;
-
-    graph = openGraphIpcHandles(graph);
-    props && this.deck.setProps(props);
-
-    state?.deck && this.deck.restore(state.deck);
-    state?.graph && Object.assign(graph, state.graph);
-    state?.window && Object.assign(window, state.window);
-
-    state?.selectedInfo && Object.assign(this.deck.selectedInfo, state.selectedInfo);
-    state?.boxSelectCoordinates &&
-      Object.assign(this.deck.boxSelectCoordinates, state.boxSelectCoordinates);
-
-    (events || []).forEach((event) => window.dispatchEvent(event));
-
-    await this._render(graph,
-                       this.deck.boxSelectCoordinates.rectdata,
-                       state.pickingMode === 'boxSelect' ? {controller: {dragPan: false}}
-                                                         : {controller: {dragPan: true}});
-
-    closeIpcHandles(graph.data.nodes);
-    closeIpcHandles(graph.data.edges);
-    return {
-      frame: copyFramebuffer(this.deck.animationLoop, frame),
-      state: {
-        deck: this.deck.serialize(),
-        graph: this.deck.layerManager.getLayers()
-                 ?.find((layer) => layer.id === 'GraphLayer')
-                 .serialize(),
-        window: {
-          x: window.x,
-          y: window.y,
-          title: window.title,
-          width: window.width,
-          height: window.height,
-          cursor: window.cursor,
-          mouseX: window.mouseX,
-          mouseY: window.mouseY,
-          buttons: window.buttons,
-          scrollX: window.scrollX,
-          scrollY: window.scrollY,
-          modifiers: window.modifiers,
-          mouseInWindow: window.mouseInWindow,
-        },
-        boxSelectCoordinates: this.deck.boxSelectCoordinates,
-        selectedInfo: this.deck.selectedInfo
-      }
-    };
-  }
-}
-
-module.exports.Renderer = Renderer;
-
-function immediateAnimationFrame(renderer) {
-  let request  = null;
-  let flushing = false;
-  const flush = () => {
-    flushing = true;
-    while (request && request.active) {
-      const f = request.flush;
-      request = null;
-      f();
-    }
-    flushing = false;
-  };
-  return (r) => {
-    if (flushing) { return request = r; }
-    if (renderer?.deck?.animationLoop?._initialized) {  //
-      return flush(request = r);
-    }
-    if (!request && (request = r)) { setImmediate(flush); }
-  };
-}
 
+/**
+ * makeDeck() returns a Deck and a render callable object to be consumed by the multi-worker
+ * Renderer class' JSDOM object
+ *
+ * @returns {
+ *            DeckSSR,
+ *            render(layers = {}, boxSelectRectData = [], props = {})
+ *          }
+ */
 function makeDeck() {
   const {log: deckLog} = require('@deck.gl/core');
   deckLog.level        = 0;
@@ -144,7 +64,7 @@ function makeDeck() {
     ];
   };
 
-  getPolygonLayer = (rectdata) => {
+  const getPolygonLayer = (rectdata) => {
     return new PolygonLayer({
       filled: true,
       stroked: true,
@@ -189,17 +109,13 @@ function makeDeck() {
         layerIds: ['GraphLayer']
       };
 
-      deck.selectedInfo.selectedNodes = deck.pickObjects(deck.selectedInfo.selectedCoordinates)
-                                          .filter(selected => selected.hasOwnProperty('nodeId'))
-                                          .map(n => n.nodeId);
+      deck.selectedInfo.nodes = deck.pickObjects(deck.selectedInfo.selectedCoordinates)
+                                  .filter(selected => selected.hasOwnProperty('nodeId'))
+                                  .map(n => n.nodeId);
 
-      deck.selectedInfo.selectedEdges = deck.pickObjects(deck.selectedInfo.selectedCoordinates)
-                                          .filter(selected => selected.hasOwnProperty('edgeId'))
-                                          .map(n => n.edgeId);
-      console.log('selected Nodes',
-                  deck.selectedInfo.selectedNodes,
-                  '\nselected Edges',
-                  deck.selectedInfo.selectedEdges);
+      deck.selectedInfo.edges = deck.pickObjects(deck.selectedInfo.selectedCoordinates)
+                                  .filter(selected => selected.hasOwnProperty('edgeId'))
+                                  .map(n => n.edgeId);
     }
 
   const onDrag = (info, event) => {
@@ -219,12 +135,11 @@ function makeDeck() {
       y: info.y,
       radius: 1,
     };
-    deck.selectedInfo.selectedNodes =
-      [deck.pickObject(deck.selectedInfo.selectedCoordinates)]
-        .filter(selected => selected && selected.hasOwnProperty('nodeId'))
-        .map(n => n.nodeId);
+    deck.selectedInfo.nodes = [deck.pickObject(deck.selectedInfo.selectedCoordinates)]
+                                .filter(selected => selected && selected.hasOwnProperty('nodeId'))
+                                .map(n => n.nodeId);
 
-    console.log(deck.selectedInfo.selectedNodes, deck.selectedInfo.selectedCoordinates);
+    console.log(deck.selectedInfo.nodes, deck.selectedInfo.selectedCoordinates);
   };
 
   const deck = new DeckSSR({
@@ -259,11 +174,13 @@ function makeDeck() {
 
   return {
     deck,
-    render(graph, rectdata, cb_props = {}) {
+    render(layers = {}) {
       const done = deck.animationLoop.waitForRender();
       deck.setProps({
-        layers: makeLayers(deck, graph).concat(rectdata[0].show ? getPolygonLayer(rectdata) : []),
-        ...cb_props
+        layers: makeLayers(deck, layers)
+                  .concat(deck.boxSelectCoordinates.rectdata[0].show
+                            ? getPolygonLayer(deck.boxSelectCoordinates.rectdata)
+                            : []),
       });
       deck.animationLoop.start();
       return done;
@@ -293,6 +210,11 @@ function openGraphIpcHandles({nodes, edges, ...graphLayerProps} = {}) {
   };
 }
 
+function closeGraphIpcHandles(graph) {
+  closeIpcHandles(graph.data.nodes);
+  closeIpcHandles(graph.data.edges);
+}
+
 function openNodeIpcHandles(attrs = {}) {
   const attributes = {
     nodeRadius: openIpcHandle(attrs.nodeRadius),
@@ -335,3 +257,14 @@ function closeIpcHandles(obj) {
     }
   }
 }
+
+function serializeCustomLayer(layers = []) {
+  return layers?.find((layer) => layer.id === 'GraphLayer').serialize();
+}
+
+module.exports = {
+  makeDeck: makeDeck,
+  openLayerIpcHandles: openGraphIpcHandles,
+  closeLayerIpcHandles: closeGraphIpcHandles,
+  serializeCustomLayer: serializeCustomLayer
+};
diff --git a/modules/demo/ssr/graph/plugins/graph/index.js b/modules/demo/ssr/graph/plugins/graph/index.js
index 7853448ac..becdacf96 100644
--- a/modules/demo/ssr/graph/plugins/graph/index.js
+++ b/modules/demo/ssr/graph/plugins/graph/index.js
@@ -12,17 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const wrtc            = require('wrtc');
-const {DeviceBuffer}  = require('@rapidsai/rmm');
-const {MemoryView}    = require('@rapidsai/cuda');
-const {Float32Buffer} = require('@rapidsai/cuda');
-const {Graph}         = require('@rapidsai/cugraph');
-const {Series, Int32} = require('@rapidsai/cudf');
-
-const {loadNodes, loadEdges} = require('./loader');
-const {RenderCluster}        = require('../../render/cluster');
+const wrtc                                      = require('wrtc');
+const {MemoryView, DeviceMemory, Float32Buffer} = require('@rapidsai/cuda');
+const {DataFrame, Series, Float32}              = require('@rapidsai/cudf');
+const {RenderCluster}                           = require('@rapidsai/ssr-render-cluster');
 
 const {create: shmCreate, detach: shmDetach} = require('shm-typed-array');
+const asDeviceMemory = (buf) => new (buf[Symbol.species])(buf);
 
 module.exports         = graphSSRClients;
 module.exports.graphs  = Symbol('graphs');
@@ -47,7 +43,7 @@ function graphSSRClients(fastify) {
     const {
       width      = 800,
       height     = 600,
-      layout     = true,
+      layout     = false,
       g: graphId = 'default',
     } = sock?.handshake?.query || {};
 
@@ -64,24 +60,14 @@ function graphSSRClients(fastify) {
       },
       event: {},
       props: {width, height, layout},
-      graph: await loadGraph(graphId),
+      graph: {},
+      data: {
+        nodes: {dataframe: new DataFrame({}), color: '', size: '', id: '', x: 'x', y: 'y'},
+        edges: {dataframe: new DataFrame({}), color: '', id: '', bundle: '', src: 'src', dst: 'dst'}
+      },
       frame: shmCreate(width * height * 3 / 2),
       peer: peer,
     };
-    if (clients[stream.id].graph.dataframes[0]) {
-      const res = getPaginatedRows(clients[stream.id].graph.dataframes[0]);
-      peer.send(JSON.stringify({
-        type: 'data',
-        data: {nodes: {data: res, length: clients[stream.id].graph.dataframes[0].numRows}}
-      }));
-    }
-    if (clients[stream.id].graph.dataframes[1]) {
-      const res = getPaginatedRows(clients[stream.id].graph.dataframes[1]);
-      peer.send(JSON.stringify({
-        type: 'data',
-        data: {edges: {data: res, length: clients[stream.id].graph.dataframes[1].numRows}}
-      }));
-    }
 
     stream.addTrack(source.createTrack());
     peer.streams.push(stream);
@@ -127,82 +113,23 @@ function graphSSRClients(fastify) {
       }
     }
   }
-
-  async function loadGraph(id) {
-    let dataframes = [];
-
-    if (!(id in graphs)) {
-      const asDeviceMemory = (buf) => new (buf[Symbol.species])(buf);
-      dataframes                   = await Promise.all([loadNodes(id), loadEdges(id)]);
-      const src                    = dataframes[1].get('src');
-      const dst                    = dataframes[1].get('dst');
-      graphs[id]                   = {
-        refCount: 0,
-        nodes: {
-          nodeRadius: asDeviceMemory(dataframes[0].get('size').data),
-          nodeFillColors: asDeviceMemory(dataframes[0].get('color').data),
-          nodeElementIndices: asDeviceMemory(dataframes[0].get('id').data),
-        },
-        edges: {
-          edgeList: asDeviceMemory(dataframes[1].get('edge').data),
-          edgeColors: asDeviceMemory(dataframes[1].get('color').data),
-          edgeBundles: asDeviceMemory(dataframes[1].get('bundle').data),
-        },
-        graph: Graph.fromEdgeList(src, dst),
-      };
-    }
-
-    ++graphs[id].refCount;
-
-    const pos = new Float32Buffer(Array.from(
-      {length: graphs[id].graph.numNodes * 2},
-      () => Math.random() * 1000 * (Math.random() < 0.5 ? -1 : 1),
-      ));
-
-    return {
-      gravity: 0.0,
-      linLogMode: false,
-      scalingRatio: 5.0,
-      barnesHutTheta: 0.0,
-      jitterTolerance: 0.05,
-      strongGravityMode: false,
-      outboundAttraction: false,
-      graph: graphs[id].graph,
-      nodes: {
-        ...graphs[id].nodes,
-        length: graphs[id].graph.numNodes,
-        nodeXPositions: pos.subarray(0, pos.length / 2),
-        nodeYPositions: pos.subarray(pos.length / 2),
-      },
-      edges: {
-        ...graphs[id].edges,
-        length: graphs[id].graph.numEdges,
-      },
-      dataframes: dataframes
-    };
-  }
 }
 
 function layoutAndRenderGraphs(clients) {
-  const renderer = new RenderCluster({numWorkers: 1 && 4});
+  const renderer = new RenderCluster(
+    {numWorkers: 1 && 4, deckLayersPath: require('path').join(__dirname, 'deck')});
 
   return () => {
     for (const id in clients) {
       const client = clients[id];
-      const sendToClient =
-        ([nodes, edges]) => {
-          client.peer.send(JSON.stringify(
-            {type: 'data', data: {nodes: {data: getPaginatedRows(nodes), length: nodes.numRows}}}));
-          client.peer.send(JSON.stringify(
-            {type: 'data', data: {edges: {data: getPaginatedRows(edges), length: edges.numRows}}}));
-        }
 
-      if (client.isRendering) {
-        continue;
-      }
+      if (client.isRendering) { continue; }
 
       const state = {...client.state};
-      const props = {...client.props};
+      const props = {
+        ...client.props,
+        controller: (state.pickingMode === 'boxSelect' ? {dragPan: false} : {dragPan: true})
+      };
       const event =
         [
           'focus',
@@ -247,7 +174,7 @@ function layoutAndRenderGraphs(clients) {
           props,
           event,
           frame: client.frame.key,
-          graph: {
+          layers: {
             ...client.graph,
             graph: undefined,
             edges: getIpcHandles(client.graph.edges),
@@ -263,26 +190,16 @@ function layoutAndRenderGraphs(clients) {
               result.state.clearSelections = false;
 
               // reset selected state
-              result.state.selectedInfo.selectedNodes       = [];
-              result.state.selectedInfo.selectedEdges       = [];
+              result.state.selectedInfo.nodes               = [];
+              result.state.selectedInfo.edges               = [];
               result.state.selectedInfo.selectedCoordinates = {};
               result.state.boxSelectCoordinates.rectdata    = [{polygon: [[]], show: false}];
 
               // send to client
-              if (client.graph.dataframes) { sendToClient(client.graph.dataframes); }
+              client.peer.send(JSON.stringify({type: 'data', data: 'newQuery'}));
             } else if (JSON.stringify(client.state.selectedInfo.selectedCoordinates) !==
                        JSON.stringify(result.state.selectedInfo.selectedCoordinates)) {
-              // selections updated
-              const nodes =
-                Series.new({type: new Int32, data: result.state.selectedInfo.selectedNodes});
-              const edges =
-                Series.new({type: new Int32, data: result.state.selectedInfo.selectedEdges});
-              if (client.graph.dataframes) {
-                sendToClient([
-                  client.graph.dataframes[0].gather(nodes),
-                  client.graph.dataframes[1].gather(edges)
-                ]);
-              }
+              client.peer.send(JSON.stringify({type: 'data', data: 'newQuery'}));
             }
             // copy result state to client's current state
             result?.state && Object.assign(client.state, result.state);
@@ -294,16 +211,23 @@ function layoutAndRenderGraphs(clients) {
   }
 }
 
-function getPaginatedRows(df, page = 1, rowsPerPage = 400) {
-  if (!df) { return {}; }
-  return df.head(page * rowsPerPage).tail(rowsPerPage).toArrow().toArray();
-}
-
 function forceAtlas2({graph, nodes, edges, ...params}) {
-  graph.forceAtlas2({...params, positions: nodes.nodeXPositions.buffer});
+  if (graph == undefined) { return {}; }
+  const asDeviceMemory = (buf) => new (buf[Symbol.species])(buf);
+
+  const positions = graph.forceAtlas2({...params, positions: nodes.nodeXPositions.data});
+
+  nodes.nodeXPositions = asDeviceMemory(
+    Series
+      .new(
+        {type: new Float32, length: graph.numNodes, offset: graph.numNodes, data: positions.buffer})
+      .data);
+  nodes.nodeYPositions = asDeviceMemory(
+    Series.new({type: new Float32, length: graph.numNodes, offset: 0, data: positions.buffer})
+      .data);
 
   return {
-    graph,
+    graph: graph,
     ...params,
     nodes: {...nodes, length: graph.numNodes},
     edges: {...edges, length: graph.numEdges},
diff --git a/modules/demo/ssr/graph/plugins/graph/loader.js b/modules/demo/ssr/graph/plugins/graph/loader.js
index 023e0209d..29d0e07a3 100644
--- a/modules/demo/ssr/graph/plugins/graph/loader.js
+++ b/modules/demo/ssr/graph/plugins/graph/loader.js
@@ -1,5 +1,5 @@
-const {Utf8Vector}                               = require('apache-arrow');
-const {DataFrame, Series, Uint32, Uint64, Uint8} = require('@rapidsai/cudf');
+const {Utf8Vector}                                      = require('apache-arrow');
+const {DataFrame, Series, Int32, Uint32, Uint64, Uint8} = require('@rapidsai/cudf');
 
 function loadNodes(graphId) {
   if (graphId === 'default') { return getDefaultNodes(); }
@@ -84,7 +84,7 @@ function getDefaultEdges() {
   return new DataFrame({
     name: Series.new(Utf8Vector.from(Array.from({length: 312}, (_, i) => `${i}`))),
     src: Series.new({
-      type: new Uint32,
+      type: new Int32,
       data: [
         1,  0,  1,  1,  1,  0,  1,  1,  1,  0,  1,  1,  1,  0,  1,  1,  1,  0,  1,  1,  1,  0,  1,
         1,  1,  0,  1,  1,  1,  0,  1,  1,  1,  0,  1,  1,  1,  0,  1,  1,  1,  0,  1,  1,  1,  0,
@@ -103,7 +103,7 @@ function getDefaultEdges() {
       ]
     }),
     dst: Series.new({
-      type: new Uint32,
+      type: new Int32,
       data: [
         2,  3,  4,  5,  6,  6,  7,  7,  8,  8,  8,  8,  9,  10, 11, 12, 14, 15, 16, 13, 17, 18, 17,
         17, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 35, 35, 35, 36, 37,
diff --git a/modules/demo/ssr/graph/public/video.html b/modules/demo/ssr/graph/public/video.html
index c2c25edbb..0662ec30a 100644
--- a/modules/demo/ssr/graph/public/video.html
+++ b/modules/demo/ssr/graph/public/video.html
@@ -1,3 +1,14 @@
+<!-- Copyright (c) 2021, NVIDIA CORPORATION. -->
+<!-- Licensed under the Apache License, Version 2.0 (the "License"); -->
+<!-- you may not use this file except in compliance with the License. -->
+<!-- You may obtain a copy of the License at -->
+<!-- http://www.apache.org/licenses/LICENSE-2.0 -->
+<!-- Unless required by applicable law or agreed to in writing, software -->
+<!-- distributed under the License is distributed on an "AS IS" BASIS, -->
+<!-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -->
+<!-- See the License for the specific language governing permissions and -->
+<!-- limitations under the License. -->
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -18,11 +29,13 @@
 
     <div>
         <button onclick="updateClearSelections()">clear selections</button>
+        <button onclick="renderGraph()">Render Graph Vizualization</button>
+        <button onclick="updateLayout()">ForceAtlas2 Layout</button>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/simple-peer@9.11.0/simplepeer.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js"></script>
-    <script>
+    <script type="text/javascript">
         const sock = io({ transports: ['websocket'], reconnection: true });
         const video = document.querySelector('video');
         const peer = new SimplePeer({
@@ -41,6 +54,39 @@
         // Negotiate handshake
         sock.on('signal', (data) => peer.signal(data));
         peer.on('signal', (data) => sock.emit('signal', data));
+
+        async function renderGraph(){
+            await fetch('/dataframe/load', {
+                method: `POST`,
+                body: JSON.stringify({id: sock.id,
+                nodes: 'default',
+                edges: 'default'}),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            await fetch('/dataframe/columnNames/update', {
+                method: `POST`,
+                body: JSON.stringify({
+                    nodes: { "color": "color", "size": "size", "id":"id" },
+                    edges: { "color": "color", "bundle": "bundle", "id": "edge" },
+                    id: sock.id
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            fetch('/graph/render', { method: `POST`, body: JSON.stringify({ id: sock.id}), headers: {
+                'Content-Type': 'application/json'
+            }});
+        }
+
+        async function updateLayout(){
+            peer.send(JSON.stringify({ type: 'layout', data: true }));
+        }
+
         peer.on('data', (data) => {
             var decoded = new TextDecoder().decode(data);
             var decodedjson = JSON.parse(decoded);
diff --git a/modules/demo/ssr/graph/render/copy.js b/modules/demo/ssr/graph/render/copy.js
deleted file mode 100644
index 1b735d818..000000000
--- a/modules/demo/ssr/graph/render/copy.js
+++ /dev/null
@@ -1,67 +0,0 @@
-// Copyright (c) 2021, NVIDIA CORPORATION.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const {CUDA, Uint8Buffer}               = require('@rapidsai/cuda');
-const {Buffer: DeckBuffer}              = require('@rapidsai/deck.gl');
-const {Framebuffer, readPixelsToBuffer} = require('@luma.gl/webgl');
-const shm                               = require('shm-typed-array');
-
-Object.defineProperty(Framebuffer, Symbol.hasInstance, {
-  value: (x) => x?.constructor?.name === 'Framebuffer',
-});
-
-module.exports = copyAndConvertFramebuffer;
-
-function copyAndConvertFramebuffer() {
-  let i420DeviceBuffer = null;
-  let rgbaDeviceBuffer = null;
-
-  return ({gl, framebuffer}, sharedMemoryKey) => {
-    const {width, height} = framebuffer;
-    const rgbaByteLength  = width * height * 4;
-    const i420ByteLength  = width * height * 3 / 2;
-
-    if (rgbaDeviceBuffer?.byteLength !== rgbaByteLength) {
-      rgbaDeviceBuffer?.delete({deleteChildren: true});
-      rgbaDeviceBuffer = new DeckBuffer(gl, {
-        byteLength: rgbaByteLength,
-        accessor: {type: gl.UNSIGNED_BYTE, size: 4},
-      });
-    }
-
-    if (i420DeviceBuffer?.byteLength !== i420ByteLength) {
-      i420DeviceBuffer = new Uint8Buffer(i420ByteLength);
-    }
-
-    // DtoD copy from framebuffer into our pixelbuffer
-    readPixelsToBuffer(
-      framebuffer, {sourceType: gl.UNSIGNED_BYTE, sourceFormat: gl.RGBA, target: rgbaDeviceBuffer});
-
-    // Map and unmap the GL buffer as a CUDA buffer
-    rgbaDeviceBuffer.asMappedResource((glBuffer) => {
-      const cuBuffer = glBuffer.asCUDABuffer(0, rgbaByteLength);
-      // flip horizontally to account for WebGL's coordinate system (e.g. ffmpeg -vf vflip)
-      CUDA.rgbaMirror(width, height, 0, cuBuffer);
-      // convert colorspace from OpenGL's BGRA to WebRTC's IYUV420
-      CUDA.bgraToYCrCb420(i420DeviceBuffer, cuBuffer, width, height);
-    });
-
-    // DtoH copy for output
-    const out = shm.get(sharedMemoryKey, 'Uint8ClampedArray');
-    i420DeviceBuffer.copyInto(out);
-    shm.detach(sharedMemoryKey);
-
-    return {width, height, data: sharedMemoryKey};
-  };
-}
diff --git a/modules/demo/ssr/graph/render/worker.js b/modules/demo/ssr/graph/render/worker.js
deleted file mode 100644
index eedbb593c..000000000
--- a/modules/demo/ssr/graph/render/worker.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// Copyright (c) 2021, NVIDIA CORPORATION.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const {fromEvent, EMPTY}                  = require('rxjs');
-const {tap, groupBy, mergeMap, concatMap} = require('rxjs/operators');
-
-const {Renderer} = require('./render');
-const renderer   = new Renderer();
-
-function render({props = {}, graph = {}, state = {}, event = [], frame = 0}) {
-  return renderer.render(props, graph, state, event, frame);
-}
-
-fromEvent(process, 'message', (x) => x)
-  .pipe(groupBy(({type}) => type))
-  .pipe(mergeMap((group) => {
-    switch (group.key) {
-      case 'exit': return group.pipe(tap(({code}) => process.exit(code)));
-      case 'render.request':
-        return group                                                                //
-          .pipe(concatMap(({data}) => render(data), ({id}, data) => ({id, data})))  //
-          .pipe(tap((result) => send({...result, type: 'render.result'})));
-    }
-    return EMPTY;
-  }))
-  .subscribe();
-
-function send(x) {
-  try {
-    JSON.stringify(x);
-    process.send(x);
-  } catch (e) { debugger; }
-}
diff --git a/modules/demo/ssr/point-cloud/package.json b/modules/demo/ssr/point-cloud/package.json
index af2154d9c..aff71772d 100644
--- a/modules/demo/ssr/point-cloud/package.json
+++ b/modules/demo/ssr/point-cloud/package.json
@@ -17,6 +17,7 @@
     "@rapidsai/cuda": "0.0.1",
     "@rapidsai/deck.gl": "0.0.1",
     "@rapidsai/jsdom": "0.0.1",
+    "@rapidsai/ssr-render-cluster": "0.0.1",
     "fastify-plugin": "3.0.0",
     "fastify-socket.io": "2.0.0",
     "fastify-static": "4.2.3",
@@ -28,7 +29,6 @@
     "socket.io": "4.1.3"
   },
   "files": [
-    "render",
     "public",
     "plugins",
     "index.js",
diff --git a/modules/demo/ssr/point-cloud/plugins/point-cloud/deck.js b/modules/demo/ssr/point-cloud/plugins/point-cloud/deck.js
new file mode 100644
index 000000000..9a24c3271
--- /dev/null
+++ b/modules/demo/ssr/point-cloud/plugins/point-cloud/deck.js
@@ -0,0 +1,70 @@
+function makeDeck() {
+  const {log: deckLog} = require('@deck.gl/core');
+  deckLog.level        = 0;
+  deckLog.enable(false);
+
+  const {OrbitView, COORDINATE_SYSTEM, LinearInterpolator} = require('@deck.gl/core');
+  const {PointCloudLayer}                                  = require('@deck.gl/layers');
+  const {DeckSSR}                                          = require('@rapidsai/deck.gl');
+  const {LASLoader}                                        = require('@loaders.gl/las');
+  const {registerLoaders}                                  = require('@loaders.gl/core');
+
+  registerLoaders(LASLoader);
+
+  // Data source: kaarta.com
+  const LAZ_SAMPLE = 'http://localhost:8080/indoor.0.1.laz';
+
+  const transitionInterpolator = new LinearInterpolator(['rotationOrbit']);
+
+  const makeLayers = (deck) => {
+    return [
+      new PointCloudLayer({
+        id: 'laz-point-cloud-layer',
+        data: LAZ_SAMPLE,
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        getNormal: [0, 1, 0],
+        getColor: [255, 255, 255],
+        opacity: 0.5,
+        pointSize: 0.5
+      }),
+    ]
+  };
+
+  const deck = new DeckSSR({
+    createFramebuffer: true,
+    initialViewState: {
+      target: [0, 0, 0],
+      rotationX: 0,
+      rotationOrbit: 0,
+      orbitAxis: 'Y',
+      fov: 50,
+      minZoom: 0,
+      maxZoom: 10,
+      zoom: 1
+    },
+    layers: makeLayers(null),
+    views: [
+      new OrbitView({transitionInterpolator}),
+    ],
+    controller: true,
+    parameters: {clearColor: [0.93, 0.86, 0.81, 1]},
+    onAfterAnimationFrameRender({_loop}) { _loop.pause(); },
+  });
+
+  return {
+    deck,
+    render() {
+      const done = deck.animationLoop.waitForRender();
+      deck.setProps({layers: makeLayers(deck)});
+      deck.animationLoop.start();
+      return done;
+    },
+  };
+}
+
+module.exports = {
+  makeDeck: makeDeck,
+  openLayerIpcHandles: function() {},
+  closeLayerIpcHandles: function() {},
+  serializeCustomLayer: function() {}
+};
diff --git a/modules/demo/ssr/point-cloud/plugins/point-cloud/index.js b/modules/demo/ssr/point-cloud/plugins/point-cloud/index.js
index 3dd4bfaed..03cf82cc2 100644
--- a/modules/demo/ssr/point-cloud/plugins/point-cloud/index.js
+++ b/modules/demo/ssr/point-cloud/plugins/point-cloud/index.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 const wrtc            = require('wrtc');
-const {RenderCluster} = require('../../render/cluster');
+const {RenderCluster} = require('@rapidsai/ssr-render-cluster');
 
 const {create: shmCreate, detach: shmDetach} = require('shm-typed-array');
 
@@ -82,7 +82,8 @@ function graphSSRClients(fastify) {
 }
 
 function layoutAndRenderPointCloud(clients) {
-  const renderer = new RenderCluster({numWorkers: 1 && 4});
+  const renderer = new RenderCluster(
+    {numWorkers: 1 && 4, deckLayersPath: require('path').join(__dirname, 'deck')});
 
   return () => {
     for (const id in clients) {
diff --git a/modules/demo/ssr/point-cloud/render/cluster.js b/modules/demo/ssr/point-cloud/render/cluster.js
deleted file mode 100644
index 0e28856e8..000000000
--- a/modules/demo/ssr/point-cloud/render/cluster.js
+++ /dev/null
@@ -1,152 +0,0 @@
-// Copyright (c) 2021, NVIDIA CORPORATION.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-const workerPath = require('path').join(__dirname, 'worker.js');
-
-class RenderCluster {
-  constructor({fps = 60, numWorkers = 4} = {}) {
-    this._fps      = fps;
-    this._timerId  = null;
-    this._workerId = 0;
-    this._reqs     = Object.create(null);
-    this._jobs     = Object.create(null);
-    this._workers  = this._createWorkers(numWorkers);
-
-    process.on('exit', killWorkers);
-    process.on('beforeExit', killWorkers);
-
-    function killWorkers(code = 'SIGKILL') {
-      this._workers.forEach((worker) => {
-        if (!worker.killed) {
-          worker.send({type: 'exit', code});
-          worker.kill(code);
-        }
-      });
-    }
-  }
-
-  pause() {
-    if (this._timerId !== null) {
-      clearInterval(this._timerId);
-      this._timerId = null;
-    }
-  }
-
-  start() {
-    if (this._timerId === null) {
-      this._timerId = setInterval(() => this.flush(), 1000 / this._fps);
-    }
-  }
-
-  render(id, data, callback) {
-    const request = this._reqs[id] || (this._reqs[id] = Object.create(null));
-    (request.callbacks || (request.callbacks = [])).push(callback);
-    request.data || (request.data = Object.create(null));
-    Object.assign(request.data, data);
-    this.start();
-  }
-
-  flush() {
-    const requests = this._reqs;
-    this._reqs     = Object.create(null);
-    const workers  = this._workers.slice().sort((a, b) => a.jobs - b.jobs);
-    for (const id in requests) {
-      if (!(id in this._jobs)) {
-        this._jobs[id] = dispatchJob(id, requests, workers[this._workerId]);
-        this._workerId = (this._workerId + 1) % workers.length;
-      }
-    }
-  }
-
-  _onWorkerExit(workerId, ...xs) { console.log(`worker ${workerId} exit`, ...xs); }
-
-  _onWorkerError(workerId, ...xs) { console.log(`worker ${workerId} error`, ...xs); }
-
-  _onWorkerClose(workerId, ...xs) { console.log(`worker ${workerId} close`, ...xs); }
-
-  _onWorkerDisconnect(workerId, ...xs) { console.log(`worker ${workerId} disconnect`, ...xs); }
-
-  _onWorkerMessage(_workerId, {id, type, data}) {
-    switch (type) {
-      case 'render.result':
-        const p = this._jobs[id];
-        delete this._jobs[id];
-        return p && p.resolve(data);
-    }
-  }
-
-  _createWorkers(numWorkers = 4) {
-    return Array.from({length: numWorkers}).map((_, i) => {
-      const worker = require('child_process').fork(workerPath, {
-        cwd: __dirname,
-        // serialization: 'advanced',
-        execArgv: ['--trace-uncaught'],
-        stdio: ['pipe', 'inherit', 'inherit', 'ipc'],
-        env: {
-          ...process.env,
-          DISPLAY: undefined,
-          WORKER_ID: i,
-          NUM_WORKERS: numWorkers,
-        },
-      });
-
-      worker.jobs = 0;
-
-      return worker.on('exit', this._onWorkerExit.bind(this, i))
-        .on('error', this._onWorkerError.bind(this, i))
-        .on('close', this._onWorkerClose.bind(this, i))
-        .on('message', this._onWorkerMessage.bind(this, i))
-        .on('disconnect', this._onWorkerDisconnect.bind(this, i));
-    });
-  }
-}
-
-function dispatchJob(id, requests, worker) {
-  const {promise, resolve, reject} = promiseSubject();
-
-  promise
-    .catch((err) => {
-      if (id in requests) {
-        --worker.jobs;
-        const {callbacks} = requests[id];
-        delete requests[id];
-        callbacks.forEach((cb) => cb(err, null));
-      }
-    })
-    .then((data) => {
-      if (id in requests) {
-        --worker.jobs;
-        const {callbacks} = requests[id];
-        delete requests[id];
-        callbacks.forEach((cb) => cb(null, data));
-      }
-    });
-
-  const data = {...requests[id].data};
-  ++worker.jobs;
-  worker.send({id, type: 'render.request', data});
-
-  return {promise, resolve, reject};
-}
-
-function promiseSubject() {
-  let resolve, reject;
-  let promise = new Promise((r1, r2) => {
-    resolve = r1;
-    reject  = r2;
-  });
-  return {promise, resolve, reject};
-}
-
-module.exports.RenderCluster = RenderCluster;
diff --git a/modules/demo/ssr/ssr-render-cluster/index.js b/modules/demo/ssr/ssr-render-cluster/index.js
new file mode 100755
index 000000000..8aa7a77d4
--- /dev/null
+++ b/modules/demo/ssr/ssr-render-cluster/index.js
@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+// Copyright (c) 2022, NVIDIA CORPORATION.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+module.exports.RenderCluster = require('./render/cluster').RenderCluster;
diff --git a/modules/demo/ssr/ssr-render-cluster/package.json b/modules/demo/ssr/ssr-render-cluster/package.json
new file mode 100644
index 000000000..9653cc87c
--- /dev/null
+++ b/modules/demo/ssr/ssr-render-cluster/package.json
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "@rapidsai/ssr-render-cluster",
+  "main": "index.js",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "author": "NVIDIA, Inc. (https://nvidia.com/)",
+  "maintainers": [
+    "Paul Taylor <paul.e.taylor@me.com>"
+  ],
+  "bin": "index.js",
+  "scripts": {
+    "start": "node --experimental-vm-modules --trace-uncaught index.js",
+    "watch": "find -type f | entr -c -d -r node --experimental-vm-modules --trace-uncaught index.js"
+  },
+  "dependencies": {
+    "@rapidsai/cuda": "0.0.1",
+    "@rapidsai/deck.gl": "0.0.1",
+    "@rapidsai/jsdom": "0.0.1",
+    "nanoid": "3.1.31",
+    "rxjs": "6.6.7",
+    "shm-typed-array": "0.0.13"
+  },
+  "files": [
+    "render",
+    "index.js",
+    "package.json"
+  ]
+}
diff --git a/modules/demo/ssr/graph/render/cluster.js b/modules/demo/ssr/ssr-render-cluster/render/cluster.js
similarity index 88%
rename from modules/demo/ssr/graph/render/cluster.js
rename to modules/demo/ssr/ssr-render-cluster/render/cluster.js
index 0e28856e8..58c864a33 100644
--- a/modules/demo/ssr/graph/render/cluster.js
+++ b/modules/demo/ssr/ssr-render-cluster/render/cluster.js
@@ -15,13 +15,15 @@
 const workerPath = require('path').join(__dirname, 'worker.js');
 
 class RenderCluster {
-  constructor({fps = 60, numWorkers = 4} = {}) {
-    this._fps      = fps;
-    this._timerId  = null;
-    this._workerId = 0;
-    this._reqs     = Object.create(null);
-    this._jobs     = Object.create(null);
-    this._workers  = this._createWorkers(numWorkers);
+  constructor({fps = 60, numWorkers = 4, deckLayersPath = require('path').join(__dirname)} = {}) {
+    console.log(deckLayersPath);
+    this._fps            = fps;
+    this._timerId        = null;
+    this._workerId       = 0;
+    this._reqs           = Object.create(null);
+    this._jobs           = Object.create(null);
+    this._deckLayersPath = deckLayersPath;
+    this._workers        = this._createWorkers(numWorkers);
 
     process.on('exit', killWorkers);
     process.on('beforeExit', killWorkers);
@@ -88,7 +90,7 @@ class RenderCluster {
 
   _createWorkers(numWorkers = 4) {
     return Array.from({length: numWorkers}).map((_, i) => {
-      const worker = require('child_process').fork(workerPath, {
+      const worker = require('child_process').fork(workerPath, [this._deckLayersPath], {
         cwd: __dirname,
         // serialization: 'advanced',
         execArgv: ['--trace-uncaught'],
diff --git a/modules/demo/ssr/point-cloud/render/copy.js b/modules/demo/ssr/ssr-render-cluster/render/copy.js
similarity index 98%
rename from modules/demo/ssr/point-cloud/render/copy.js
rename to modules/demo/ssr/ssr-render-cluster/render/copy.js
index 1b735d818..aba5c6294 100644
--- a/modules/demo/ssr/point-cloud/render/copy.js
+++ b/modules/demo/ssr/ssr-render-cluster/render/copy.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2021, NVIDIA CORPORATION.
+// Copyright (c) 2022, NVIDIA CORPORATION.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
diff --git a/modules/demo/ssr/point-cloud/render/render.js b/modules/demo/ssr/ssr-render-cluster/render/render.js
similarity index 55%
rename from modules/demo/ssr/point-cloud/render/render.js
rename to modules/demo/ssr/ssr-render-cluster/render/render.js
index a64cbbd8c..37f3d25a4 100644
--- a/modules/demo/ssr/point-cloud/render/render.js
+++ b/modules/demo/ssr/ssr-render-cluster/render/render.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2021-2022, NVIDIA CORPORATION.
+// Copyright (c) 2022, NVIDIA CORPORATION.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,6 +14,8 @@
 
 const {RapidsJSDOM}   = require('@rapidsai/jsdom');
 const copyFramebuffer = require('./copy')();
+const {makeDeck, openLayerIpcHandles, closeLayerIpcHandles, serializeCustomLayer} =
+  require(process.argv[2]);
 
 class Renderer {
   constructor() {
@@ -26,21 +28,41 @@ class Renderer {
     this.jsdom   = jsdom;
     this._render = render;
   }
-  async render(props = {}, state = {}, events = [], frame = 0) {
+
+  async render(props = {}, layers = {}, state = {}, events = [], frame = 0) {
     const window = this.jsdom.window;
 
+    // get graph layer data, and ipc handles for the gpu buffers
+    layers = openLayerIpcHandles(layers);
+    state?.layers && Object.assign(layers, state.layers);
+
+    // update deck props as per current state
     props && this.deck.setProps(props);
     state?.deck && this.deck.restore(state.deck);
+
+    // restore current window state
     state?.window && Object.assign(window, state.window);
 
+    // restore current boxSelect state
+    state?.selectedInfo && Object.assign(this.deck.selectedInfo, state.selectedInfo);
+    state?.boxSelectCoordinates &&
+      Object.assign(this.deck.boxSelectCoordinates, state.boxSelectCoordinates);
+
+    // dipatch currently active events in the jsdom window
     (events || []).forEach((event) => window.dispatchEvent(event));
 
-    await this._render();
+    // render the deck.gl frame using the current layers
+    await this._render(layers);
+
+    // close the ipc handles for layer data
+    closeLayerIpcHandles(layers);
 
+    // return the frame to the main process along with the current state
     return {
       frame: copyFramebuffer(this.deck.animationLoop, frame),
       state: {
         deck: this.deck.serialize(),
+        layers: serializeCustomLayer(this.deck.layerManager.getLayers()),
         window: {
           x: window.x,
           y: window.y,
@@ -56,13 +78,13 @@ class Renderer {
           modifiers: window.modifiers,
           mouseInWindow: window.mouseInWindow,
         },
+        boxSelectCoordinates: this.deck.boxSelectCoordinates,
+        selectedInfo: this.deck.selectedInfo
       }
     };
   }
 }
 
-module.exports.Renderer = Renderer;
-
 function immediateAnimationFrame(renderer) {
   let request  = null;
   let flushing = false;
@@ -84,66 +106,4 @@ function immediateAnimationFrame(renderer) {
   };
 }
 
-function makeDeck() {
-  const {log: deckLog} = require('@deck.gl/core');
-  deckLog.level        = 0;
-  deckLog.enable(false);
-
-  const {OrbitView, COORDINATE_SYSTEM, LinearInterpolator} = require('@deck.gl/core');
-  const {PointCloudLayer}                                  = require('@deck.gl/layers');
-  const {DeckSSR}                                          = require('@rapidsai/deck.gl');
-  const {LASLoader}                                        = require('@loaders.gl/las');
-  const {registerLoaders}                                  = require('@loaders.gl/core');
-
-  registerLoaders(LASLoader);
-
-  // Data source: kaarta.com
-  const LAZ_SAMPLE = 'http://localhost:8080/indoor.0.1.laz';
-
-  const transitionInterpolator = new LinearInterpolator(['rotationOrbit']);
-
-  const makeLayers = (deck) => {
-    return [
-      new PointCloudLayer({
-        id: 'laz-point-cloud-layer',
-        data: LAZ_SAMPLE,
-        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
-        getNormal: [0, 1, 0],
-        getColor: [255, 255, 255],
-        opacity: 0.5,
-        pointSize: 0.5
-      }),
-    ]
-  };
-
-  const deck = new DeckSSR({
-    createFramebuffer: true,
-    initialViewState: {
-      target: [0, 0, 0],
-      rotationX: 0,
-      rotationOrbit: 0,
-      orbitAxis: 'Y',
-      fov: 50,
-      minZoom: 0,
-      maxZoom: 10,
-      zoom: 1
-    },
-    layers: makeLayers(null),
-    views: [
-      new OrbitView({transitionInterpolator}),
-    ],
-    controller: true,
-    parameters: {clearColor: [0.93, 0.86, 0.81, 1]},
-    onAfterAnimationFrameRender({_loop}) { _loop.pause(); },
-  });
-
-  return {
-    deck,
-    render() {
-      const done = deck.animationLoop.waitForRender();
-      deck.setProps({layers: makeLayers(deck)});
-      deck.animationLoop.start();
-      return done;
-    },
-  };
-}
+module.exports.Renderer = Renderer;
diff --git a/modules/demo/ssr/point-cloud/render/worker.js b/modules/demo/ssr/ssr-render-cluster/render/worker.js
similarity index 91%
rename from modules/demo/ssr/point-cloud/render/worker.js
rename to modules/demo/ssr/ssr-render-cluster/render/worker.js
index 59200b738..80aab089b 100644
--- a/modules/demo/ssr/point-cloud/render/worker.js
+++ b/modules/demo/ssr/ssr-render-cluster/render/worker.js
@@ -18,8 +18,8 @@ const {tap, groupBy, mergeMap, concatMap} = require('rxjs/operators');
 const {Renderer} = require('./render');
 const renderer   = new Renderer();
 
-function render({props = {}, state = {}, event = [], frame = 0}) {
-  return renderer.render(props, state, event, frame);
+function render({props = {}, layers = {}, state = {}, event = [], frame = 0}) {
+  return renderer.render(props, layers, state, event, frame);
 }
 
 fromEvent(process, 'message', (x) => x)