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

Creating Packages

toddle provides a growing ecosystem of packages that allows installing one project's components, formulas, and actions into other projects.

Packages usually consist of generic reusable components, formulas or actions. A package may contain a single component or an entire UI or utility library. A few great examples of packages are:

  • Extended editor functionality such as Geo-location or cryptography support
  • Color picker
  • Math package with both components and formulas to calculate and visualize complex formulas
  • A part of your existing App that makes more sense to live as an independent package.

Creating a new package project

Not all projects are created alike. The most common type of toddle project is an App . Packages and Apps are surprisingly similar, but have a few key differences:

  • Only Apps may install packages
  • Only Packages may export data to be consumed by Apps

On the projects overview page, you will have the option to create either an App or a Package, choose "Package".

Deciding what to export

Packages can export Components , Custom Formulas & Custom Actions . Notice, that not everything in your package is visible to consumers. You can mark the components etc. that you wish to export on the individual components. Components and custom code that are not exported can still be used, to internally build up your package, but they will not be visible to those who install your package.

The frontpage

Fresh packages are based on a common template, but you can modify this to your liking. The front page will be shown in the package preview in the editor. It is fully interactable to potential users, so showing live examples of your components, or even actions and formulas is highly advised. Besides examples, it is important to document the exported components.

Launching your package

Launching happens on the project details page. Once your package is ready, you can launch it to the community. When a package is launched, itโ€™s out there for everyone to see. You cannot undo this action. The only way to take off a package is to delete it.

A package must have at least one exported Component, Custom Formulas or Action before you can launch it

Packages can still be updated after you launch them. Consumers will have to press the update button manually to get any new changes, this gives them a chance to test changes on a branch before going live. Still, keeping breaking changes to a minimum is always an important goal to keep in mind for package authors.

Using a package

Your package is immediately discoverable and installable after launching it. Read more about installing packages .

Creating a project composed of multiple packages can be a great way to keep things separated and enforce low cohesion. It also allows you to share these parts with the community or between your other projects!