I was going through some old folders on my laptop and found some old code from my old React Training teaching days for visualizing how component trees in React work, and turned it into its own standalone web app!

Here’s the app, if you’re not in the mood to read more.

Back when I was teaching React full time, one of my fellow teachers Brad made a tool that let you show a tree (like a data structure tree), and we would use it in our lectures to explain what prop drilling and context were, and how components could work together in React apps.

I loved using the tool, and thought about some use cases for it when I found the old code, so I spruced it up a bit. It has some keyboard commands for usage:

• Shift + ▲ ▼ ► ◄ or HKJL - Move selection between Nodes
• Shift + 1-5 - Create 1-5 Nodes
• Shift + Backspace - Delete selected Node
• Shift + P - Toggle Pulse
• Shift + F - Toggle Feature
• Shift + D - Toggle Drilling arrow
• Shift + I - Toggle IDs
• Shift + T - Add Tag to Node
• Shift + H - Toggle Hide Node
• Shift + S - Save image of Tree

Most usefully (to me) is the ability to quickly make images for sharing them!

The original code had each node maintain its own internal state and it was kind of recursive in how they rendered (see exact lines here). In retrospect, I probably should have changed it to be rendered with a big state tree at the top and serialized in the URL or local storage (kind of like what I did with PocketCal), but eh, it works!

• The tool
• The repo
• The tool who made the repo (heheheheh)

See ya next time!