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

Styling your toddle app

styling and layout in toddle is based on CSS. it uses the same style properties that you would traditionally write in your CSS code but arranged in a simple to use UI panel.

If you have used a visual editor like Webflow, Framer or Figma most of the properties should feel very familiar.

Style panel for a basic HTML element

Layout

By default toddle uses the flexbox layout algorithm. Flexbox is an incredibly powerful layout system that lets you create almost any layout you can imagine. This is the same algorithm used by Figmas "Auto layout".

With all that power comes a bit of a learning curve. If you are new to flexbox, we recommend checking out Josh W Comeau's post: An Interactive Guild to Flexbox

As great as flexbox is, it is not the best option for every occasion. When working with text toddle defaults to "Text" layout which in CSS is called flow layout .