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
Components can also be large and complex like the HelpCenter in the toddle editor shown below.
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
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
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
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
We can use a slot for specifying where the content of the accordion should be.
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
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 "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.