Theta Editor: App Development Without Programming

📅 2023.09.25 - 👤 Borbély Viktor

The Theta editor app source: buildwiththeta.com

The Theta editor brings a new concept to mobile app creation. Let’s face it, many are reluctant because mobile development is a more specialized field than releasing a website. There are the increasingly strict restrictions of the App stores. Besides, if we just look at the process, it’s more complex. This was the executive pain point noticed by the Theta startup. They approached the increasingly popular Flutter development process from a different perspective.

I was lucky to personally talk about the product in a video call with one of the founders, Andrea Buttarelli, who shared some insider secrets.

What makes the Theta editor different?

The Theta editor allows designers and product managers to develop live Flutter applications without programming.

How does it work?

It has two basic modes of operation. Dynamic mode (Remote UI), when we just need to insert a short code into our application, and we’re done. From then on, we modify the appearance in the Theta editor, and we already see the result in the app.

The pre-downloaded Static code option allows us to copy and paste the generated code into the code. The big advantage of this is that we don’t tie ourselves to Theta (no lock-in). They emphasize this!

We find everything in one place, in the application.

At the beginning of the app, in a few initialization lines, we can specify our own code. We can also easily access this from the editor.

The API Key is easily accessible

After that, we need to place a 1-line (!) reference in the appropriate places in the Flutter mobile application, restart the app, and our component appears. Fantastic! The setup really takes 5 minutes.

Then we can fine-tune the appearance and functionality with numerous parameters. For example, what should happen on tap.

What the whole concept adds extra is the enforcement of Clean Code. The Flutter framework doesn’t force the separation of logic and appearance. Here, however, we have no other option. Which trains a beginner developer in good habits (Best Practice).

What I really liked about the Theta editor

Basically, we get the functions already well-known in Figma. Andrea admitted that this is intentional. “Why should we reinvent the wheel?”

At first, I was surprised that it was written as a MacOS app. After using it, I immediately felt the advantage of the native application: speed. It doesn’t freeze, doesn’t stutter.

The interface is the well-known, clean UI by Apple. It’s clear that the team is aware of the principles of simplicity. Although only a few features are available yet, they are well grouped and at hand.

The essential Dark and Light mode switcher 🙂 This is useful if we also work at night.

The editor separates styles and components. The owner also emphasizes in their blog that it was very important for him to be accessible to everyone (Accessibility). He spent a lot of time developing this part. This can be viewed in the Style Guide menu.

In the Tree List, we assemble the components. The Element contains the main widgets. It works with simple Drag-and-Drop.

After placing a component, you can set the position, size, style, alignments, blur, etc.

Both developers and designers understand the language. This is important, as they put great emphasis on enabling the two types of professionals to work together.

Tips and tricks in the Theta editor app

It’s possible to switch between Absolute and Auto Layout modes.

Switching between Layout modes in Dev mode

In Absolute layout mode, we can edit full screens, just as the basic ‘Social Card’ is prepared for us.

Auto Layout mode is especially useful for buttons, where sizing becomes responsive. Filling the width or height.

Responsive UIs can be displayed simultaneously or separately. We get an overview at once of what the final appearance will be.

Responsive UI views

Is Theta worth its price?

Well, with the free (Free plan), we can create 5 components. This may be enough for a very simple app prototype. In fact, this could even mean 5 screens! Basically, there’s no need to create every component in the Theta editor. A Flutter developer creates the screens intended to be final, and the Designer fine-tunes the questionable parts.

The cheapest paid version costs 12.5 USD per month. I feel this is affordable. The features are more than enough for an indie developer and a Designer/Project Manager pair. The Developer integrates, the Designer draws.

Fine-tuning! The Team subscription (50 USD) includes the A/B testing feature. A/B testing can be done with other methods, but integrated and with statistics, it’s still a good deal.

Definitely recommended to try! I’m looking forward to further developments from the team.

Was this interesting? Would you like to read more like this from me?

More articles on the Low-code / No-code topic:

If you would like your own company mobile app to help your company or employees’ lives, contact me with confidence. In a free, 30-minute consultation, we’ll discuss exactly what you need (Maybe not even an app?!).