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

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

zlu883 profile image Jonny Lu 惻1 min read

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.

GitHub logo zlu883 / noodel-js

User interface for responsive, dynamic content trees

Feedback and contributions are most welcome!

Posted on by:

zlu883 profile

Jonny Lu

@zlu883

Full stack developer with a front end focus. Creator of Noodel.js. Likes to think about how humans interact with computers (and video games).

Discussion

pic
Editor guide
 

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!