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.

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 .