An angular.js module for tree/treeview.
2 people use it


Tree + AngularJS

Code licensed under MIT License.

This plugin allows you create tree(treeview) easily and you can focus on your data.


Work with modern browsers(Chrome/Firefox/Safari/IE9+).

  • The tree uses custom icons(pure css), and the icons depend on CSS3.
  • It's great if you use bootstap3. If not, set the box-sizing to border-box.

But you can custom the template or custom the icon style to avoid problems above.


install via bower

The package is registered to bower, so you can install via bower:

bower install cytree

install manually

  1. Download and include correct files in your webpage.(include dist/cy-tree.js and dist/cy-tree.css).
  2. Add dependency to your angular project.
  3. Use cyTree and treeData directives to generate tree/treeview.

<div class="cy-tree with-line" cy-tree='true' tree-data="treeData" tree-label-flag="name" tree-child-flag="list" debug-mode='true'></div>


  1. clone this project
  2. run command below and you can see demo at

npm install

bower install

grunt serve

Tree images:



You may run into the watch ENOSPC error due to Inotify Watches Limit. If so, run command echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

More demos are coming.

comments powered by Disqus
This page was last updated about 3 years ago.