Working with components

Components are the building blocks of toddle applications. Components let you reuse generic parts of your application like a Navigation bar or a Popup. Components are also a great way to break large applications down into smaller more manageable building blocks.

Components can render elements on a page, store data in variables, call APIs, and so on. You can think of them as tiny web applications on their own.

Components in toddle encapsulate their data. This means that the variables and APIs of one component are not accessible by other components. Initially this can seem unnecessarily restrictive, but it is a critical property that lets you reason about your application as the number of components grow.

Components are composable

Components in toddle can be composed together to form more complex components which then in turn can be composed into full applications.

An application like the toddle editor contains dozens of API calls, and thousands of variables. Trying to keep all that information in your head at one time would be impossible. Using components, we can split the editor into hundreds of smaller components, each responsible for a small part or the application.

Components can send data to other components and pages through Attributes and Events.

Creating a new component

There are two ways you can create a new component. You can create a new component from the project sidebar by clicking "Create new" followed by "New component".

The other option is to right click an element inside the element tree and choose extract as component.

Components in toddle follow the naming restrictions of web-components. A component must have at least two parts to their name joined together by a hyphen "-", Component names cannot contain any special characters.

You can read more about how to use components in toddle in Component elements

Learn more about components: