Ask toddle AI

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

Working with APIs

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

Editing your application

If you chose the blank template when you created your project you will see something like this.


In the center you can see your application. Currently your app consists of a single page with the title "Template" and single paragraph.
Selecting elements
You can select the title by clicking on the word Template in the canvas.


You will see a blue line around the selected element, as well as the name of the element you have selected.


toddle follows the HTML standards. That is why the "title" element here is named h1, short for heading 1

On the left side of the screen you can see your element tree. This gives you a quick overview of all the elements on your page, as well as which element i highlighted.


Editing elements


On the right side of the screen you will see the element panel. This lets you edit different properties of the selected element.


The Style tab lets you change the elements style and layout.
โ 
โ The Attributes tab lets you set different HTML attributes for each element.
โ 
โ The Events tab lets you define workflows that should be run on different user interactions.
โ 
โ Go ahead and try editing the text styles for the h1 element.