Components

The central building block in toddle is called a "component". Think of components as small parts of your entire project. Examples of components your might create in toddle: - Buttons - Cards - Layouts - Footers - etc. Components can be reused over and over and made as flexible as you like. They let you do everything from fetching data from APIs, to rendering elements on a page. Combine multiple components to build bigger and more complex apps.
💡
Using components is also a great way of working with software as you work in smaller and more manageable chunks. Using components is also a great way of working with software as you work in smaller and more manageable chunks.
Components can be small and simple like this icon below — an SVG file within a container (div).
Example of a small and simple component used within toddle

Example of a small and simple component used within toddle

Components can also be large and complex like the HelpCenter in the toddle editor shown below.
Example of a complex component used within toddle

Example of a complex component used within toddle

Components can also be used to break a page down into smaller manageable parts, like we do here on our home page shown below.
Example of a page being broken down into smaller chunks using components

Example of a page being broken down into smaller chunks using components

This makes working with large pages much simpler since you don’t have to scroll though all those elements when trying to find the part that you want to edit. Components can also be used to reuse styling and behaviour multiple places in your application, like with toddle's button components shown below.
Example of a reusable component with different states

Example of a reusable component with different states

Element tree

Every component contains an element tree which it will render on to the page where the component is placed. The component is responsible for when and how each element is rendered, as well how each element is styled.
Example of an element tree in toddle

Example of an element tree in toddle

Data fetching

Components can use APIs to fetch data to be displayed using the element tree or to send data to a backend.

State management

Components can use variables to store temporary information, known as state. This is useful for things like, keeping track of form data, or weather a modal should be displayed.

Composition

Components can nest other components inside their element tree, and pass data to their child components using attributes. They can also listen for events from child components just like they would for any button or input element.

Slots

Components can use a special type of element called a Slot to specify where the component's children should be rendered. Let's say we wanted to build an accordion component that lets us show/hide some content.
An example of an accordion component

An example of an accordion component

We can use a slot for specifying where the content of the accordion should be.
Slot element shown inserted into an Accordion component

Slot element shown inserted into an Accordion component

Any content added as a child of the accordion component will be shown in place of the slot.
Content displayed in the slot's place

Content displayed in the slot's place

Named slots

Slots can be named, which allows you to have multiple slots in different parts of your component. When adding children to a component with a slot you can choose which slot they should be placed into.

Version management

Branches lets everyone on your team edit their own version of the project. When you are done with the feature you are building, and have tested that it works, you can publish your changes to the “main” branch which is the version of your project your users will see. Your branch will keep track of all the changes you have done. This way multiple team members can make changes at the same time, as long as your changes are not conflicting. Each branch has its own domain where you can test it, and share it with your team before you are ready to publish.
💡
You cannot edit the main branch directly. You can only update the main branch through publishing. You cannot edit the main branch directly. You can only update the main branch through publishing.
Your live version of your app is only updated when you publish branches. While working in a branch your progress is saved automatically.
Create a new branch by clicking

Create a new branch by clicking "New branch" within your project

You can create and delete as many branches as you like per project.
💡
Create multiple branches and publish smaller updates — in this way mistakes are better avoided. Create multiple branches and publish smaller updates — in this way mistakes are better avoided.

Formulas

Formulas allows you to transform data. The data can be text from a database you want to modify or numbers you want multiply etc. Formulas consists of a set of nodes that form a tree-like structure as shown below.
A toddle formula that generates the string “I LOVE pizza”. First the strings “i love” and “PIZZA” are converted to uppercase and lowercase respectively, then they are concatenated with a space in between.

A toddle formula that generates the string “I LOVE pizza”. First the strings “i love” and “PIZZA” are converted to uppercase and lowercase respectively, then they are concatenated with a space in between.

Formulas can contain as many nodes as are needed. You can see the output of the formula in the output node furthest to the right. Each node in a formula can have 0 or more “inputs” and will produce exactly one output.
This formula node has 3 inputs, “HELLO”, a single space character and “WORLD” and will product the output “I LOVE pizza”.

This formula node has 3 inputs, “HELLO”, a single space character and “WORLD” and will product the output “I LOVE pizza”.

Some formula nodes can accept a varying number of arguments. In the example above The "CONCAT" formula node can accept any number of strings, and will concatenate them all together. Formulas will have access to different types of data depending on what data is available to the component. E.g. if a component has a variable called “Show modal” then that variable will be available to all formulas inside that component.

Workflows

Workflows allows you to specify a list of actions that should happen when a given event occurs.