diff --git a/src/components/builder.js b/src/components/builder.js
index 3884eacd90..c953dce0ff 100644
--- a/src/components/builder.js
+++ b/src/components/builder.js
@@ -37,7 +37,6 @@ import TagsForm from './tags/Tags.form';
 import TextAreaForm from './textarea/TextArea.form';
 import TextfieldForm from './textfield/TextField.form';
 import TimeForm from './time/Time.form';
-import TreeForm from './tree/Tree.form';
 import UnknownForm from './unknown/Unknown.form';
 import UrlForm from './url/Url.form';
 import WellForm from './well/Well.form';
@@ -80,7 +79,6 @@ Components.tags.editForm = TagsForm;
 Components.textarea.editForm = TextAreaForm;
 Components.textfield.editForm = TextfieldForm;
 Components.time.editForm = TimeForm;
-Components.tree.editForm = TreeForm;
 Components.unknown.editForm = UnknownForm;
 Components.url.editForm = UrlForm;
 Components.well.editForm = WellForm;
diff --git a/src/components/index.js b/src/components/index.js
index 5ec679e647..9df2ad255a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -42,7 +42,6 @@ import TagsComponent from './tags/Tags';
 import TextAreaComponent from './textarea/TextArea';
 import TextFieldComponent from './textfield/TextField';
 import TimeComponent from './time/Time';
-import TreeComponent from './tree/Tree';
 import UnknownComponent from './unknown/Unknown';
 import UrlComponent from './url/Url';
 import WellComponent from './well/Well';
