The "Layout" tab (hotkey Q) lets you quickly see the elements in your page or component. You can select an element by clicking it. There are three types of elements you can add to your tree. 1. Standard HTML elements are shown with a blue icon 2. Text elements are shown in grey and 3. Components are purple

toddle-layout-tab

Adding new elements

You can add new elements by clicking the (+) button at the top or the hotkey "E".

toddle-adding-new-element

New elements will be added as children of the current selected element.

Moving and copying elements

You can cut/copy and paste any element, using CMD + X, CMD + C, CMD + V. This works between components as well. You can rearrange the elements in the tree by dragging them.

You can also copy elements by holding down alt when you drop them in the tree.

Data tab

The data tab (hotkey W) lets you manage a component's data.

URL

The URL section lets you specify the URL for the page. The section is only available for pages. On components you will find an attribute section instead. If you click the URL in this section it will open the URL Editor. The URL Editor lets you specify the URL you want this page to be located at.

Path

The left side lets you specify the path. The path decides where the page can be found. This allows you to create several pages with different paths for the same application· e.g. - `/` - `/about` - `/about/contact` URL paths consists of segments separated by “/”. You can add segments by clicking “Add path” and remove segments with the “-” button next to it. Segments can either be static which means that the name will literally show up in the url or a parameter meaning that any value is allowed in this part of the url. In the example in the image above the path is `/projects/project` The second segment is a parameter which means that the page will be shown for any of the following cases. - `/projects/toddle` - `/projects/weather` - `/projects/todo` - `/projects/whatever` - etc. The value of the parameter “project” will be different depending on the specifig url. The value of the parameter is available in any formula in your page

Query

On the right side of the URL Editor you can specify query parameters. Query parameters lets you pass extra information to a page as part of the URL. Query parameters have a name and a value and shows up in the URL like this `?name=value`. Multiple query parameters are connected with an *&* like this `?param1=value1¶m2=value2` In the example in the image above we have two query parameters: search-query and page. Just like with path parameters, query parameters are available in any formula in the page.

Attributes

Attributes lets you pass data from a parent component to a child component. This lets you build components that can adapt to different input.

Example: Alert component

We want to build an alert component like the one shown in the image below.

The message in the component should be customisable so it can be used different places. So we create an Attribute for the component called Message, and bind that the text value to the attribute.

When using the component inside a page or parent component we now have access to the new Message attribute in the right panel, and can set it to an appropriate value.

Configurable components

Attributes allow you to configure components so that they can be re used in different scenarios. Components can have any number of Attributes and and any type of data can be passed as an attribute.

Creating attributes

You can create a new attribute by clicking on the “+” button next to Attributes on the data panel.

In the attribute dialog you can change the name and test value for your attribute. The test value is only used as a placeholder when editing the component.

Component I/O

Attributes are commonly used in combination with Events, and together they form the Input / Output for components. Attributes and Events are how components communicate with other components. Check our the section on Events for more information.

Variables

Variables are a way for components to temporarily store data. Unlike when storing data in a database, variables will be reset every time the component is loaded. This means that variables are good for storing information such as: - Should the component show a confirmation dialog - Which items in a list are selected - etc. Since variables are temporary the should not be used for storing information like: - User preferences - Data shared between users.

💡

Variables are temporary and will only be available while a component is on the page. Actions like refreshing the page will reset all variables. Variables are temporary and will only be available while a component is on the page. Actions like refreshing the page will reset all variables.

Creating variables

We can create a new variable by clicking the “+” button next to Variables on the data tab. In the Edit Variable modal we can change the variables name, and provide an initial value the variable should have when the component is loaded.

We can now access the value of the variable from any formula.

And we can update the value of the variable as part of a workflow

API Requests

API requests lets you fetch and send data from an API. Toddle works with any HTTP and REST API.

🔗

Learn more about API requests on MDN

Creating an API Request

To create a new API Request click the “+” button next to API Requests in the data tab. In the API Request configuration modal you can see two panes. On the left we have to control panel that lets you configure the request. On the right you will see the data received from the request. If the API Request is set to Auto fetch then the data will automatically be re-fetched when you change the request configuration.

In the configuration panel you can change the name and different parts of the request configuration.

Auto fetch

When auto fetch is turned on, the component will automatically send the API request when the component is loaded. If any part of the API request is configured with a Formula, the component will automatically re send the request if the result of that formula changes. Auto fetch can either be set manually, or configured with a formula. When using a formula, the request will only be sent if the formula returns TRUE.

URL

The URL section lets you change the request method as well as the base URL of the request. If the URL will be the same every time you can simply add the url for the request in the URL input field. If the URL will include dynamic sections then you can combine the base URL with the Path and Query inputs to construct the different parts of the URL. You can see the result in the right side panel.

🔗

Learn more about HTTP request methods on MDN

🔗

Learn more about URLs on MDN

Headers

