Nodl - The interactive playground for digital art creation. LF Beta Testers!

Showcase
, , ,
1

Hello everyone,

For the past year, I have been working on this idea: making real-time digital art accessible to everyone.

The Problem

If you have ever wondered how festival visuals are made, or how this show you went had this giant screen and thought it looked cool, you probably stumbled upon software like TouchDesigner.
It is powerful, but the learning curve is steep and the UI can be intimidating. On the other hand, content creators who just need a cool background, a transition, or a video loop for their social media are forced to open heavy software like After Effects or Cavalry.

There is a huge gap for amateurs and creators who just want to make cool visuals quickly, without the complexity.

The Solution: Nodl.dev

Nodl is a free, browser-based visual node editor for creating immersive, reactive 2D/3D experiences in real time. No installation required. It combines an intuitive node workflow, live visualization, and ready-to-use templates to let you build and export interactive visuals in seconds.

Tech Stack & Performance

We built this using Vue, Three.js, and Mediabunny. To make it smooth, we actually built an entire custom UI library for Three.js just to run the node editor at 60 FPS with real-time previews. We also handle our own MSDF rendering and support “Slug” text generation/rendering.

Key features you can try right now

  • Infinite Node Canvas: Press “TAB” or “B” to drop nodes and start connecting shapes, particles, and effects.

  • Real-Time Preview: Every single change is visualized instantly.

  • Community Marketplace: Publish your creations, earn XP, comment, or open someone else’s work inside your editor to remix it.

  • Deterministic Timeline: Animate values easily (e.g., rotating a cube from 0 to 360 degrees over 3 seconds).

  • Copy-Paste Sharing: Select your nodes, press CTRL+C, and paste them directly to a friend. Project sharing has never been this simple.

  • Live Collaboration: Powered by WebSockets with editor and viewer roles.

Current limitations

Since we are bootstrapping and do not have the budget to store large amounts of user data yet, we do not host your uploaded files on the cloud. If you import your own audio, images, or 3D models, they are saved locally in your browser and will need to be re-imported next session. However, we provide plenty of built-in assets directly in the app to get you started. (Note: Please use the web version, as the standalone desktop app is currently outdated).

We need your feedback!

The project is now stable enough for real use. You can generate 2D or 3D scenes, play with particles, and export your videos or screenshots.

It is completely free and you do not even need to create an account to try all the features. Go play with it, break it, and please tell us what you think!

Try it here: Nodl.dev

If you made something cool with our app, you can share us a screenshot or video !
You can also contact me on X at https://x.com/zippy_dev

Thanks for reading this !
Please share your thoughts below too !
^-^

5nodlendbanner
5nodlendbanner1920×1080 154 KB

Transparency: This post was remixed with AI in order to give a more accurate reading. Every idea is my own.

3 Likes
2

If you find any issues, you can either send it in the comment here, or use our public repository : GitHub - nodldevstudio-hub/nodl-issue-tracker: Track and post issues from https://nodl.dev · GitHub

Thanks guys ! ^-^

3

We spoke on discord, you should really write more about how you used slug, its super interesting.

4

Hello !

For Slug what’s interesting was that it was released on March 17th, 2026. Me and Manthrax talked about creating a javascript port. Which he then made into a library. So for this project I took Manthrax JavaScript port, which is well-made, ported it to TS (I also have a pure C# implementation for other projects).
The only change I made is to use Photopea’s “Typr” library, in order to parse fonts, because opentype is really nice, but it’s really big. Typr is only a 3 file no dependency library and works well for our use cases.
Slug is about 10x more expensive to render, compared to MSDF, but it didn’t make a difference in my testing of 1 Million glyphs, since I use instancing in both methods (per letter instancing), So for a whole wall of text it’s still 1 draw call (and a lot of triangles!).

(source: https://lup.lub.lu.se/luur/download?fileOId=9024911&func=downloadFile&recordOId=9024910&utm_source=chatgpt.com)

image
image924×536 61.8 KB

image
image994×543 59.7 KB

The link to read about the Slug owner and it’s reasons for making it public is here : A Decade of Slug - Eric Lengyel

For Nodl Text Rendering, it uses two methods, The first one is with MSDF, it powers the Node Editor in general. This is because after testing, MSDF seems to resist a little bit better than Slug at smaller font scales, which is mainly used in Node Editors (because of infinite zooming in both directions). So I kept MSDF for this part.

I did not have enough time to test my Slug port to ensure that it was either the algorithm that was “worse” or simply my way of implementing it. In theory, Slug would work better at smaller font scales. But, with ThreeJS for MSDF, I had to remove mipmaps, I had to tweak a lot the shader to make it perfect, so maybe I need to be experimenting more with Slug in general. :slight_smile:
TS-SLUG is available for free on npm too. GitHub - ExtraBinoss/ts-slug · GitHub

Regarding Nodl, it uses it’s own 2D UI renderer, it can switch seamlessly to Slug text. The + side with Slug is that you can generate font on the fly, so you don’t need to send a huge 2 mb+ image and json in order to render text correctly. It’s very Lightweight. Fonts in .sluggish format is around 300 kb.

We still use Slug in the node [Slug Text] which is using my TS-Slug library for rendering text.
This was crucial, as a node like [MSDF Text] would require us to generate the font on the fly. And I was not willing to use a WASM msdfgen for this. Also some fonts take around 40 seconds to generate if it’s Korean for example, meanwhile using Slug lets us generate korean fonts in under 3 seconds because it’s much more lightweight. For “normal fonts” and “EASCII” charsets, both MSDF and Slug are both pretty fast to generate, Slug wins in my tests for generating fonts, it’s really it’s real benefit.

To conclude, Slug was used in the renderer as a possible fallback (when I find a way to make it work great at smaller font scales), and also in a Text rendering node, [Slug Text], this is because Slug lets you generate fonts on the fly, without needing to wait several seconds and being an overall bad experience for the user.
MSDF is used for the UI text rendering currently, because it works better at smaller fonts, because I spent around 2 weeks tweaking it for my needs, in the end, it’s one of the best smaller scale rendering I have seen with that method.

Would love talking about it more !
^-^