diff --git a/docs/VisualTensorView.md b/docs/VisualTensorView.md
new file mode 100644
index 00000000..922ad154
--- /dev/null
+++ b/docs/VisualTensorView.md
@@ -0,0 +1,55 @@
+# Visual Tensor View
+
+## Table of Contents
+- [About](#about)
+- [How to use](#how-to-use)
+
+## About
+
+Visual Tensor View is a tool that alows to visualize tensor data as a 2D-heatmap.
+
+<img src="./images/VisualTensorViewOverview.jpg"/>
+
+## How to use
+
+Currently Visual Tensor View is integrated into property sidebar of Circle Graph View.
+The visualizer is shown for all node properties that are tensors of 2 or more dimentions:
+
+<img src="./images/VisualTensorViewExample.jpg"/>
+
+In order to visualize tensor data:
+- we need a *.circle model that contains at least one node with tensor properties with 2 or more dimentions like 'weights', 'filter', etc.
+- open a folder that contains such model.
+- click on the model file in Explorer.
+- click on such node (Conv2D, for example).
+<img src="./images/VisualTensorViewNode.jpg"/>
+
+- in 'NODE PROPERTIES' sidebar find 'INPUTS' containing the tensor property ('filter' in case of Conv2D).
+- expand it with '+' button.
+<img src="./images/VisualTensorViewExpand.jpg"/>
+
+- the visualizer should appear.
+<img src="./images/VisualTensorViewExpanded.jpg"/>
+
+- you can modify the heatmap scale or swap 'x' and 'y' using respective UI elements.
+<img src="./images/VisualTensorViewScale.jpg"/>
+
+- the heatmap colors correspond to respective tensor values, the higher wavelength, the higher value:
+    * 'blue' - the lowest value in the current heatmap
+    * 'green' - the value is about (min + max) / 2
+    * 'red' - the highest value in the current heatmap
+
+- hover the mouse over the heatmap pixel to see the actual value in the tooltip.
+<img src="./images/VisualTensorViewHeatmap.jpg"/>
+
+- if the tensor is 2D all tensor data is shown as a 2D-heatmap at once.
+
+- if the tensor is 3D, 4D...:
+    * exactly two axes should be selected with the checkboxes, the selected axes correspond to 'x' and 'y' of the heatmap.
+    <img src="./images/VisualTensorViewAxes.jpg"/>
+
+    * for all other axes fixed values should be set.
+    <img src="./images/VisualTensorViewValues.jpg"/>
+
+    * in this example the heatmap point (x, y) corresponds to tensor[5][y][2][x].
+
diff --git a/docs/images/VisualTensorViewAxes.jpg b/docs/images/VisualTensorViewAxes.jpg
new file mode 100644
index 00000000..a441d134
Binary files /dev/null and b/docs/images/VisualTensorViewAxes.jpg differ
diff --git a/docs/images/VisualTensorViewExample.jpg b/docs/images/VisualTensorViewExample.jpg
new file mode 100644
index 00000000..91a56d5d
Binary files /dev/null and b/docs/images/VisualTensorViewExample.jpg differ
diff --git a/docs/images/VisualTensorViewExpand.jpg b/docs/images/VisualTensorViewExpand.jpg
new file mode 100644
index 00000000..d58d1a39
Binary files /dev/null and b/docs/images/VisualTensorViewExpand.jpg differ
diff --git a/docs/images/VisualTensorViewExpanded.jpg b/docs/images/VisualTensorViewExpanded.jpg
new file mode 100644
index 00000000..e30e7e60
Binary files /dev/null and b/docs/images/VisualTensorViewExpanded.jpg differ
diff --git a/docs/images/VisualTensorViewHeatmap.jpg b/docs/images/VisualTensorViewHeatmap.jpg
new file mode 100644
index 00000000..7f10e90f
Binary files /dev/null and b/docs/images/VisualTensorViewHeatmap.jpg differ
diff --git a/docs/images/VisualTensorViewNode.jpg b/docs/images/VisualTensorViewNode.jpg
new file mode 100644
index 00000000..57e27308
Binary files /dev/null and b/docs/images/VisualTensorViewNode.jpg differ
diff --git a/docs/images/VisualTensorViewOverview.jpg b/docs/images/VisualTensorViewOverview.jpg
new file mode 100644
index 00000000..5cfbafe0
Binary files /dev/null and b/docs/images/VisualTensorViewOverview.jpg differ
diff --git a/docs/images/VisualTensorViewScale.jpg b/docs/images/VisualTensorViewScale.jpg
new file mode 100644
index 00000000..58d104bb
Binary files /dev/null and b/docs/images/VisualTensorViewScale.jpg differ
diff --git a/docs/images/VisualTensorViewValues.jpg b/docs/images/VisualTensorViewValues.jpg
new file mode 100644
index 00000000..35fe424d
Binary files /dev/null and b/docs/images/VisualTensorViewValues.jpg differ
diff --git a/media/CircleGraph/index.html b/media/CircleGraph/index.html
index 9072ea67..146195b7 100644
--- a/media/CircleGraph/index.html
+++ b/media/CircleGraph/index.html
@@ -72,6 +72,8 @@
 <script type="text/javascript" nonce="%nonce%">
 // TODO find better way to set initial view mode
 var __viewMode = '%viewMode%';
+// TODO find better way to enable VisualTensorView
+var __enableVisualTensorView = '%enableVisualTensorView%';
 </script>
 <style>
 html { touch-action: none; overflow: hidden; width: 100%; height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
diff --git a/media/CircleGraph/view-sidebar.css b/media/CircleGraph/view-sidebar.css
index 643413ef..b55ab067 100644
--- a/media/CircleGraph/view-sidebar.css
+++ b/media/CircleGraph/view-sidebar.css
@@ -70,6 +70,8 @@ https://github.com/lutzroeder/netron/blob/ae449ff55642636e6a1eef092eda34ffcba1c6
 .sidebar-view-item-value-line-content { white-space: pre; word-wrap: normal; overflow: auto; display: block; }
 .sidebar-view-item-value-expander { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; float: right; color: #aaa; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; padding: 4px 6px 4px 6px; }
 .sidebar-view-item-value-expander:hover { color: #000; }
+.sidebar-view-item-value-number { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; text-align: center; float: left; font-size: 11px !important; width: 14px !important; height: 11px !important; }
+.sidebar-view-item-value-number::-webkit-outer-spin-button, .sidebar-view-item-value-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 .sidebar-view-item-select {
     font-family: inherit; font-size: 12px;
     background-color: #fcfcfc; border: #fcfcfc; color: #333;
diff --git a/media/CircleGraph/view-sidebar.js b/media/CircleGraph/view-sidebar.js
index 0d048c9c..53eb9695 100644
--- a/media/CircleGraph/view-sidebar.js
+++ b/media/CircleGraph/view-sidebar.js
@@ -625,6 +625,358 @@ sidebar.ParameterView = class {
   }
 };
 
+// returns 'tensor' shape as an array
+function getTensorShape(tensor) {
+  let shape = [];
+  let currentTensor = tensor;
+  while (Array.isArray(currentTensor)) {
+    shape.push(currentTensor.length);
+    currentTensor = currentTensor[0];
+  }
+  return shape;
+}
+
+// returns tensor[index[0]][index[1]]...
+function getTensorValue(tensor, index) {
+  let value = tensor;
+  for (const i of index) {
+    value = value[i];
+  }
+  return value;
+}
+
+// returns 2D subarray of a 'tensor' as normalized data
+// 'axis1' of a tensor corresponds to data y
+// 'axis2' of a tensor corresponds to data x
+// 'values' fix all other axes values for the tensor
+function normalizeTensor(tensor, axis1, axis2, values) {
+  let shape = getTensorShape(tensor);
+  let height = shape[axis1];
+  let width = shape[axis2];
+  let normalizedData = [];
+
+  let index = values.slice();
+
+  // find min and max values in the tensor
+  let minValue = Infinity;
+  let maxValue = -Infinity;
+  for (let i = 0; i < height; i++) {
+    for (let j = 0; j < width; j++) {
+      index[axis1] = i;
+      index[axis2] = j;
+      let value = getTensorValue(tensor, index);
+      minValue = Math.min(minValue, value);
+      maxValue = Math.max(maxValue, value);
+    }
+  }
+
+  // normalize values and create normalizedData
+  for (let i = 0; i < height; i++) {
+    let row = [];
+    for (let j = 0; j < width; j++) {
+      if (minValue === maxValue) {
+        row.push(0.5);
+        continue;
+      }
+      index[axis1] = i;
+      index[axis2] = j;
+      let value = getTensorValue(tensor, index);
+      row.push((value - minValue) / (maxValue - minValue));
+    }
+    normalizedData.push(row);
+  }
+  return normalizedData;
+}
+
+// creates a canvas in the document and renders 'tensor' values heatmap in it
+// 'axis1' of a tensor corresponds to heatmap y
+// 'axis2' of a tensor corresponds to heatmap x
+// 'values' fix all other axes values for the tensor
+// values[axis1] and values[axis2] are ignored
+function tensorToImage(tensor, axis1, axis2, values, scale, document) {
+  let imageData = normalizeTensor(tensor, axis1, axis2, values);
+  let height = imageData.length;
+  let width = imageData[0].length;
+  let canvas = document.createElement('canvas');
+  canvas.width = width * scale;
+  canvas.height = height * scale;
+  let ctx = canvas.getContext('2d');
+  ctx.imageSmoothingEnabled = false;
+  let imageDataArray = new Uint8ClampedArray(height * width * 4);
+
+  // add a function to extract a value from client coordinates
+  // (for tooltip)
+  canvas.getValue = (clientX, clientY) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor(Math.min(Math.max(clientX - rect.left, 0), canvas.width - 0.1) / scale);
+    const y = Math.floor(Math.min(Math.max(clientY - rect.top, 0), canvas.height - 0.1) / scale);
+    let index = values.slice();
+    index[axis1] = y;
+    index[axis2] = x;
+    return getTensorValue(tensor, index);
+  };
+
+  // set image data based on normalized values of tensor
+  // a normalized value of 0.0 corresponds to blue
+  // a normalized value of 0.5 corresponds to green
+  // a normalized value of 1.0 corresponds to red
+  for (let i = 0; i < height; i++) {
+    for (let j = 0; j < width; j++) {
+      let value = imageData[i][j];
+      let index = (i * width + j) * 4;
+
+      value *= 2;
+      let blue = Math.round(Math.max(0, 255 * (1.0 - value)));
+      let red = Math.round(Math.max(0, 255 * (value - 1.0)));
+      let green = 255 - blue - red;
+
+      imageDataArray[index] = red;
+      imageDataArray[index + 1] = green;
+      imageDataArray[index + 2] = blue;
+      imageDataArray[index + 3] = 255;
+    }
+  }
+  let imageDataImage = new ImageData(imageDataArray, width, height);
+  ctx.putImageData(imageDataImage, 0, 0);
+
+  // scale the canvas
+  ctx.scale(scale, scale);
+  ctx.drawImage(canvas, 0, 0);
+
+  return canvas;
+}
+
+// Creates UI that visualizes any 2D subarray of a tensor as a heatmap.
+sidebar.VisualTensorView = class {
+  constructor(host, tensor) {
+    this._host = host;
+    this._tensor = tensor;
+
+    this._element = this._host.document.createElement("div");
+    this._tensorShape = getTensorShape(this._tensor);
+    if (this._tensorShape.length < 2) {
+      return this;
+    }
+    this._element.className = "sidebar-view-item-value-line-border";
+
+    // _axes[0] - the axis that corresponds to heatmap x
+    // _axes[1] - the axis that corresponds to heatmap y
+    this._axes = [this._tensorShape.length - 2, this._tensorShape.length - 1];
+
+    // values of all other axes
+    this._values = Array(this._tensorShape.length);
+    this._values.fill(0);
+
+    this._scale = 12;
+
+    // scale label
+    let scaleText = this._host.document.createElement("div");
+    scaleText.setAttribute('style', 'float: left;');
+    scaleText.innerHTML = "scale:";
+
+    // scale value text
+    let scaleValue = this._host.document.createElement("div");
+    scaleValue.setAttribute('style', 'float: left;');
+    scaleValue.innerHTML = this._scale;
+
+    // scale down button
+    let scaleDownButton = this._host.document.createElement("div");
+    scaleDownButton.className = "sidebar-view-item-value-expander";
+    scaleDownButton.setAttribute('style', 'float: left; padding: 1px 4px 0px 4px;');
+    // left arrow symbol
+    scaleDownButton.innerHTML = "&#x140A";
+    scaleDownButton.addEventListener("click", () => {
+      this._scale = Math.max(this._scale - 1, 1);
+      scaleValue.innerHTML = this._scale;
+      this.updateImage();
+    });
+
+    // scale up button
+    let scaleUpButton = this._host.document.createElement("div");
+    scaleUpButton.className = "sidebar-view-item-value-expander";
+    scaleUpButton.setAttribute('style', 'float: left; padding: 1px 4px 0px 4px;');
+    // right arrow symbol
+    scaleUpButton.innerHTML = "&#x1405";
+    scaleUpButton.addEventListener("click", () => {
+      this._scale = Math.max(this._scale + 1, 1);
+      scaleValue.innerHTML = this._scale;
+      this.updateImage();
+    });
+
+    // swap axes button
+    let swapAxesButton = this._host.document.createElement("div");
+    swapAxesButton.className = "sidebar-view-item-value-expander";
+    swapAxesButton.setAttribute('style', 'float: left; padding: 1px 4px 0px 4px;');
+    swapAxesButton.innerHTML = "swap axes";
+    swapAxesButton.addEventListener("click", () => {
+      [this._axes[0], this._axes[1]] = [this._axes[1], this._axes[0]];
+      this.updateImage();
+      this.updateUI();
+    });
+
+    // append the UI elements to root
+    this._element.appendChild(scaleText);
+    this._element.appendChild(scaleDownButton);
+    this._element.appendChild(scaleValue);
+    this._element.appendChild(scaleUpButton);
+    this._element.appendChild(swapAxesButton);
+
+    // new line
+    this._element.appendChild(this._host.document.createElement("br"));
+    this._element.appendChild(this._host.document.createElement("br"));
+
+    this._checkboxes = [];
+    this._valueTexts = [];
+    this._infoTexts = [];
+    // if tensor has more than 2 axes, we need a UI to select 2 axes for heatmap
+    // and values for all other axes
+    if (this._tensorShape.length > 2) {
+      // for each axis create a checkbox and a value selector
+      for (let i = 0; i < this._tensorShape.length; ++i) {
+        // create a label that shows maximum axis value
+        // and "(x)" or "(y)" respectively if the axis is selected
+        // for a heatmap
+        let infoText = this._host.document.createElement("div");
+        infoText.setAttribute('style', 'float: left;');
+        infoText.setText = () => {
+          infoText.innerHTML = "/ " + (this._tensorShape[i] - 1);
+          if (this._axes[0] === i) {
+            infoText.innerHTML += " <b>(x)</b>";
+          }
+          else if (this._axes[1] === i) {
+            infoText.innerHTML += " <b>(y)</b>";
+          }
+        };
+        this._infoTexts.push(infoText);
+
+        // create a checkbox to select the axis for a heatmap
+        let checkbox = this._host.document.createElement("input");
+        checkbox.setAttribute('style', 'float: left;');
+        checkbox.type = "checkbox";
+        checkbox.checked = this._axes.includes(i);
+        checkbox.addEventListener("change", () => {
+          if (checkbox.checked) {
+            if (this._axes.length >= 2) {
+              this._checkboxes[this._axes[0]].checked = false;
+              this._axes.shift();
+            }
+            this._axes.push(i);
+          } else {
+            this._axes.splice(this._axes.indexOf(i), 1);
+          }
+          this.updateImage();
+          this.updateUI();
+        });
+        this._checkboxes.push(checkbox);
+
+        // create a number input to set axis value
+        let valueText = this._host.document.createElement("input");
+        valueText.className = "sidebar-view-item-value-number";
+        valueText.type = "number";
+        valueText.min = 0;
+        valueText.max = this._tensorShape[i] - 1;
+        valueText.value = 0;
+        valueText.setValue = (value) => {
+          if (valueText.disabled) {
+            return;
+          }
+          valueText.value = value;
+          if (valueText.value === "") {
+            valueText.value = 0;
+          }
+          if (parseInt(valueText.value) < parseInt(valueText.min)) {
+            valueText.value = valueText.min;
+          }
+          if (parseInt(valueText.value) > parseInt(valueText.max)) {
+            valueText.value = valueText.max;
+          }
+          this._values[i] = parseInt(valueText.value);
+          this.updateImage();
+        };
+        valueText.decrease = () => {
+          if (valueText.value === valueText.min) {
+            valueText.setValue(valueText.max);
+          } else {
+            valueText.setValue(parseInt(valueText.value) - 1);
+          }
+        };
+        valueText.increase = () => {
+          if (valueText.value === valueText.max) {
+            valueText.setValue(valueText.min);
+          } else {
+            valueText.setValue(parseInt(valueText.value) + 1);
+          }
+        };
+        valueText.addEventListener("change", () => {
+          valueText.setValue(valueText.value);
+        });
+        this._valueTexts.push(valueText);
+
+        // create buttons to decrease/increase axis value by 1
+        let leftButton = this._host.document.createElement("div");
+        leftButton.className = "sidebar-view-item-value-expander";
+        leftButton.setAttribute('style', 'float: left; padding: 1px 4px 0px 4px;');
+        // left arrow symbol
+        leftButton.innerHTML = "&#x140A";
+        leftButton.addEventListener("click", valueText.decrease);
+        let rightButton = this._host.document.createElement("div");
+        rightButton.className = "sidebar-view-item-value-expander";
+        rightButton.setAttribute('style', 'float: left; padding: 1px 4px 0px 4px;');
+        // right arrow symbol
+        rightButton.innerHTML = "&#x1405";
+        rightButton.addEventListener("click", valueText.increase);
+
+        // append the UI elements to root
+        this._element.appendChild(checkbox);
+        this._element.appendChild(leftButton);
+        this._element.appendChild(valueText);
+        this._element.appendChild(rightButton);
+        this._element.appendChild(infoText);
+
+        // new line
+        this._element.appendChild(this._host.document.createElement("br"));
+        this._element.appendChild(this._host.document.createElement("br"));
+      }
+    }
+
+    this._imageContainer = null;
+    this.updateImage();
+    this.updateUI();
+  }
+
+  // update selected axes' labels with "(x)" and "(y)" respectively
+  // and disable value selectors for selected axes
+  updateUI() {
+    for (let i = 0; i < this._valueTexts.length; ++i) {
+      this._infoTexts[i].setText();
+      this._valueTexts[i].disabled = this._axes.includes(i);
+    }
+  }
+
+  // render the image and append the canvas to root
+  updateImage() {
+    if (this._imageContainer) {
+      this._element.removeChild(this._imageContainer);
+    }
+    this._imageContainer = null;
+    if (this._axes.length < 2) {
+      return;
+    }
+    try {
+      this._imageContainer = this._host.document.createElement("div");
+      this._image = tensorToImage(this._tensor, this._axes[1], this._axes[0], this._values, this._scale, this._host.document);
+      // add event listener to update tooltip on mouse move
+      this._image.addEventListener("mousemove", (e) => {
+        this._imageContainer.title = this._image.getValue(e.clientX, e.clientY);
+      }, false);
+      this._imageContainer.appendChild(this._image);
+      this._element.appendChild(this._imageContainer);
+    } catch (err) {
+      // do nothing
+    }
+  }
+};
+
 sidebar.ArgumentView = class {
   constructor(host, argument) {
     this._host = host;
@@ -762,6 +1114,9 @@ sidebar.ArgumentView = class {
           const valueLine = this._host.document.createElement("div");
           try {
             const state = initializer.state;
+            if (!state && __enableVisualTensorView === "true") {
+              this._element.appendChild(new sidebar.VisualTensorView(this._host, initializer._decode(initializer._context(), 0))._element);
+            }
             if (
               state === null &&
               this._host.save &&
diff --git a/src/CircleGraph/CircleGraphCtrl.ts b/src/CircleGraph/CircleGraphCtrl.ts
index c8152c05..5312e422 100644
--- a/src/CircleGraph/CircleGraphCtrl.ts
+++ b/src/CircleGraph/CircleGraphCtrl.ts
@@ -83,6 +83,7 @@ export class CircleGraphCtrl {
   protected _selectionNames: string[] | undefined;
   protected _state: CtrlStatus;
   protected _viewMode: string;
+  protected _enableVisualTensorView: boolean;
 
   private _ctrlDisposables: vscode.Disposable[] = [];
 
@@ -94,6 +95,7 @@ export class CircleGraphCtrl {
     this._eventHandler = undefined;
     this._state = CtrlStatus.init;
     this._viewMode = "viewer";
+    this._enableVisualTensorView = false;
   }
 
   public initGraphCtrl(
@@ -136,6 +138,10 @@ export class CircleGraphCtrl {
     this._modelToLoad = model;
   }
 
+  public enableVisualTensorView() {
+    this._enableVisualTensorView = true;
+  }
+
   /**
    * @brief set initial selection of nodes
    * @note  if called before loading, will be applied after load is finished
@@ -462,6 +468,8 @@ export class CircleGraphCtrl {
     html = this.updateUri(html, webview, "%view.js%", "view.js");
     // viewMode
     html = html.replace("%viewMode%", this._viewMode);
+    // VisualTensorView
+    html = html.replace("%enableVisualTensorView%", this._enableVisualTensorView ? "true" : "false");
 
     return html;
   }
diff --git a/src/CircleGraph/CircleViewer.ts b/src/CircleGraph/CircleViewer.ts
index 9d1c62a2..7dce2076 100644
--- a/src/CircleGraph/CircleViewer.ts
+++ b/src/CircleGraph/CircleViewer.ts
@@ -28,6 +28,7 @@ class CircleViewer extends CircleGraphCtrl {
   constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
     super(extensionUri, panel.webview);
     this._panel = panel;
+    this.enableVisualTensorView();
   }
 
   public owner(panel: vscode.WebviewPanel) {