Designable Code

Zing Studio unifies visual design and code with an approach we call designable code. Coding and visual design aren't separate tasks, they're just different ways of editing the same prototype!

Build with elements

In Zing Studio you work with rich, composable blocks called elements.

Elements aren't just visual templates, but fully functional components that spring to life with interactions, effects, animations and behaviors.

Zing Studio includes elements for basics like text and shapes, native controls like buttons and sliders, and even structural components like tab views and navigation.

Best of all, you can create your own elements and use them in design and code, just like ours!

Code is not a dirty word

Code has never been as beautiful or as easy to understand. If you haven't writen code before, we think you'll find Zing a great place to start.

But don't let its beauty fool you, beneath the surface is a modern, powerful language which can express a UI and the logic behind it.

Rectangle {
    color: #white

    Text {
        anchor center
        text: "Hello Zing!"
    }
}

Up for the job

With Zing Studio we've designed a bespoke language, code editor and runtime that work together to make powerful prototyping accessible to everyone.

Property expressions

Connect elements together using property expressions. Expressions are reactive, so they update automatically whenever their value changes.
High performance graphics

Zing's GPU accelerated canvas allows it to render without compromise. From crisp, realtime transforms to beautiful saturated blurs and transitions, it has you covered.
Immediate feedback

Errors are displayed right alongside your code as you type, making finding and fixing any problems an absolute breeze.