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.
Feedback and contributions are most welcome!
Top comments (11)
Nice, it's possible to add content from json?
You can construct the content model based on plain JavaScript objects so it should be relatively simple to parse it from json. Although the content itself will need to be defined in HTML strings (if you want to build complex content).
This look wow ✌
Congratulations .... I will use your projects for something that I have in mind
Thank you, I hope you like it!
If you make something cool with Noodel and want it to be featured with the project, please let me know 😃
Woah that looks amazing! Where does one get such talent?
Thank you for your kind words 😊
Really love it! Works really smooth 😄
Thank you! Trying to optimize performance for this is really quite tricky, it's still a work in progress.
looks really good.
Thank you Prabhu!