Dynamic layout meets direct manipulation.

Subform is a visual tool for creating dynamic UI layouts. It replaces drawing a lot of pictures—or the endless tweak-reload-tweak cycle—with direct editing and immediate visual feedback.

Most UI design tools are focused on drawing pictures of screens. That's great for quickly exploring ideas, but it's easy to overlook real-world production constraints in the process.

The thing is, designing and building aren’t really discrete tasks. They’re both fundamental parts of an integrated product development process.

Our goal with Subform is to make a visual tool that embraces this reality, rather than trying to dance around it.

Designing and implementing dynamic UI layouts is an acute pain for both designers and engineers, so that's where we've started. Let us know what you think.

—Kevin & Ryan

Powerful layout: stacks, grids, and more.

Dynamic layout is complex—and the basic "pinning" constraints in visual tools only go so far. That's why Subform lets you create stacks and grids, specify percentages and fractional sizes, set aspect ratios, and size elements based on their children or available whitespace.

More about grids in Subform ➜ Why Subform's layout is different than Flexbox ➜

Thoughtful direct manipulation.

Subform helps you explore layouts at a higher level: easily rearranging stacks, moving within grids, and even changing element hierarchy.

You can always draw and manipulate text and boxes in a traditional manner. When you're ready, formalize them into a layout and make changes quickly—without pixel pushing.

More on Subform's direct manipulation features ➜

Export for a head-start on production.

Only so much design can happen in a visual tool—ideas must ultimately be tested and iterated in the production medium.

Subform makes it easy to export version-control-ready HTML/CSS, together with layout rules. Prototype in the production medium faster—or use the output as a starting scaffold for integrating new designs into production.

Short video demo on Subform's exporting features ➜

A runtime layout engine, if you need it.

Tired of translating layout to multiple platforms or fighting with CSS? Are you targeting a drawing surface like <canvas> or OpenGL that has no native layout? You can use Subform's performance optimized, GC-free layout engine directly within your app.

Check out the WebAssembly demo on Github ➜ Need iOS, Android, Unity, or other integrations? Contact us ➜