Creating Packages

Packages are small collections of components, formulas, and actions that you can install in toddle projects to get the desired functionality. The repository of packages grows with the community as anyone can build and share their packages with each other.

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:

• Shoelace style
• Geo-location
• Rich Text Editor (RTE)
• Toast notifications
• Color picker
• Drag and drop

There are many more, and you can see them all here .

It makes a lot of sense to install packages in your existing app rather than building individual web components. Whenever you need new functionality, we recommend that you build it as a package so you and others can benefit from it across multiple projects.

Creating a new package project

Not all projects are created equal. The most common type of toddle project is an app . Packages and apps are similar but have a few key differences:

• Only apps can install packages
• Only packages can export data that apps can consume

On toddle.dev/projects, you can create either an app or a package; choose "Package".

Decide what to export

Packages can export components , custom formulas , and custom actions ,. Note: Not everything in your package is visible to others. You can mark the components etc., that you wish to export on the individual components. You can still use components and custom code that you have not exported to build your package, but developers who install your package will not see these.

The frontpage

Packages are based on a common template, but you can modify everything. You show this page in the package preview in the editor. Potential users can interact with it fully. Live examples of your components or even actions and formulas are recommended. In addition to 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 must press the update button manually to get any new changes. This allows them to test changes on a branch before going live. A good rule of thumb for package authors is to keep breaking changes to a minimum.

Using a package

People can find and install your package once you launch it. Read more about how to install packages .

Break down your project into well-defined packages to improve organization and promote modularity. This will make the code easier to maintain and allow you to share and reuse specific functionalities across projects or with the wider developer community.