xiry.

Development · GitHub repo

Swapy

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

From the Xiry library · Updated 10 October 2026

Visit swapy.tahazsh.com ↗

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.

What it's 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
Topic
UI Components
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: Lets you turn arbitrary grids/cards (dashboards, kanban-like layouts) into draggable, swappable arrangements without heavy dependencies.

Related

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Motion

    Open-source animation library for React, Vue, and vanilla JavaScript

  • React Bits

    Open-source animated and interactive React UI components and backgrounds

  • 21st.dev

    Curated directory of crafted React, Tailwind, and shadcn UI components.

  • lucide-animated

    Open-source animated React icons built with Lucide and Motion

All 114 in UI Components →

Updated