Headers lets you pass additional information with a request. The headers you need to send are specified by the server that will receive the request.

🔗

Learn more about headers on MDN

Body

Requests that use the POST,PUT or PATCH may include a Request body. The request body allows you to send more information to the server. When sending data to an API, the body will normally be the main payload.

💡

GET, HEAD and OPTION requests cannot have a body GET, HEAD and OPTION requests cannot have a body

Authorization

Authorization lets you set a authorization header for the request based on one of the authentication cookies managed by toddle.

Events

Events is a way for components to communicate with its parent. A component can trigger an event to notify its parent that something has happened, and and send along additional information.

Creating events

Before a component can trigger an event it must first define which events can be triggered. This is done by clicking the “+” button next to Events in the data tab.

In the event details editor you can the define a name for the event and test data. Test data is an example of the kind of data you wish to send a long with the event. The test data is only use when you are building your components, and are ignored when your application is live. If you do not wish to send any data along with the event you can leave it blank. Once you have defined the event you will have a new Action available in the Workflow Editor.

Any component of page that includes this component can now define a workflow for when the event is triggered.

Custom Formulas

The formulas section of the data tab lets you define custom formulas that can be used everywhere inside your component. This can be very useful if you have a specific formula or part of a formula that is needed in multiple places.

Creating a custom formula

To create a custom formula click the “+” button next for formulas in the data tab.

In the Edit Formula modal you can now specify the name of the formula, along with any Input Arguments you want the formula to have. Finally you can set the specify what the formula should do by clicking the fx button.

Inside the formula editor we now have access to the arguments we specified before.

In this example we will set the formula to add 1 to the input value.

Using custom formulas

We can now use our custom formula inside any formula in our component.

Recursion

It is possible to use a custom formula inside it self. This is known as recursion and will allow you to build complex algorithms.

💡

Recursion is a very powerful concept, but can also be dangerous to use. If done incorrectly the formula can cause an infinite loop where the formula will keep calling itself until it crashes. When using recursion always call the formula inside an IF. Recursion is a very powerful concept, but can also be dangerous to use. If done incorrectly the formula can cause an infinite loop where the formula will keep calling itself until it crashes. When using recursion always call the formula inside an IF.

Cache results

Custom formulas cache their results to improve performance. Though most of time this is what you want, there are cases where you should not use caching e.g. if your formula includes any kind of randomly generated values.

Component lifecycle

Component lifecycle events lets you define workflows when e.g. a component loads or when attributes change.

Style tab

The data tab (hotkey A) lets you manage a component's styling.

Elements

HTML elements

Most of the elements you will want to use int toddle are HTML elements. These includes headings, paragraphs, forms, buttons, inputs etc. HTML elements can be styled and you can listen for different user events on an element and run a workflow when it is triggered.

🔗

Check if an element is supported in the browsers you wish to support

Text elements

Text elements are elements that only contains a text string. These elements cannot be styled and does not trigger events.

Components

Components can be embedded inside other components or pages. This allows you to build complex applications while still being able to manage the complexity.

📖

Learn more about components

Slots

Slots are a special kind of element that can only be used inside a component (Not in pages). Slots allows a component to specify where the components children should be rendered.

💡

Learn more about components

Formula editor

The formula editor lets you build complex formulas that can transform your data. Everywhere you see a “fx” button in toddle you can use a formula. A formula consists of a set of nodes. Each node has 0 or more input arguments, and one output. But adding multiple nodes you can build complex formulas.

Data

In the formula editor you have access to all the data for the current component including Attributes, Variables and API Requests.

Composition

You can make complex formulas by combining multiple nodes. Click on an anchor to add a new node to a formula.

Combine nodes to get exactly the result you want.

Workflow editor

The workflow editor lets you specify what actions should be executed when a given event occurs.

Actions

Actions are executed from top to bottom. Toddle comes with several built in actions that can be performed including: Setting a variable Change the value of a variable using either a static value, or a formula. Trigger a component event Trigger an event for the current component. Pages or components that include this component in their element tree can listen for the event, and execute their own workflows accordingly. You can also specify the payload you want to pass along with the event.

Call an API

If you have specified an API for the component then you will have the option of calling it with an action. This is especially useful when you have an API that should only be called when an event occurs (Such as when a form is submitted). This action can also be used to refresh and API that is using Auto fetch.

💡

Some Actions can trigger their own events! The call API actions will e.g. trigger an event on Success or Error. Some Actions can trigger their own events! The call API actions will e.g. trigger an event on Success or Error.

Switch

Switch lets you execute a set of actions only if a certain condition is met (see the picture above). The branches of a switch are evaluated from left to right and only one branch of the switch will be executed.

Custom actions

It is also possible to upload custom actions, written in JavaScript to toddle. This enables you to extend the functionality of toddle to handle any scenario you might encounter.

Apply to become one of the first to try out toddle 🚧 👷‍♀️

Join the Beta waitlist

🛠️ The editor

Layout tab