Holograph

Holograph is a visual coding tool built on tldraw.

Play with it live

holograph.so

Run it

npm run dev

How it works

Holograph is based on Propagator Networks. Propagators (rectangles) listen to changing input values (circles), run code, and update other values (other circles).

To use it

• Put your variables in circles
• Put your JavaScript in rectangles (you can write a return or not)
• Connect inputs by drawing arrows from circles to rectangles with text that matches the code's variables
• Connect output by drawing arrows from rectangles to circles.

Download and import the tutorial to learn more. Also, click the explore button in the top-right of the site to download examples.

Fun stuff to try

There's a lot of awesome stuff that can be made with these (maybe everything?).

• A timer!
• A conditional and switch!
• A new simulated universe!