Nested lists in Rich Text element - Custom vanilla JavaScript solution for Unordered & Ordered lists

While working on a big documentation project I’ve noticed that Webflow doesn’t provide an option to add nested Unordered/Ordered lists in Rich Text element via Webflow Editor:

So I’ve decided to implement it with vanilla JavaScript. I use ~ symbol as an indicator of depth level. Rich Text Editor will look something like this with this symbol:

After adding custom JavaScript code before </body> tag, the rendered page will look like this:

It’s really confusing native support for nested lists isn’t implemented, but this custom solution provides everything I needed. Hope it can help you too! Lmk if you encounter any bugs, etc.

Source code: Parser for nested Unordered & Ordered lists inside Rich Text element. Add this code before </body> in page settings. More info here: https://discourse.webflow.com/t/nested-lists-in-rich-text-element-custom-vanilla-javascript-solution-for-unordered-ordered-lists/242024/1 · GitHub

1 Like