Introduction
The world of No Code and Low Code is growing immensely. If you’re new to this world, I suggest reading this article from mendix, as it gives a great overview. If you are exploring already but feeling a bit lost with the different tools out there, consider reading my blog post that I wrote a couple of months back in NoCodeDevs.
I’ve explored and used tools like Glide, Softr, Zapier at a professional level and shared quite a few articles in the past. In this post, I’m introducing you to toddle, a low code front end tool.
Recently, I started to explore toddle, a low code front end tool. One of the projects that I’m working on is a SaaS product that requires intuitive screens and needs to be visually appealing. I wanted more control of the User Interface but also wanted to build it quickly as we believe in shipping fast to get real feedback from users.
I stumbled upon toddle and found it to be a natural, probably because I come from a coding background. I started to dig deep and found it to be the perfect fit for my use case. It’s a pure play front end tool, we need to use separate tools for the back end. Xano and Supabase are a few popular choices for back end where toddle is the front end.
This post is not meant to be a tutorial on how to use toddle, rather sharing my first view on the tool along with a simple user interface invoking a public API.
My brief experience with Toddle
It’s been more than a month using toddle, and here are a few aspects that stood out to me.
It has a clutter free interface
What I mean by that is, the number of key concepts is ideal for anyone to comprehend easily. It starts with an app or a project - which resides in a branch - then comes a page - which has elements - that get their values using formula - followed by variables and APIs - that can be triggered by events and workflows. In a nutshell, these are the fundamentals of toddle.
It’s not a lot neither too less. One can build anything from a simple to complex app using these.
The concept of branches and revisions
Whenever you create a project, toddle creates a default branch for you. I find it very useful. Since I’m used to git and associated features, I find it very refreshing when I see the same here.
If you create a branch for smaller requirements, it becomes easy to roll back as well as merge. Thus development as a team in real time is very well possible. It may not be as robust as git in terms of merging & other functionalities but I guess they are traveling in that direction only.
It’s powerful at the same time flexible
Why I say powerful is because it has all the components that’s required to build an app, be it mobile or web. From a static page perspective, almost all HTML elements are available, the entire aspect of styling (CSS) is available as a visual editor. To make it functional, there are formula, attributes, workflows, events.
Why I say flexible is because, I get to decide how an element should look like, where it should be placed, what should trigger an action, how to define the value of an element, when something should be shown and hidden and much more.
Most importantly, super helpful toddlers 😂 on their discord
I’m not quite sure whether I can address toddle developers as toddlers 😨, but there a bunch of helpful people on their discord. A great community is one of my primary items to decide whether I can use the tool or not.
Since these tools are relatively new when compared to languages like Java, Python, etc., it becomes very important that the community is active and knowledgeable. Else, navigating becomes difficult and development time slows down.
💡
As I always mention, whenever you join a community make it a point to contribute with whatever knowledge you have. It’ll definitely help someone.
What are we building today?
The first thing that I did when I started with toddle was to watch and in parallel build the apps from “the first week in toddle”. Andreas, one of the founders of toddle takes us through a set of 5 different projects, introducing the basics and building on top of those.
Taking the same approach, I thought of building something similar as Andreas’ Day #1 😁 video, of course I’m not planning to write a blog each day 😉
Okay, so what am I building? You’ve guessed from the title of the post that it’s related to food 🍽, am I right?
Spoonacular is otherwise called as the food API. I’ve used it in the past as part of a python program PDM. Since my intention was to spin something real quick, I decided to use Spoonacular API’s and build something cool as I’m already quite familiar with the API.
Shall we start to cook? 🍳
Camera, action, let’s roll
Let’s split it into three parts, one related to toddle, the other related to Spoonacular and the third integrating both.
Part 1 : toddle
Let’s perform the following to build a simple page in toddle.
Sign up with toddle if you do not have an account, else login. There is an open source plan which is free. Your projects can be cloned as the name itself suggests that 😉.
Once you sign up/login you should see a screen with an option to create an app or create a package. Let’s choose create an app
- As a next step, we need to select whether it is a public app or a private app. In case of the free plan, there is no option of private apps. So, let’s just stick with public. Below this selection, there will be templates to choose from. And let’s choose a blank template.
Voila, you should see a default home page like so 👇
Why don’t we start with a clean slate? Let’s just delete the entire content except for the top most div
- I just added a couple of HTML elements and applied minimum styles. In toddle, just right click on an element (in this case the top most div) and keep adding the elements you need.
💡
If HTML/CSS is completely new to you, I’d highly recommend to learn a few basic concepts and then come back here. There are tons of YouTube videos and tutorials, choose something that suits your style. You’ll then find a world of difference!
Now that we have a basic Part 1 ready, let’s move on to Spoonacular.
Part 2 : Spoonacular
Let’s spend some time on Spoonacular. Follow the steps below to get going:
Sign up or Login with Spoonacular, depending on whether you do not have/have an account.
Once you sign up/login, you will be taken to your dashboard. Click on Generate New API Key. Click on Show/Hide key when you need to copy it and use it in toddle while invoking the API.
Let’s take the first API, Search Recipes. It has a lot, really a lot of parameters that can be used. You can read through the page to see the inputs it can take and what comes back as response. Let’s probably pass a few inputs.
Here’s a sample Request/Response for the above API
If you want to play around with API, use a tool like Postman and try with different input parameters, provide different values to see how the response changes. Their documentation is pretty exhaustive. Do check it out!
This concludes Part 2 of our setup. Let’s move on!
Part 3 : Integrate toddle with Spoonacular API
It’s quite simple to set up an API in toddle. Click outside the page, and on your right you should see a pane with headers namely variables, APIs, Formulas, Workflows and Lifecycle. Follow the below steps to complete the setup:
Click on APIs and the pane on the left will be shown as below, with no values of course 😂
I have the values as below:
Name: search-recipes
GET url: https://api.spoonacular.com/recipes/complexSearch
Queries:
cuisine: Italian
number: 2
type: soup
x-api-key: « My generated API key »
Rest remains as is. If auto-fetch (beside the url) is true, you should automatically see the response as below.
💡
The query parameter number denotes the number of recipes to be returned and type denotes the meal types. Here are the
possible values that the API supports.
- Now that we are able to view the response successfully, we define the event that should invoke this API. Click on button element on left pane, on the right pane choose Events → click. Click on the + button and choose Call search-recipes. When the user clicks on the Go button, the API is called and the response is returned.
We now need to display the response on the interface. Let’s add a card element, add a bit of styling and display few attributes from the response.
The key point here are the formula set for image and the heading. We need to set the first array element’s image in the src attribute of the image element. Click on 0 and choose image.
Below is how it looks like 👇
Likewise, for the heading choose the title attribute from the result.
Cool, isn’t it? Let me try changing a few options in the API’s query parameters and see what happens.
I now gave cuisine as German and type as dessert. Here’s the output:
- Time for some Chinese main course
Wow, this is fun! Make sure to turn off “Auto fetch” so that the API is invoked only on click of Go button. Let’s now publish it!
- Click on publish on the bottom band. Give an appropriate comment and then hit publish. Here’s how mine looks like 👇
As a final step I edited the project with the following details
Conclusion
In this post, I shared my views on toddle with the brief usage I’ve had. I also built a simple app that invokes an API from Spoonacular and displays relevant content on screen.
If you would like to see it working, here’s the published link. Since it’s a public project feel free to clone and play around with it 🤩
I have big plans using toddle 🤐, so anticipate more blog posts from me ✨ as I just scratched the surface here.
I hope you found this post useful. Do share your feedback, suggestions or your experience building with low code tools.
Have a project idea, need help building MVPs, send me a DM here.
So long!
