Build even faster with packages

This package simplifies the use of Shoelace library web components.

The unstyled component library for toddle. Ships with 25+ ARIA-compliant, completely customizable primitives.

The Spark Drag and Drop Package is a powerful tool to create sortable lists and kanban boards, based on the fantastic SortableJS library.

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.

Custom action to unleash confetti on users!

A starter package for supabase auth. Contains handlers for most auth methods, components for file upload and realtime subscription.

Beautiful feedback to events with ease. A single toaster component with the ability to trigger toasts from anywhere!

Build Scalable Mobile Apps in Toddle with most Native Features and Callback Data

Block-style editor with a universal JSON output.

A very powerful and flexible calendar for Toddle, built entirely in Toddle. Feature-rich and extremely customizable.

Easy to use component to check where content is compared to the viewport. Useful for delaying rendering or playing animations on scroll.

A rich text editor for toddle based on quill.js

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.

A single action to listen for changes in a given media query. Executes a callback when the query matches or doesn’t match. Can be used for viewport changes, or changes to system theme settings, device orientation etc.

TypeIt is a JavaScript library that makes it easy to create flexible, dynamic typewriter effects for the web.

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.

Control media playback in Nordcraft. Add sound effects to your Nordcraft app, or build a custom video player!

Tags input component

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.

Simple accordion component. Use ui-accordion inside ui-accordions

Render dynamic html content e.g. from CMS in toddle

Give your default scrollbars a makeover with this tiny package - because even scrollbars deserve to dress up and impress your users!

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

Display numbers for any currency format.

Render Markdown content in toddle.

A tiny, secure, URL-friendly, unique string ID generator for toddle. Works with Server Side Rendering (SSR).

Dropdown container component that adapts to any use case.

StudioForm is a powerful, feature-rich multi-step forms framework that was originally developed for Webflow. Then Wized. Now toddle. It's ideal when you need to capture a lot of data from your users at once. Think application forms, onboarding flows, step-by-step project request forms, surveys, etc.

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".

A simple and customizable chart component. Takes in json data and displays it in various chart styles using Chart.js.

Code editor based on Monaco, powering tools such as vs-code.

A customizable scrollbar package for Toddle.dev. Define container class, track width, colors, and corner radius to create sleek, modern scrollbars effortlessly.

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 🗺️

Unofficial port of Instantdb for Toddle
This is a complete port of the client-side instant sdk to toddle. It includes realtime database queries, auth, presence, cursors, typing indicator, activity and storage.

A chart package built within toddle with no library imports.

Create beautiful Charts from the Apex Chart Libary - Pie, Bar, Donut, Line, Area 📊

model-viewer allows interacting with rich 3D models using a customizable component 👍

Mousetrap is a package that makes it easier to work with the mouse move event

Simulates a real-time text streaming effect for HTML elements (div, textarea, p)

Nocode-UI is a collection of UI components inspired by Shadcn/ui and TailwindCSS. This is an early-access version, only the card, input and button component are included!

Horizontal scrolling Netflix-style — grab or scroll content sideways! Wow! Hello! Horizontal scrolling Netflix-style — grab or scroll content sideways! Wow! Hello!

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.

Haptic feedback on IOS and Android devices.

Make your web pages rain pure joy with Emoji Confetti Maker, the Toddle package that turns ANY emoji into a dazzling cascade of celebration!

This package provides a way to capture, preview, and download screenshots of specific elements within your Toddle app. It uses the html2canvas library to render DOM elements into images, allowing users to generate screenshots of app content. With built-in preview functionality, users can view the screenshot before downloading it.

Wrap any element in a ripple component to add a ripple effect on the pointer-down. Ripple is based on Material Design and is often used to provide better feedback to interactable areas.

Super secret package! Might be something with our new website! Who knows 🤷‍♀️

Scheduling infrastructure for everyone. Meet Cal.com, the event-juggling scheduler for everyone. Focus on meeting, not making meetings. Free for individuals.

A color picker built 100% in toddle.

Show your love for toddle with a "built-in-toddle" button

Embed YouTube videos, shorts, and playlists. This component loads YouTube Embed iframes faster.

OpenAI Chat Streaming custom action for toddle.dev

Simpler way to handle file uploads. You can click to upload or just drag files into the drop area.

A simple JSON viewer built 100% in toddle

People love to like things. And now they'll love to like even more things with The Best Like Button™️ on The Internet.

Gorgeous Data Visualization in Toddle

A simple component using PDFJS to load and view PDFs.

A package for creating spring animations in toddle

A simple dialog that you can populate with several onboarding steps.

Custom formula that allows you to use the switch / case statement inside your the node editor.

A zoom / scroll panel like the one used in toddles editor

Add tracking scripts to your site

Use Mapbox maps directly in Nordcraft and build beautiful markers.

No-Code CSV Excel Importer to customer's data in Toddle Application!

Features:
- Supports providing userId
- Scalable to import large amount of records
- User Friendly editor
- One-click column mapping
- Themeable
- Supports multiple importers on the same page

