Meet Toddle: the next open source web app builder

Usually, the posts I write are aimed at developers who control most, if not all, of the stack, but there is also a need to understand how low-code solutions can or should be used.

Toddle, which recently announced an open source effort, is one such low-code/no-code web application builder. It focuses on a component hierarchy for the frontend, with data inherited in the backend. (My first thought was that if Toddle produces “toddlers,” then Tiddlywiki, which has “toddlers,” deserves a word.)

Getting started with Toddle

After you sign up, Toddle starts onboarding right away, asking about your programming experience. In fact, it asks your role: product designer, no-code developer, or software developer. For the latter, it suggests: “You need a professional development environment to work with developers,” which can sometimes be true.

It provides you with a preparation video from a founder (Andreas Møller) that is short and informative while making it clear that there are example apps that I usually use to explore the functionality.

I like the two Get Started options because they reflect the way people naturally divide things up. Unfortunately, neither button worked and I had to start over – but that may just be an artifact of my aging Mac. Re-accessing worked fine.

Work on a sample project

The sample project it created for me was a live weather app that was already populated with the weather forecast for my area. I was impressed.

There wasn’t a very explicit definition of what kind of web apps Toddle likes to build, but I hinted earlier that it means frontend control with backend API support, and the weather app is a perfect example:

The left side is a component hierarchy with standard HTML, custom parts and things that are the result of Formulaswhich I will discuss later. The current view of the app is in the middle. I see a forward Button for testing and a publish Button for later.

The first thing I did was look at the Weather API call (and I could have started anywhere), and finally I ran it where he suggested, so the weather app is clearly using live data.

By clicking on the API button “Weather” on the right (the Data field), I could clearly see that this came from https://toddle.dev/_api/weather, which is probably some kind of protected API:

The next question is how do I extract the correct value from the API and insert it into the text field. It looks like in this example the value “broken clouds” was added to the cloud image.

When I clicked on the text box in the hierarchy, I could see where the text box formula was placed:

I could then access the formula:

And yes, I noticed the result was capitalized just to be sure. The first thing I saw was process connection fields, which are also present in Unreal Engine Blueprints, which are powerful enough to run Fortnite.

Before I get into the last part of this process, I would like to give a quick critique. Technically, you don’t need to be a programmer to use these process box flows (formulas). However, you need to think like a programmer. I would like to gently point out that if, like me, you find that the steps required to produce the result could be well represented in code or in that slightly longer diagram, you are already too far along to be saved – you are a developer. I am so sorry. You might as well start coding. Besides, this process is much more transparent, perfectly valid and if the customers like it, nothing further needs to be justified.

I had a little trouble figuring out how to get back to the data window with the APIs, but I’m doing this on a Macbook – of course, the bigger the screen, the easier it is to edit many visual elements. The help function showed me how to Data field:

It didn’t work with “Escape”, but it did work with a click outside the screen. I would have gotten there eventually. But you shouldn’t forget that this is more than a playpen; it’s a tool and you have to learn how to use it.

When I look at the data, I can see the path of the description key value:

(I’m in the UK, so the weather is changing as I speak.) I can see that the path of the result in the JSON behind the scenes is “response” / “data” / “current” / “weather” / “description”. This key is currently returning the value “cloudy”.

When I look at the weather box in the formula, I get:

For some reason I can’t expand the field itself, but I can scroll through the path parts and it says “weather” / “data” / “current” / “weather” / “description”, which is the path for the data (with “response” replaced by the API name “weather”).

I made a mistake in the editor, but I was able to go back a step using the controls below. By manipulating the API with a tool inside the block, I replaced the “description” part of the path with “main” and the “Clouds” value was immediately visible in the main app:

I found the editing process to make this simple change a little tricky, but otherwise straightforward. As I mentioned, this isn’t much different than using Blueprints in the Unreal Editor. Plus, it takes time to learn the tools.

Behind the scenes, Toddle has obviously created a random project page, as you can see from the long URL I use. It also stores some status information about my editing view:

I can test the app and I also see a “Publish” button. When I click that, I effectively check in my app:

And finally, I get a live app to look at, with the project name preserved in the URL, which you can visit as well.

I’m not in Lambeth but all the location APIs seem to be a bit inaccurate. Reloading fixed the problem.

Decide if Toddle is right for your team

To decide whether you want to use this development approach for yourself or with your team to build web apps, consider the following points:

• Make note of how Toddle Roll of its customers. Check if your team has visual developers and data experts and how these boundaries work within your team.
• Using this tool to create working prototypes will get you started right away, but if you want to go beyond that, you need to be clear about what you own and what services the platform provides. In this case, Toddle is clearly moving towards open source, which is a good thing.
• Make sure everyone has a nice big screen. Luckily, they are cheap and available in abundance.
• Make sure developers understand how to edit the formulas or pass them on to developer types.
• Find out where you can salvage work with old-fashioned code before you need it. This isn’t defeatist, it’s just making sure you know the limits where your growth and need for efficiency can exceed the limits of the tool.

David was a London-based professional software developer at Oracle Corp. and British Telecom and a consultant helping teams work more agilely. He wrote a book on UI design and has been writing technical articles ever since….

Read more from David Eastman