DEV Community


Prototyped tree view and property inspector UI

Jeff Lindsay
Indie maker of many things. Helped pioneer SHDH, webhooks, Hacker Dojo, TIGSource, OpenStack, JWT, Twilio, Docker, Dokku, all incidental. Follow your curiosity
・2 min read

I did a poll on Twitter to see what project on my backlog to take on yesterday. Surprisingly almost nobody was interested in a Go to Objective-C bridge. I guess I'm the only one with plans for what I can do with that. Most popular was working on my Go WASM web framework project, but at the last minute that was beat out by "Prototype UI for new project".

It may not seem like it yet, but all these projects are related and part of a bigger project. There's a specific reason I want a frontend Go web framework more than just cutting through all the baggage that Javascript has built up. However, I need to keep making progress on the critical path of my larger project, so in the meantime I figured I'd prototype the UI using off the shelf jQuery libraries.

The goal was to recreate this aspect of Unity where you have a project tree with arbitrary nodes that you can make. Those nodes then have behaviors or components attached to them, which you can interact with via an inspector view. This can be customized to not only provide a way to edit data associated with a component, but visualize and interact. And of course these components might reference other objects, which you can drag and drop into place.

The key components here are a tree view and a property editor. Luckily there are some alright jQuery libraries for each of these. So I started throwing them together. I used jsTree and jqPropertyGrid to make this.

It's fun to not worry about architecture and just throw messy code together like the good old days. In about 2.5 hours I had this app where you have an empty tree you can create nodes for. You can arrange and nest nodes with drag and drop. You can click a node and see properties on it. Editing those properties persist between selecting nodes, as well as between page reloads. And then there is a rough concept of components you can add to a node to add more properties.

It's kind of a fun data management toy. It also is a great start. I will not require many more features before I can start defining a view data model that can eventually come from a backend. Eventually I can recreate this frontend in Go out of components.

Discussion (0)