Visualise a satisfying feeling of progression in your app with the help of beautiful-skill-tree.

What is beautiful-skill-tree? 🌳

beautiful-skill-tree came about as as result of my love for video games, web development and fitness. BST was never intended to be a standalone package, but a feature in a fitness progress app. After discovering that there were no easy-to-use libraries that empower developers to create their own versatile skill trees, BST ended up manifesting as exactly that.

My key motivation for beautiful-skill-tree is to create a package that can be used across a series of browsers and devices, with interactions that feel intuitive, sleek, and gratifying.

While developer experience was a major consideration when creating BST, I wanted usability to be BST's key measurement for success. Thanks to tools like Browserstack, BST has been tested and validated across a series of operating systems, browsers and devices. And thanks to my friends, family (incl. my grandmother), coworkers, and strangers in ensuring that it has been tested across a diverse range of people.

What can I do with beautiful-skill-tree? 🌴

Currently, the most comprehensive use of beautiful-skill-tree in the wild is Calisthenics Skills.

Setting up BST in your own application is straightforward, with the official README guiding you through the key features in great detail.

Once you've imported the components and configured the SkillTree, all that's left is to supply your own data. For those, like myself, who are TypeScript nerds, BST exports types to ensure that your data adheres to the structure required. If usability is my bottom-line measure for success, developer experience places a close second.

Here's what beautiful-skill-tree offers you:

  • πŸ“ˆ A way to visualise user progression in your application
  • πŸ–₯️ Responsive, cross-browser compatible trees
  • πŸ•ΈοΈ Silky smooth animations
  • ⌨️ Keyboard navigable trees
  • πŸ‚ Collapsible trees
  • 🎨 Custom theming
  • πŸ’Ύ Saving to localstorage out-of-the-box
  • ✍🏿 Option to implement custom saving
  • ❓ Optional nodes
  • πŸ“Š Access to your tree's data and methods

What can I expect beyond v1? πŸŽ„

  • Custom pre-requisites to to unlock/select skills
  • Searching/Filtering through trees and skills
  • Features as a result of insight received from feedback

In the future, I'll talk about some of the challenges I've come across during the creation and development of BST, and the User Experience lessons I've learnt along the way. Stay tuned!

And a big thanks to everyone that has used beautiful-skill-tree in the past!


Have you used beautiful-skill-tree in your own project? You can leave anonymous feedback and feature suggestions here. You can try it out here

If you're interested in keeping up-to-date with any of my projects you can find me in the following places: