Svelte Put
Useful svelte stuff to put in your projects
[!NOTE] > Svelte 5 is coming! All action-based packages in this collection should continue to work, while others are being updated to support the new version. Support for Svelte 4 and lower will be dropped in the next major releases.
Documentation
See the dedicated documentation page here.
Packages
@svelte-put includes several packages that have self-managed release cycles, listed below. Check out their corresponding README for more details.
| Package | Short Description | Version | Changelog | Docs |
|---|---|---|---|---|
| [@svelte-put/async-stack][github.async-stack] | component & utilities for async-stack | [![npm.async-stack.badge]][npm.async-stack] | [Changelog][github.async-stack.changelog] | [![docs.badge]][docs.async-stack] |
| [@svelte-put/avatar][github.avatar] | component & utilities for avatar | [![npm.avatar.badge]][npm.avatar] | [Changelog][github.avatar.changelog] | [![docs.badge]][docs.avatar] |
| [@svelte-put/clickoutside][github.clickoutside] | event for clicking outside node | [![npm.clickoutside.badge]][npm.clickoutside] | [Changelog][github.clickoutside.changelog] | [![docs.badge]][docs.clickoutside] |
| [@svelte-put/cloudflare-turnstile][github.cloudflare-turnstile] | event for clicking outside node | [![npm.cloudflare-turnstile.badge]][npm.cloudflare-turnstile] | [Changelog][github.cloudflare-turnstile.changelog] | [![docs.badge]][docs.cloudflare-turnstile] |
| [@svelte-put/copy][github.copy] | copy text to clipboard | [![npm.copy.badge]][npm.copy] | [Changelog][github.copy.changelog] | [![docs.badge]][docs.copy] |
| [@svelte-put/dragscroll][github.dragscroll] | add drag-to-scroll behavior | [![npm.dragscroll.badge]][npm.dragscroll] | [Changelog][github.dragscroll.changelog] | [![docs.badge]][docs.dragscroll] |
| [@svelte-put/intersect][github.intersect] | wrapper for IntersectionObserver | [![npm.intersect.badge]][npm.intersect] | [Changelog][github.intersect.changelog] | [![docs.badge]][docs.intersect] |
| [@svelte-put/inline-svg][github.inline-svg] | dynamically inline SVGs | [![npm.inline-svg.badge]][npm.inline-svg] | [Changelog][github.inline-svg.changelog] | [![docs.badge]][docs.inline-svg] |
| [@svelte-put/lockscroll][github.lockscroll] | lock scroll, hide scrollbar | [![npm.lockscroll.badge]][npm.lockscroll] | [Changelog][github.lockscroll.changelog] | [![docs.badge]][docs.lockscroll] |
| [@svelte-put/movable][github.movable] | move node on mousedown | [![npm.movable.badge]][npm.movable] | [Changelog][github.movable.changelog] | [![docs.badge]][docs.movable] |
| [@svelte-put/preaction][github.preaction] | move node on mousedown | [![npm.preaction.badge]][npm.preaction] | [Changelog][github.preaction.changelog] | [![docs.badge]][docs.preaction] |
| [@svelte-put/popover][github.popover] | move node on mousedown | [![npm.popover.badge]][npm.popover] | [Changelog][github.popover.changelog] | [![docs.badge]][docs.popover] |
| [@svelte-put/preprocess-auto-slug][github.preprocess-auto-slug] | auto add id and anchor to selected nodes |
[![npm.preprocess-auto-slug.badge]][npm.preprocess-auto-slug] | [Changelog][github.preprocess-auto-slug.changelog] | [![docs.badge]][docs.preprocess-auto-slug] |
| [@svelte-put/preprocess-external-link][github.preprocess-external-link] | auto add id and anchor to selected nodes |
[![npm.preprocess-external-link.badge]][npm.preprocess-external-link] | [Changelog][github.preprocess-external-link.changelog] | [![docs.badge]][docs.preprocess-external-link] |
| [@svelte-put/qr][github.qr] | render QR as img or svg |
[![npm.qr.badge]][npm.qr] | [Changelog][github.qr.changelog] | [![docs.badge]][docs.qr] |
| [@svelte-put/resize][github.resize] | wrapper for ResizeObserver | [![npm.resize.badge]][npm.resize] | [Changelog][github.resize.changelog] | [![docs.badge]][docs.resize] |
| [@svelte-put/shortcut][github.shortcut] | add keyboard shortcuts to node | [![npm.shortcut.badge]][npm.shortcut] | [Changelog][github.shortcut.changelog] | [![docs.badge]][docs.shortcut] |
| [@svelte-put/toc][github.toc] | action & utilities for building table of contents | [![npm.toc.badge]][npm.toc] | [Changelog][github.toc.changelog] | [![docs.badge]][docs.toc] |
Contributing
This project is a monorepo using turborepo under the hood. Familiarity with turborepo is not required but encouraged.
For a quick start, run the script below at project root to see what commands are available.
pnpm turbo
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.