Build even faster with packages
Access a rich repository of packages that lets you build at the speed of light ⚡
Shoelace style
By leverall
This package simplifies the use of Shoelace library web components. It is currently under development, with many more components, events and actions expected to be added.
Spark Drag and Drop
By max
The Spark Drag and Drop Package is a powerful tool to create sortable lists and kanban boards, based on the fantastic SortableJS library.
confetti
By jacob
Custom action to unleash confetti on users!
quill
By andreas
A rich text editor for toddle based on quill.js
starter-pack
By lucas
Some handy elements and icons to get started. Currently includes dropdown, tooltip, drag and drop list, an inline value edit, buttons, tabs, accordion, and icons.
More elements to be added/updated over time.
location
By god_of_code
Formulas and actions that are useful when working with geolocation in the browser 🧭
It allows you to easily request the user's location once - or watch it as it updates 🗺️
ui-accordion
By jacob
Simple accordion component. Use ui-accordion inside ui-accordions
Carousel
By vakis
A carousel is a dynamic element commonly used to showcase multiple images or pieces of content within a confined space. A carousel is excellent for user interfaces that have confined elements for content. Social networks like Facebook or Instagram use carousels for images. It allows them to show multiple images in a single card in their feeds.
Don’t build from scratch, install a package
You don’t have to reinvent the wheel. Install native packages with rich functionality and zero need to manage dependencies––no more broken plugins.
The fastest code is
the code you don't write
Install pre-built packages built by a world-class developer community and accelerate your time to market –– no coding required.
Skip the repetitive work.
Build reusable packages.
Design cool components, actions, or formulas, package them, and use them everywhere––no need to mess around with complicated formulas.
Tiny wrapper, enormous potential.
Tiny, but mighty upgrades that are available with in a single click. Browse the community packages and start to build.
Shoelace style
By leverall
This package simplifies the use of Shoelace library web components. It is currently under development, with many more components, events and actions expected to be added.
Spark Drag and Drop
By max
The Spark Drag and Drop Package is a powerful tool to create sortable lists and kanban boards, based on the fantastic SortableJS library.
confetti
By jacob
Custom action to unleash confetti on users!
quill
By andreas
A rich text editor for toddle based on quill.js
starter-pack
By lucas
Some handy elements and icons to get started. Currently includes dropdown, tooltip, drag and drop list, an inline value edit, buttons, tabs, accordion, and icons.
More elements to be added/updated over time.
location
By god_of_code
Formulas and actions that are useful when working with geolocation in the browser 🧭
It allows you to easily request the user's location once - or watch it as it updates 🗺️
ui-accordion
By jacob
Simple accordion component. Use ui-accordion inside ui-accordions
Carousel
By vakis
A carousel is a dynamic element commonly used to showcase multiple images or pieces of content within a confined space. A carousel is excellent for user interfaces that have confined elements for content. Social networks like Facebook or Instagram use carousels for images. It allows them to show multiple images in a single card in their feeds.
Spline
By vakis
Spline is a 3D builder where you can create engaging scenes and even 3D Games. This package enables you to load Spline scenes natively in toddle.
dotlottie
By andreas
Play lottie animations in toddle.
dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and use the file extension of ".lottie".
currency-formatter
By Gazinhio
Display numbers for any currency format.
markdown-block
By andreas
Render Markdown content in toddle.
ps-table
By Pioneer_Solutions
Dynamic Table that allows you to:
- have certain columns sticky on the left during scrolling
- hide/show certain columns
- search by specific visible columns
- sort by any visible column
- pagination
- customize items per page
- is i18n compatible
- allows to add action buttons
- allows you to add select checkboxes
Editor.js
By leverall
Block-style editor with a universal JSON output.
Vanilla Calendar
By leverall
Date and Time picker for your Toddle project. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies. Build with vanilla-calendar.pro.
code-editor
By jacob
Code editor based on Monaco, powering tools such as vs-code.
Social icons
By vakis
Cool icon pack with all the popular social networks.
model-viewer
By god_of_code
model-viewer allows interacting with rich 3D models using a customizable component 👍
Minimalistic Chart
By lululucaschae
A chart package built within toddle with no library imports.
horisontal-scroll-section
By svenning
Horizontal scrolling Netflix-style — grab or scroll content sideways!
lite
By vakis
Embed YouTube videos, shorts, and playlists. This component loads YouTube Embed iframes faster.
html-block
By andreas
Render dynamic html content e.g. from CMS in toddle
Chart.js
By lululucaschae
A simple and customizable chart component. Takes in json data and displays it in various chart styles using Chart.js.
Custom switch statement
By lululucaschae
Custom formula that allows you to use the switch / case statement inside your the node editor.
color-picker
By andreas
A color picker built 100% in toddle.
ui-toast
By jacob
Beautiful feedback to events with ease. A single toaster component with the ability to trigger toasts from anywhere!
![Thumbnail for the Spark Calendar package](/cdn-cgi/imagedelivery/ZIty0Vhmkm0nD-fBKJrTZQ/sparkcal:icon-512x512(1).png/48)
Spark Calendar
By max
A very powerful and flexible calendar for Toddle.
built in toddle
By andreas
Show your love for toddle with a "built-in-toddle" button
Web media
By andreas
Control media playback in toddle. Add sound effects to your toddle app, or building a custom video player!
Tool Cool Range Slider
By leverall
Responsive range slider with a rich set of settings, including pointers (knobs), vertical and horizontal slider, touch, mousewheel and keyboard support, range dragging, RTL support and many more features.
onboarding_wizard
By andreas
A simple dialog that you can populate with several onboarding steps.
Tagify
By leverall
Tags input component
![Thumbnail for the Calendly.com package](/cdn-cgi/imagedelivery/ZIty0Vhmkm0nD-fBKJrTZQ/calendlycom:Group42112.png/48)
Calendly.com
By vakis
Easy scheduling ahead
Calendly is your scheduling automation platform for eliminating the back-and-forth emails to find the perfect time — and so much more.
Add Commas In Numbers
By bishop
No description available 🙄
test-table
By yacinin
No description available 🙄
marija-package
By marija
No description available 🙄
package-1
By sahil8
No description available 🙄
toddle website
By svenning
Super secret package! Might be something with our new website! Who knows 🤷♀️
Scrollbar Generator
By leverall
Give your default scrollbars a makeover with this tiny package - because even scrollbars deserve to dress up and impress your users!
SyncdeskUI
By Alfred
Ui package with the current components. FYI UNDER DEVELOPMENT
Table
- ui-tabel
- ui-tabel_head
- ui-tabel_header_cell
- ui-tabel_body
- ui-tabel_row
- ui-table_data_cell
- ui-avatar
- ui-avatar_group
UI
- ui-checkbox
- ui-counter
- ui-dimmer
- ui-divider
- ui-button
- ui-button_icon
- ui-spinner
- ui-alert_banner
Primitives
- primitive-helptext
- primitive-label
PlottlyJS
By calvin
Very much an alpha plottly package.
block test
By mows
No description available 🙄
"Packages make Toddle a virtually limitless No Code development tool."
Gareth, Nocode Coder
"toddle is like racing a new F1 vs Ford Model T and with packages, it’s the same race, but you also get a head start."
Lucas G, Founder