# Swapy

> Framework-agnostic JavaScript tool to convert any layout into drag-to-swap elements

Swapy is a lightweight JavaScript library that turns standard HTML layouts into drag-and-drop swappable elements using HTML data attributes. It is framework-agnostic, working seamlessly with plain JavaScript, React, Vue, and Svelte without altering complex layout CSS. It provides built-in animations and simple event hooks to capture layout changes.

Website: https://swapy.tahazsh.com/

## What it is for

- Build customizable dashboard layouts where users can reorder widgets
- Add drag-and-drop card reordering to kanban or task boards
- Rearrange image galleries or media cards with animated transitions
- Persist user-organized layouts to local storage or an API

## Features

- Framework-agnostic design compatible with vanilla JS, React, Vue, and Svelte
- Attribute-based configuration using data-swapy-slot and data-swapy-item
- Support for drag handles via data-swapy-handle
- Multiple animation styles including dynamic, spring, or none
- Built-in state export providing new layout orders as array, object, or Map
- Dynamic enable/disable controls for locking layouts
- CDN support for quick script-tag embedding

## Pricing

Open source. Free and open source

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library, Web
- For: Front-end web developers building interactive or customizable user interfaces
- Alternative to: SortableJS, react-grid-layout, Gridstack.js
- Tags: javascript, drag and drop, dashboard, layout, ui library, frontend

## Why it was saved

- [@tahazsh, 18 July 2024](https://x.com/tahazsh/status/1814021879864127525): Lets you turn arbitrary grids/cards (dashboards, kanban-like layouts) into draggable, swappable arrangements without heavy dependencies.

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/swapy

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.