Quilt is an open source library for split panes, tabs, and popout windows, built for applications that combine 3D viewports, canvases, charts, settings, and other visualization tools.
Over the last five years of building three.js tools, I kept running into the same problem: my projects would become more complex and eventually outgrow their UI. I’d keep stretching libraries like dat.GUI, lil-gui, or Tweakpane until I had dozens of collapsed folders and was spending more time figuring out where controls should go.
I wanted a flexible way to organize the application around those controls, with room for multiple viewports and different workflows. I figured I couldn’t be the only person running into this problem, so I built Quilt and wanted to share it with others facing the same challenge.
Much of its layout behavior is inspired by Blender, which I’ve always enjoyed for how easily its workspace adapts to different tasks. In Quilt, layouts can be exported and loaded as JSON, so you can save and share different workspace arrangements. Quilt supports vanilla JavaScript/TypeScript, React, and Electron, and your existing controls can live inside its panes.
I’ve benefited a lot from the three.js community over the years, and I hope this is useful to others building increasingly complicated tools.
I’d love to hear from others who have run into similar challenges as their projects have grown. How have you organized more complex interfaces, and what would you need from a library like Quilt to make it useful in your own projects?
If you try it out, I’d appreciate any feedback on the layout behavior, ease of setup, or anything that feels missing or awkward to use. Suggestions for features and examples you’d like to see are welcome too.
Many thanks for taking a look!