@@ -93,7 +92,6 @@ export default {
   textarea: TextAreaComponent,
   textfield: TextFieldComponent,
   time: TimeComponent,
-  tree: TreeComponent,
   unknown: UnknownComponent,
   url: UrlComponent,
   well: WellComponent,
diff --git a/src/components/tree/Node.js b/src/components/tree/Node.js
deleted file mode 100644
index 58db7167b8..0000000000
--- a/src/components/tree/Node.js
+++ /dev/null
@@ -1,227 +0,0 @@
-import _ from 'lodash';
-
-export default class Node {
-  constructor(
-    parent,
-    {
-      data = {},
-      children = [],
-    } = {},
-    {
-      checkNode,
-      createComponents,
-      isNew = true,
-      removeComponents,
-      parentPath = ''
-    } = {},
-  ) {
-    this.parent = parent;
-    this.previousData = {};
-    this.persistentData = _.cloneDeep(data);
-    this.new = isNew;
-    this.createComponents = createComponents;
-    this.checkNode = checkNode;
-    this.removeComponents = removeComponents;
-    this.revertAvailable = false;
-    this.editing = false;
-    this.collapsed = false;
-    this.components = [];
-    this.children = [];
-    this.parentPath = parentPath;
-
-    this.resetData();
-    this.children = children.map((child, index) => new Node(this, child, {
-      checkNode,
-      createComponents,
-      isNew: false,
-      removeComponents,
-      parentPath: this.getChildrenPath(index),
-    }));
-}
-
-  get value() {
-    return this.new
-      ? null // Check the special case for empty root node.
-      : {
-        data: _.cloneDeep(this.persistentData),
-        children: this.children.filter((child) => !child.new).map((child) => child.value),
-      };
-  }
-
-  get isRoot() {
-    return this.parent === null;
-  }
-
-  get changing() {
-    return this.new || this.editing;
-  }
-
-  get hasChangingChildren() {
-    return this.changin || this.children.some((child) => child.hasChangingChildren);
-  }
-
-  get hasData() {
-    return !_.isEmpty(this.persistentData);
-  }
-
-  get hasChildren() {
-    return Array.isArray(this.children) && this.children.length > 0;
-  }
-
-  getChildrenPath(index) {
-    return this.parentPath ? `${this.parentPath}.children[${index}]` : '';
-  }
-
-  eachChild(iteratee) {
-    iteratee(this);
-    this.children.forEach((child) => child.eachChild(iteratee));
-    return this;
-  }
-
-  getComponents() {
-    return this.children.reduce(
-      (components, child) => components.concat(child.getComponents()),
-      this.components,
-    );
-  }
-
-  validateNode() {
-    let valid = true;
-    this.getComponents().forEach(comp => {
-      comp.setPristine(false);
-      valid &= comp.checkValidity(null, false, this.persistentData);
-    });
-    return valid;
-  }
-
-  addChild() {
-    if (this.new) {
-      return null;
-    }
-
-    const child = new Node(this, {}, {
-      checkNode: this.checkNode,
-      createComponents: this.createComponents,
-      isNew: true,
-      removeComponents: this.removeComponents,
-      parentPath: this.getChildrenPath(this.children.length),
-    });
-    this.children = this.children.concat(child);
-    return child;
-  }
-
-  removeChild(childToRemove) {
-    if (!this.new) {
-      this.children = this.children.filter((child) => child !== childToRemove);
-    }
-
-    return this;
-  }
-
-  edit() {
-    if (this.new) {
-      return this;
-    }
-
-    this.editing = true;
-    return this.resetData();
-  }
-
-  save() {
-    const isValid = this.validateNode();
-    if (this.changing && isValid) {
-      if (this.new) {
-        this.new = false;
-      }
-      else {
-        this.editing = false;
-        this.revertAvailable = true;
-      }
-      this.commitData();
-    }
-
-    return isValid;
-  }
-
-  cancel() {
-    if (this.new) {
-      this.remove();
-    }
-    else if (this.editing) {
-      this.editing = false;
-      this.resetData();
-    }
-
-    return this;
-  }
-
-  remove() {
-    this.parent.removeChild(this);
-    this.parent = null;
-    this.clearComponents();
-    return this;
-  }
-
-  revert() {
-    if (!this.revertAvailable) {
-      return this;
-    }
-
-    this.data = this.previousData;
-    return this.commitData();
-  }
-
-  commitData() {
-    this.previousData = this.persistentData;
-    this.persistentData = _.cloneDeep(this.data);
-    this.clearComponents();
-    return this;
-  }
-
-  resetData() {
-    this.data = _.cloneDeep(this.persistentData);
-    this.updateComponentsContext();
-    return this;
-  }
-
-  updateComponentsContext() {
-    if (this.changing) {
-      this.instantiateComponents();
-    }
-    else {
-      this.clearComponents();
-    }
-
-    return this;
-  }
-
-  instantiateComponents() {
-    this.components = this.createComponents(this.data, this);
-    this.components.forEach((component) => {
-      if (this.parentPath) {
-        const path = this.calculateComponentPath(component);
-        component.path = path;
-      }
-    });
-    this.checkNode(this);
-  }
-
-  clearComponents() {
-    this.removeComponents(this.components);
-    this.components = [];
-  }
-
-  /**
-   * Return a path of component's value.
-   *
-   * @param {Object} component - The component instance.
-   * @return {string} - The component's value path.
-   */
-   calculateComponentPath(component) {
-    let path = '';
-    if (component.component.key) {
-      path = `${this.parentPath}.data.${component.component.key}`;
-    }
-    return path;
-  }
-}
diff --git a/src/components/tree/Tree.form.js b/src/components/tree/Tree.form.js
deleted file mode 100644
index 2fe5c9a19b..0000000000
--- a/src/components/tree/Tree.form.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import componentEditForm from '../_classes/component/Component.form';
-import TreeEditData from './editForm/Tree.edit.data';
-import TreeDisplayData from './editForm/Tree.edit.display';
-export default function(...extend) {
-  return componentEditForm([
-    {
-      key: 'display',
-      components: TreeDisplayData,
-    },
-    {
-      key: 'data',
-      components: TreeEditData,
-    },
-  ], ...extend);
-}
diff --git a/src/components/tree/Tree.js b/src/components/tree/Tree.js
deleted file mode 100644
index 67a5e7c683..0000000000
--- a/src/components/tree/Tree.js
+++ /dev/null
@@ -1,520 +0,0 @@
-import _ from 'lodash';
-import Component from '../_classes/component/Component';
-import Components from '../Components';
-import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent';
-import Node from './Node';
-
-export default class TreeComponent extends NestedDataComponent {
-  static schema(...extend) {
-    return NestedDataComponent.schema({
-      label: 'Tree',
-      key: 'tree',
-      type: 'tree',
-      clearOnHide: true,
-      input: true,
-      tree: true,
-      components: [],
-      multiple: false,
-    }, ...extend);
-  }
-
-  static get builderInfo() {
-    return {
-      title: 'Tree',
-      icon: 'indent',
-      weight: 40,
-      documentation: '/userguide/form-building/data-components#tree',
-      showPreview: false,
-      schema: TreeComponent.schema(),
-    };
-  }
-
-  constructor(...args) {
-    super(...args);
-    this.type = 'tree';
-  }
-
-  get emptyValue() {
-    return {};
-  }
-
-  get viewComponents() {
-    if (!this.viewComponentsInstantiated) {
-      this.viewComponentsInstantiated = true;
-      this._viewComponents = this.createComponents({});
-    }
-
-    return this._viewComponents;
-  }
-
-  init() {
-    if (this.builderMode) {
-      return super.init();
-    }
-
-    this.components = [];
-    this.componentOptions = {
-      ...this.options,
-      parent: this,
-      root: this.root || this,
-    };
-    this.disabled = this.shouldDisabled;
-    this.setRoot();
-    this.viewComponentsInstantiated = false;
-    this._viewComponents = [];
-  }
-
-  get disabled() {
-    return super.disabled;
-  }
-
-  set disabled(disabled) {
-    super.disabled = disabled;
-    this.viewComponents.forEach((component) => component.parentDisabled = disabled);
-  }
-
-  get isDefaultValueComponent() {
-    return !!this.options.editComponent && !!this.options.editForm && this.component.key === 'defaultValue';
-  }
-
-  destroy(all = false) {
-    if (!this.builderMode) {
-      this.removeComponents(this._viewComponents, all);
-    }
-    super.destroy(all);
-  }
-
-  createComponents(data, node) {
-    const components = this.componentComponents.map(
-      (component) => {
-        const componentInstance = Components.create(component, this.componentOptions, data);
-        componentInstance.init();
-        componentInstance.parentDisabled = this.disabled;
-        return componentInstance;
-      },
-    );
-
-    if (node) {
-      this.checkNode(this.data, node);
-    }
-
-    return components;
-  }
-
-  removeComponents(components, all = false) {
-    return components.map((component) => component.destroy(all));
-  }
-
-  render() {
-    if (this.builderMode) {
-      return super.render();
-    }
-
-    return super.render(this.renderTree(this.treeRoot));
-  }
-
-  renderTree(node = {}, odd = true) {
-    const childNodes = (node.hasChildren && !node.collapsed)
-      ? this.renderChildNodes(node.children, !odd)
-      : [];
-    const content = node.changing
-      ? this.renderEdit(node)
-      : this.renderView(node);
-
-    return this.renderTemplate('tree', {
-      odd,
-      childNodes,
-      content,
-      node,
-    });
-  }
-
-  renderChildNodes(nodes = [], odd) {
-    return nodes.map((node) => this.renderTree(node, odd));
-  }
-
-  renderEdit(node = {}) {
-    return this.renderTemplate('treeEdit', {
-      children: this.renderComponents(node.components),
-      node,
-    });
-  }
-
-  renderView(node = {}) {
-    return this.renderTemplate('treeView', {
-      values: this.viewComponents.map((component) => {
-        component.data = node.data;
-        component.checkComponentConditions(node.data);
-        return component.getView(component.dataValue);
-      }),
-      nodeData: node.data,
-      node,
-    });
-  }
-
-  attach(element) {
-    if (this.builderMode) {
-      return super.attach(element);
-    }
-
-    this.loadRefs(element, {
-      root: 'single',
-    });
-
-    return Promise.all([
-      super.attach(element),
-      this.attachNode(this.refs.root, this.treeRoot),
-    ]);
-  }
-
-  attachNode(element, node) {
-    if (!element) {
-      return Promise.resolve();
-    }
-
-    let componentsPromise = Promise.resolve();
-    let childrenPromise = Promise.resolve();
-
-    node.refs = _.reduce(
-      element.children,
-      (refs, child) => (
-        child.hasAttribute('ref')
-          ? {
-            ...refs,
-            [child.getAttribute('ref')]: child,
-          }
-          : refs
-      ),
-      {},
-    );
-
-    if (node.refs.content) {
-      this.attachActions(node);
-      componentsPromise = this.attachComponents(node);
-    }
-
-    if (node.refs.childNodes) {
-      childrenPromise = this.attachChildren(node);
-    }
-
-    return Promise.all([
-      componentsPromise,
-      childrenPromise,
-    ]);
-  }
-
-  attachActions(node) {
-    if (!node.editing) {
-      this.loadRefs.call(node, node.refs.content, {
-        addChild: 'single',
-        editNode: 'single',
-        removeNode: 'single',
-        revertNode: 'single',
-        toggleNode: 'single',
-      });
-    }
-
-    //load refs correctly (if there is nested tree)
-    this.loadRefs.call(node, node.refs.content.children[0]?.children[1] || node.refs.content, {
-      cancelNode: 'single',
-      saveNode: 'single',
-    });
-
-    if (node.refs.addChild) {
-      this.addEventListener(node.refs.addChild, 'click', () => {
-        this.addChild(node);
-      });
-    }
-
-    if (node.refs.cancelNode) {
-      this.addEventListener(node.refs.cancelNode, 'click', () => {
-        this.cancelNode(node);
-      });
-    }
-
-    if (node.refs.editNode) {
-      this.addEventListener(node.refs.editNode, 'click', () => {
-        this.editNode(node);
-      });
-    }
-
-    if (node.refs.removeNode) {
-      this.addEventListener(node.refs.removeNode, 'click', () => {
-        this.removeNode(node);
-      });
-    }
-
-    if (node.refs.revertNode) {
-      this.addEventListener(node.refs.revertNode, 'click', () => {
-        this.revertNode(node);
-      });
-    }
-
-    if (node.refs.saveNode) {
-      this.addEventListener(node.refs.saveNode, 'click', () => {
-        this.saveNode(node);
-      });
-    }
-
-    if (node.refs.toggleNode) {
-      this.addEventListener(node.refs.toggleNode, 'click', () => {
-        this.toggleNode(node);
-      });
-    }
-  }
-
-  attachComponents(node, ...args) {
-    if (this.builderMode) {
-      return super.attachComponents.call(this, node, ...args);
-    }
-
-    this.loadRefs.call(node, node.refs.content, {
-      nodeEdit: 'single',
-    });
-
-    return node.refs.nodeEdit
-      ? super.attachComponents(node.refs.nodeEdit, node.components)
-      : Promise.resolve();
-  }
-
-  attachChildren(node) {
-    const childElements = node.refs.childNodes.children;
-
-    return Promise.all(
-      _.map(
-        childElements,
-        (childElement, index) => this.attachNode(childElement, node.children[index]),
-      ),
-    );
-  }
-
-  setValue(value, flags = {}) {
-    const changed = this.updateValue(value, flags);
-    this.setRoot();
-    return changed;
-  }
-
-  addChild(parent) {
-    if (this.options.readOnly || parent.new) {
-      return;
-    }
-
-    this.hook('tree.addChild', {
-      parent,
-      component: this,
-    }, () => {
-      const child = parent.addChild();
-      this.redraw();
-
-      return child;
-    });
-  }
-
-  cancelNode(node) {
-    if (this.options.readOnly) {
-      return;
-    }
-
-    this.hook('tree.cancelNode', {
-      node,
-      component: this,
-    }, () => {
-      if (node.isRoot) {
-        if (node.persistentData && !_.isEmpty(node.persistentData)) {
-          node.cancel();
-          this.redraw();
-        }
-        else {
-          this.removeRoot();
-        }
-      }
-      else {
-        node.cancel();
-        this.redraw();
-      }
-
-      return node;
-    });
-  }
-
-  editNode(node) {
-    if (this.options.readOnly || node.new) {
-      return;
-    }
-
-    this.hook('tree.editNode', {
-      node,
-      component: this,
-    }, () => {
-      node.edit();
-      this.redraw();
-
-      return node;
-    });
-  }
-
-  removeNode(node) {
-    if (this.options.readOnly || node.new) {
-      return;
-    }
-
-    this.hook('tree.removeNode', {
-      node,
-      component: this,
-    }, () => {
-      if (node.isRoot) {
-        this.removeRoot();
-      }
-      else {
-        node.remove();
-        this.updateTree();
-      }
-
-      return node;
-    });
-  }
-
-  revertNode(node) {
-    if (this.options.readOnly || !node.revertAvailable) {
-      return;
-    }
-
-    this.hook('tree.revertNode', {
-      node,
-      component: this,
-    }, () => {
-      node.revert();
-      this.updateTree();
-
-      return node;
-    });
-  }
-
-  saveNode(node) {
-    if (this.options.readOnly) {
-      return;
-    }
-
-    this.hook('tree.saveNode', {
-      node,
-      component: this,
-    }, () => {
-      const isSaved = node.save();
-      if (isSaved) {
-        this.updateTree();
-      }
-
-      return node;
-    });
-  }
-
-  toggleNode(node) {
-    this.hook('tree.toggleNode', {
-      node,
-      component: this,
-    }, () => {
-      node.collapsed = !node.collapsed;
-      this.redraw();
-
-      return node;
-    });
-  }
-
-  removeRoot() {
-    if (this.options.readOnly) {
-      return;
-    }
-
-    this.dataValue = this.defaultValue;
-    this.setRoot();
-    this.redraw();
-  }
-
-  setRoot() {
-    const value = this.getValue();
-    this.treeRoot = new Node(null, value, {
-      isNew: this.builderMode ? true : !value.data,
-      createComponents: this.createComponents.bind(this),
-      checkNode: this.checkNode.bind(this, this.data),
-      removeComponents: this.removeComponents,
-      parentPath: this.isDefaultValueComponent ? (this.path || this.component.key) : null,
-    });
-    this.hook('tree.setRoot', {
-      root: this.treeRoot,
-      component: this,
-    });
-    this.redraw();
-  }
-
-  getValue() {
-    return this.dataValue || {};
-  }
-
-  updateTree() {
-    this.updateValue(this.treeRoot.value);
-    this.redraw();
-  }
-
-  checkData(data, flags, row) {
-    return this.checkNode(data, this.treeRoot, flags, row);
-  }
-
-  checkNode(data, node, flags, row) {
-    return node.children.reduce(
-      (result, child) => this.checkNode(data, child, flags, row) && result,
-      super.checkData(data, flags, node.data, node.components) && !node.editing && !node.new,
-    );
-  }
-
-  getComponents() {
-    return this.treeRoot && (this.isDefaultValueComponent || (!this.isDefaultValueComponent && !this.builderMode))
-      ? this.treeRoot.getComponents()
-      : super.getComponents();
-  }
-
-  getValueAsString(value, options) {
-    const getChildAsString = (value) => {
-      let result = (`
-        <table border="1" style="width:100%">
-          <tbody>
-      `);
-      result += `
-            <tr>
-      `;
-      result += Object.keys(value.data).map((k) => (`
-              <th style="padding: 5px 10px;">${k}</th>
-              <td style="width:100%;padding:5px 10px;">
-                ${value.data[k]}
-                <br>
-      `));
-
-      if (value.children?.length !== 0) {
-        value.children?.forEach((v) => {
-          result += getChildAsString(v);
-        });
-      }
-
-      result += `
-              </td>
-            </tr>
-      `;
-
-      result += (`
-          </tbody>
-        </table>
-      `);
-
-      return result;
-    };
-
-    if (options?.email) {
-      let result = '';
-      result += getChildAsString(value);
-      return result;
-    }
-
-    return super.getValueAsString(value, options);
-  }
-}
-
-TreeComponent.prototype.hasChanged = Component.prototype.hasChanged;
diff --git a/src/components/tree/Tree.unit.js b/src/components/tree/Tree.unit.js
deleted file mode 100644
index f1c94e7812..0000000000
--- a/src/components/tree/Tree.unit.js
+++ /dev/null
@@ -1,207 +0,0 @@
-import assert from 'power-assert';
-import Harness from '../../../test/harness';
-import TreeComponent from './Tree';
-import {
-  comp1,
-  comp2,
-  comp3,
-  comp4
-} from './fixtures';
-import Webform from '../../Webform';
-import _ from 'lodash';
-import { Formio } from '../../Formio';
-
-describe('Tree Component', () => {
-  it('Should set and render values in readOnly mode', function(done) {
-    Harness.testCreate(TreeComponent, comp1).then((component) => {
-    component.setValue({
-      data: {
-        number: 111,
-      },
-      children: [{
-        data: {
-          number: 222,
-        },
-        children: [{
-          data: {
-            number: 333,
-          },
-          children: []
-        }]
-      }]
-    });
-
-    assert.equal(component.element.querySelectorAll('.tree__node-content').length, 3);
-    assert.equal(component.element.querySelectorAll('.editNode').length, 3);
-
-    component.options.readOnly = true;
-    component.redraw();
-
-    const valueContainers = component.element.querySelectorAll('.col-sm-2');
-
-    assert.equal(component.element.querySelectorAll('.tree__node-content').length, 3);
-    assert.equal(component.element.querySelectorAll('.editNode').length, 0);
-    assert.equal(valueContainers[0].innerHTML.trim(), '111');
-    assert.equal(valueContainers[1].innerHTML.trim(), '222');
-    assert.equal(valueContainers[2].innerHTML.trim(), '333');
-
-    done();
-    });
-  });
-  it('Should render tree and allow to save node with basic, layout and data component inside', function(done) {
-    Harness.testCreate(TreeComponent, comp2).then((component) => {
-      assert.equal(!!component.treeRoot.refs.content, true);
-      assert.equal(!!component.treeRoot.refs.cancelNode, true);
-      assert.equal(!!component.treeRoot.refs.saveNode, true);
-      assert.equal(!!component.treeRoot.refs.addChild, false);
-      assert.equal(!!component.treeRoot.refs.editNode, false);
-      assert.equal(!!component.treeRoot.refs.removeNode, false);
-
-      const value = {
-        data: {
-          dataGrid: [{ textField: 'data grid 1st row text' }],
-          number: 3333,
-          select: '',
-          textArea: 'text area text',
-        },
-        children: []
-      };
-
-      const inputFields = {
-        'data[tree][dataGrid][0][textField]': value.data.dataGrid[0].textField,
-        'data[tree][number]':value.data.number,
-        'data[tree][textArea]': value.data.textArea
-      };
-
-      const inputEvent = new Event('input');
-      _.each(inputFields, (value, fieldName)=> {
-        const input = component.element.querySelector(`[name="${fieldName}"]`);
-        input.value = value;
-        input.dispatchEvent(inputEvent);
-      });
-
-      setTimeout(() => {
-        const clickEvent = new Event('click');
-        component.treeRoot.refs.saveNode.dispatchEvent(clickEvent);
-        setTimeout(() => {
-          assert.equal(!!component.treeRoot.refs.content, true);
-          assert.equal(!!component.treeRoot.refs.cancelNode, false);
-          assert.equal(!!component.treeRoot.refs.saveNode, false);
-          assert.equal(!!component.treeRoot.refs.addChild, true);
-          assert.equal(!!component.treeRoot.refs.editNode, true);
-          assert.equal(!!component.treeRoot.refs.removeNode, true);
-          assert.deepEqual(component.getValue(), value, 'setvalue');
-
-          done();
-        });
-      });
-    });
-  });
-  it('Should keep the node of parent tree opened when saving the node of a child tree', function(done) {
-    Harness.testCreate(TreeComponent, comp3).then((component) => {
-      assert.equal(!!component.treeRoot.refs.cancelNode, true);
-      assert.equal(!!component.treeRoot.refs.saveNode, true);
-      assert.equal(!!component.treeRoot.refs.editNode, false);
-
-      const clickEvent = new Event('click');
-      const childSaveNodeBtn = component.element.querySelector('.formio-component-tree1').querySelector('[ref="saveNode"]');
-
-      childSaveNodeBtn.dispatchEvent(clickEvent);
-
-      setTimeout(() => {
-        assert.equal(!!component.treeRoot.refs.cancelNode, true);
-        assert.equal(!!component.treeRoot.refs.saveNode, true);
-        assert.equal(!!component.treeRoot.refs.editNode, false);
-
-        const childTree = component.element.querySelector('.formio-component-tree1');
-        const saveBtn = childTree.querySelector('[ref="saveNode"]');
-        const editBtn = childTree.querySelector('[ref="editNode"]');
-
-        assert.equal(!!saveBtn, false);
-        assert.equal(!!editBtn, true);
-
-        done();
-      });
-    });
-  });
-  it('Should allow to open node of a child tree for editing after opening parent tree node', function(done) {
-    Harness.testCreate(TreeComponent, comp3).then((component) => {
-      assert.equal(!!component.treeRoot.refs.cancelNode, true, 'Should show cancel btn for parent tree');
-      assert.equal(!!component.treeRoot.refs.saveNode, true, 'Should show save btn for parent tree');
-      assert.equal(!!component.treeRoot.refs.editNode, false, 'Should not show edit btn for parent node in editing tree');
-
-      assert.equal(!!component.treeRoot.components[0].treeRoot.refs.cancelNode, true, 'Should show cancel btn for child tree');
-      assert.equal(!!component.treeRoot.components[0].treeRoot.refs.saveNode, true, 'Should show save btn for child tree');
-      assert.equal(!!component.treeRoot.components[0].treeRoot.refs.editNode, false, 'Should not show edit btn for child tree in editing tree');
-
-      const clickEvent = new Event('click');
-      const childSaveNodeBtn = component.treeRoot.components[0].treeRoot.refs.saveNode;
-      const parentSaveNodeBtn = component.treeRoot.refs.saveNode;
-      childSaveNodeBtn.dispatchEvent(clickEvent);
-      parentSaveNodeBtn.dispatchEvent(clickEvent);
-
-      setTimeout(() => {
-        assert.equal(!!component.treeRoot.refs.cancelNode, false, 'Should not show cancel btn for parent tree');
-        assert.equal(!!component.treeRoot.refs.saveNode, false, 'Should not show save btn for parent tree');
-        assert.equal(!!component.treeRoot.refs.editNode, true, 'Should show edit btn for parent tree');
-
-        const parentEditNodeBtn = component.treeRoot.refs.editNode;
-
-        parentEditNodeBtn.dispatchEvent(clickEvent);
-
-        setTimeout(() => {
-          assert.equal(!!component.treeRoot.components[0].treeRoot.refs.saveNode, false, 'Should not show save btn for child tree');
-          assert.equal(!!component.treeRoot.components[0].treeRoot.refs.editNode, true, 'Should show edit btn for child tree');
-
-          const childEditNodeBtn = component.treeRoot.components[0].treeRoot.refs.editNode;
-
-          childEditNodeBtn.dispatchEvent(clickEvent);
-
-          assert.equal(component.treeRoot.components[0].treeRoot.editing, true, 'Should set editing mode for child tree');
-          assert.equal(!!component.treeRoot.components[0].treeRoot.refs.saveNode, true, 'Should show save btn for child tree');
-
-          done();
-        });
-      });
-    });
-  });
-
-  it('Should stop the submission if component didn\'t saved and has required fields', (done) => {
-    const formElement = document.createElement('div');
-    const form = new Webform(formElement);
-    form.setForm(comp4).then(() => {
-      const submitButton = form.getComponent(['submit']);
-      assert.equal(submitButton.disabled, true, 'Submit button should being disabled');
-      const tree = form.getComponent(['tree']);
-      const textField = tree.getComponents()[0].getComponent(['textField']);
-      textField.setValue('123');
-
-      setTimeout(() => {
-        assert.equal(submitButton.disabled, true, 'Submit button should being disabled');
-        tree.saveNode(tree.treeRoot);
-
-        setTimeout(() => {
-          assert.equal(submitButton.disabled, false, 'Submit button should being disabled');
-          done();
-        }, 300);
-      }, 300);
-    }).catch(done);
-  });
-
-  it('Should work with empty data and no defaults', (done) => {
-    const formElement = document.createElement('div');
-    Formio.createForm(formElement, {
-      type: 'form',
-      components: [comp1],
-      display: 'form',
-    }, { noDefaults: true })
-      .then((form) => {
-        setTimeout(() => {
-          const tree = form.getComponent(['tree']);
-          assert.equal(tree.treeRoot.new, true);
-          done();
-        }, 300);
-      })
-      .catch(done);
-  });
-});
diff --git a/src/components/tree/editForm/Tree.edit.data.js b/src/components/tree/editForm/Tree.edit.data.js
deleted file mode 100644
index 296b37f4b5..0000000000
--- a/src/components/tree/editForm/Tree.edit.data.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default [
-  {
-    key: 'multiple',
-    ignore: true
-  },
-];
-/* eslint-enable max-len */
diff --git a/src/components/tree/editForm/Tree.edit.display.js b/src/components/tree/editForm/Tree.edit.display.js
deleted file mode 100644
index 5c563e9853..0000000000
--- a/src/components/tree/editForm/Tree.edit.display.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default [
-    {
-      key: 'treeInfo',
-      weight: -10,
-      type: 'htmlelement',
-      tag: 'div',
-      className: 'alert alert-danger',
-      content: 'This component has been deprecated and will be removed in a future version of Formio.js.',
-    }
-];
diff --git a/src/components/tree/fixtures/comp1.js b/src/components/tree/fixtures/comp1.js
deleted file mode 100644
index 9e698b57be..0000000000
--- a/src/components/tree/fixtures/comp1.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-  'label': 'Tree',
-  'tableView': true,
-  'calculateServer': false,
-  'key': 'tree',
-  'type': 'tree',
-  'input': true,
-  'tree': true,
-  'components': [{
-    'label': 'Number',
-    'mask': false,
-    'spellcheck': true,
-    'tableView': false,
-    'delimiter': false,
-    'requireDecimal': false,
-    'inputFormat': 'plain',
-    'calculateServer': false,
-    'key': 'number',
-    'type': 'number',
-    'input': true
-  }]
-};
-
diff --git a/src/components/tree/fixtures/comp2.js b/src/components/tree/fixtures/comp2.js
deleted file mode 100644
index d7b1f9b358..0000000000
--- a/src/components/tree/fixtures/comp2.js
+++ /dev/null
@@ -1,80 +0,0 @@
-export default {
-  'label': 'Tree',
-  'tableView': false,
-  'key': 'tree',
-  'type': 'tree',
-  'input': true,
-  'tree': true,
-  'components': [{
-    'label': 'Text Area',
-    'autoExpand': false,
-    'tableView': true,
-    'key': 'textArea',
-    'type': 'textarea',
-    'input': true
-  }, {
-    'label': 'Select',
-    'widget': 'choicesjs',
-    'tableView': true,
-    'data': {
-      'values': [{
-        'label': 'a',
-        'value': 'a'
-      }, {
-        'label': 'b',
-        'value': 'b'
-      }, {
-        'label': 'c',
-        'value': 'c'
-      }]
-    },
-    'selectThreshold': 0.3,
-    'validate': {
-      'onlyAvailableItems': false
-    },
-    'key': 'select',
-    'type': 'select',
-    'indexeddb': {
-      'filter': {}
-    },
-    'input': true
-  }, {
-    'collapsible': false,
-    'key': 'panel',
-    'type': 'panel',
-    'label': 'Panel',
-    'input': false,
-    'tableView': false,
-    'components': [{
-      'label': 'Number',
-      'mask': false,
-      'spellcheck': true,
-      'tableView': false,
-      'delimiter': false,
-      'requireDecimal': false,
-      'inputFormat': 'plain',
-      'key': 'number',
-      'type': 'number',
-      'input': true
-    }]
-  }, {
-    'label': 'Data Grid',
-    'reorder': false,
-    'addAnotherPosition': 'bottom',
-    'layoutFixed': false,
-    'enableRowGroups': false,
-    'initEmpty': false,
-    'tableView': false,
-    'defaultValue': [{}],
-    'key': 'dataGrid',
-    'type': 'datagrid',
-    'input': true,
-    'components': [{
-      'label': 'Text Field',
-      'tableView': true,
-      'key': 'textField',
-      'type': 'textfield',
-      'input': true
-    }]
-  }]
-};
diff --git a/src/components/tree/fixtures/comp3.js b/src/components/tree/fixtures/comp3.js
deleted file mode 100644
index 922cdb4503..0000000000
--- a/src/components/tree/fixtures/comp3.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-  'label': 'Tree',
-  'tableView': false,
-  'key': 'tree',
-  'type': 'tree',
-  'input': true,
-  'tree': true,
-  'components': [{
-    'label': 'Tree',
-    'tableView': false,
-    'key': 'tree1',
-    'type': 'tree',
-    'input': true,
-    'tree': true,
-    'components': [{
-      'label': 'Text Field',
-      'tableView': true,
-      'key': 'textField',
-      'type': 'textfield',
-      'input': true
-    }]
-  }]
-};
diff --git a/src/components/tree/fixtures/comp4.js b/src/components/tree/fixtures/comp4.js
deleted file mode 100644
index 46ad419ca9..0000000000
--- a/src/components/tree/fixtures/comp4.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export default {
-  type: 'form',
-  owner: null,
-  components: [
-    {
-      label: 'Tree',
-      tableView: false,
-      key: 'tree',
-      type: 'tree',
-      input: true,
-      tree: true,
-      components: [
-        {
-          title: 'Required validation',
-          collapsible: false,
-          key: 'panel',
-          type: 'panel',
-          label: 'Panel',
-          input: false,
-          tableView: false,
-          components: [
-            {
-              label: 'Text Field',
-              tableView: true,
-              validate: {
-                required: true,
-              },
-              key: 'textField',
-              type: 'textfield',
-              input: true,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      type: 'button',
-      label: 'Submit',
-      key: 'submit',
-      disableOnInvalid: true,
-      input: true,
-      tableView: false,
-    },
-  ],
-};
diff --git a/src/components/tree/fixtures/index.js b/src/components/tree/fixtures/index.js
deleted file mode 100644
index f1a58d4b03..0000000000
--- a/src/components/tree/fixtures/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import comp1 from './comp1';
-import comp2 from './comp2';
-import comp3 from './comp3';
-import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
diff --git a/src/sass/formio.form.scss b/src/sass/formio.form.scss
index dea8b35bcb..8070768fa1 100644
--- a/src/sass/formio.form.scss
+++ b/src/sass/formio.form.scss
@@ -859,10 +859,6 @@ body.formio-dialog-open {
   overflow-wrap: break-word;
 }
 
-.tree-listgroup {
-  flex-direction: row;
-}
-
 .formio-component-submit button[disabled]+.has-error {
   display: block;
 }
@@ -1105,23 +1101,6 @@ body.formio-dialog-open {
   color: inherit;
 }
 
-.tree {
-  &__level {
-    &_even {
-      background-color: #f6f6f6;
-    }
-  }
-
-  &__node-content {
-    margin-bottom: 10px;
-    overflow-wrap: break-word;
-  }
-
-  &__node-children {
-    margin: 0;
-  }
-}
-
 .formio-select-autocomplete-input {
   /* we can't use display: none or visibility: hidden because autocomplete won't work on hidden field */
   opacity: 0;
diff --git a/test/forms/helpers/testBasicComponentSettings/form.js b/test/forms/helpers/testBasicComponentSettings/form.js
index 7043dac5b6..060f36b979 100644
--- a/test/forms/helpers/testBasicComponentSettings/form.js
+++ b/test/forms/helpers/testBasicComponentSettings/form.js
@@ -652,20 +652,6 @@ export default {
         "type": "textfield",
         "input": true
       }]
-    }, {
-      "label": "Tree",
-      "tableView": false,
-      "key": "tree",
-      "type": "tree",
-      "input": true,
-      "tree": true,
-      "components": [{
-        "label": "Text Field Tree",
-        "tableView": true,
-        "key": "textFieldTree",
-        "type": "textfield",
-        "input": true
-      }]
     }, {
       "label": "Upload",
       "tableView": false,