explaingit

tahash/swapy

★ 8,483TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A small JavaScript/TypeScript library that lets you add drag-to-swap layout behavior to any webpage with a few lines of code, without needing a specific framework.

Mindmap

mindmap
  root((repo))
    What it does
      Drag to swap items
      Rearrange panels
      No framework needed
    Tech Stack
      TypeScript
      JavaScript
    Use Cases
      Dashboard widgets
      Portfolio grids
      Custom layouts
    Audience
      Web developers
      Frontend builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add drag-to-swap rearrangeable panels to a web app built with React, Vue, or plain HTML

USE CASE 2

Let users customize their dashboard layout by dragging widgets to swap positions

USE CASE 3

Add interactive grid reordering to a portfolio or content site

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 30min

Commercial or closed-source projects require a paid license, open-source use is free under GPL v3.

Free for open-source projects under GPL v3, commercial or closed-source projects require a paid license purchased from the project website.

In plain English

Swapy is a small JavaScript library that adds drag-to-swap behavior to any webpage layout. The idea is that you take a grid or set of panels you have already built, add a few lines of Swapy code, and the items in that layout become draggable so users can rearrange them by swapping positions. It does not require any specific framework, meaning it can be dropped into a plain HTML page or used alongside React, Vue, or any other setup. The README itself is brief and points to the project's documentation site for full details and live demos. Based on what is in the repository, the library is written in TypeScript and the actual integration guide lives externally. Licensing has two paths. If the project using Swapy is open-source and released under a license compatible with GNU GPL version 3, Swapy can be used for free under those terms. If the project is commercial or the source code will be kept private, a paid commercial license is required, available for purchase on the project's website. The README does not include pricing details.

Copy-paste prompts

Prompt 1
Help me integrate Swapy into my React dashboard so users can drag and swap panel positions
Prompt 2
Show me how to set up Swapy on a plain HTML page with a 3-column grid layout
Prompt 3
I have a Vue.js app with a card grid, how do I add Swapy to make the cards swappable?
Prompt 4
Generate a minimal TypeScript example that uses Swapy to let users rearrange 4 boxes in a 2x2 grid
Open on GitHub → Explain another repo

← tahash on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.