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

Export component

Components are compatible with the Web Component API, supported by all modern browsers. By being built on top of browser standards, toddle components can live outside of toddle when exported as web components, without any additional setup from your sideโ€” no need for compilation, custom build-steps, plugins etc.

Concepts such as slots, CSS variables, attributes, and events all still function. See the documentation on web components to see how they translate one-to-one.

Let's get you started by embedding your first toddle component onto another website. The website may be built in any of your second-favorite tools or on another toddle app.

Export as web-component

Step 1

Click the

Step 2

Export component dialog

Step 3

Copy the code snippet to any page you'd like and you should see your component live! Any changes in the editor will be reflected in your component.

For production-use, you should always export your component from your " main" branch.