Demo available on, https://csv_excel_importer.toddle.site

Feel free to contact bhavik@impler.io for any help or questions.

Darkmode and Theme control for Spark One

A Chrome extension for Nordcraft that captures website data, enables user interactions, and manipulates web content.

cropper.js JavaScript image cropper.

No description available 🙄

Exploding colors everywhere.

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.

Cool icon pack with all the popular social networks.

This Toddle action package generates a PDF from a specified HTML element. It uses html2pdf.js to capture the content and save it as a PDF file. The package is self-contained and works directly within Toddle workflows without additional setup. All styling for PDF is inherited directly from the page CSS. If the PDF render does not look how it was intended modify the CSS or HTML directly.

View the html2pdf.js GitHub for more information: https://github.com/eKoopmans/html2pdf.js?tab=readme-ov-file

A quick and easy way to integrate a countdown on your page. You can control whether to include any of the values (e.g. days, hours, etc) or not. And you have the possibility to adjust the text in between each value.

No description available 🙄

It is a duck.

No description available 🙄

A basic element to upload files to Supabase Storage

Generate unique words based on standard dictionaries or provide your own 🎉

No description available 🙄

Mostly for internal use will be maintaining for agency but you are welcomed to try it out, can't guarantee good support to feature requests or bugs.

Connect to WebSockets directly from toddle!

Render Safe HTML Files in a Preview Window

Add Vince McMahon hover states to your project

Load Zaraz script manually.

A powerful form component package with real-time validation.

✅ Inputs, Dropdowns, Radio & Checkboxes
⚡ isValid Boolean + Custom Error Messages
🎨 Fully Customizable Design
🔄 Live State Updates

Build better forms, faster. 🚀

No description available 🙄

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

It can be tricky to get gradients on text in HTML & CSS. This package wraps the functionality in an easy-to-use component.

No description available 🙄

A Bézier curve editor. Useful for creating timing functions to use in toddle or in standard CSS.

An accessible and native-built carousel with no external dependencies

This package allows user to dynamically show icons in the menu or navigation from array/object list.

Gradient picker used by the toddle editor.

Unofficial integration of Spectrum Web Components for Toddle

No description available 🙄

This package aims to help developers create page header easily.

No description available 🙄

No description available 🙄

Outseta is a service that offers membership solutions as a service. Install the package to access a fully built membership service that allows you to charge for certain gated content or products.

Darkmode / Themes made simple

Flutterby is a bsky.social profile link made by Phil Hawksworth

Add liquid glass to your PWA and Mobile App - Convert your Nordcraft Web App into a Mobile App today with Despia (https://despia.com)

A basic calendar view built in toddle. No external libraries.

Allows users to monitor the activity and trigger events when someone is inactive. Mind that the component needs to be a parent.

Please wait. It is not ready yet.

No description available 🙄

No description available 🙄

new

poiuyt

The best analytics tool.

No description available 🙄

Add haptic feedback to your PWA on iOS 18+ and most devices that support the Vibration API.

Renders rich text from TipTap’s JSON output.

Add a Built in Nordcraft badge anywhere in your project, and it'll show up in the bottom right of the screen, allowing people to view the project directly in the editor and clone it.

No description available 🙄

No description available 🙄

This is a package to embed typeform directly to your toddle projects. It makes it a lot easier to embed, and they run much smoother than an iframe.

Use the Native Mobile Share API to Support Mobile App Like Native Sharing of any Content and Links / Files

🚧 Work in Progress 🚧

No description available 🙄

This component renders any inline SVG string into a target container using a dynamic script.

Noto Emojis for Nordcraft

Very much an alpha plottly package.

A package of useful Math formulas. Nordcraft has some basic math built in to carry most standard web apps. However, if your app requires work with vectors, such as dot products or projections, then this package should give you all the utility you need.

No description available 🙄

A package for JavaScript's built-in Date objects.
This package provides implementations of the standard get and set methods for working with dates. All set methods follow an immutable approach, creating a new Date object using new Date() and setTime() to ensure no side effects or modifications to the original date.

Note: All set methods support single arguments (e.g., setHours(20)), and do not accept the additional optional parameters found in the native built-in methods (e.g., setHours(20, 21, 22)).

For more information, refer to the MDN documentation for Date - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

An authentication package for children in Nordcraft. (Not official)

Simple SaaS app framework with header, disappearing / collapsible sidebar and main content area. This version is for initial testing.

No description available 🙄

No description available 🙄

No description available 🙄

No description available 🙄

No description available 🙄

No description available 🙄

No description available 🙄

No description available 🙄

No description available 🙄

Modified Quill to add images and other toolbar options.

No description available 🙄

No description available 🙄

Load images with a halftone shader effect.

A package for integrating cello into your app.

Cello is an innovative user-led growth marketing platform designed to supercharge your customer referral program. Cello enables you to integrate a rewarding referral experience directly into your product, simplifying user engagement and enhancing the reach of your brand.

No description available 🙄