Noodel.js, a beautiful, intuitive user interface for content trees

Jonny Lu — Thu, 24 Sep 2020 20:29:10 +0000

Hello DEV community!

I'm here to share my project, Noodel, a user interface for presenting hierarchical content. It is based on a 4-way scroll-snap mechanism that allows you to navigate by just moving up, down, left, and right.

Demo

The best way to get how it works is to 👉 see it in action here 👈. Noodel eats its own dog food (is there a better expression?) by rendering its own docs using itself 😉

Why?

Long story short, this is the result of an exploration into a better way to view and navigate complex nested content (like software documentation). Eventually I realized this pattern can be generalized across all sorts of use cases, and so this library was born.

What you can use it for

Any content that is, or can be, arranged in a tree structure, like documentation, blogs, wikis, mindmaps, etc. You can even use it to create a whole single-page site or app that can be navigated with just 4 arrow keys!

Open sourced for the web

Noodel is currently released as Noodel.js, a free and open source JavaScript component for use in web projects. While it has potential to be used in other contexts, the JS library is what I’m focusing on at the moment.

zlu883 / noodel-js

Feedback and contributions are most welcome!