Custom apps for Spicetify, built with React, TypeScript, and Tailwind CSS.
| App | Description | |
|---|---|---|
| Data Porter | Export and import your Spotify library — playlists, liked songs, albums, artists, podcasts, and more. |
├── apps/
│ └── data-porter/ # Import/export Spotify library data
├── packages/
│ ├── shared/ # API wrappers, hooks, i18n, types, utilities (@shared/*)
│ └── ui/ # Shared UI components, shadcn-style (@ui/*)
└── scripts/ # esbuild bundler + changeset-based release tooling
You'll need Node.js >= 18, pnpm >= 9, and Spicetify.
git clone https://github.com/Prog-Jacob/spicetify-apps.git
cd spicetify-apps
pnpm install
pnpm dev # watch-build + spicetify watchpnpm dev # watch-build all apps + spicetify watch (live reload)
pnpm build # build all apps (or pnpm build:app <name> for one)
pnpm precommit # format + lint + typecheck
pnpm release # interactive release: bump, commit, tag, pushThis is a pnpm monorepo. esbuild bundles each app as an IIFE, with React and React DOM pulled from Spicetify.React / Spicetify.ReactDOM at runtime (never bundled).
Two path aliases are resolved at build time:
@shared/*maps topackages/shared/src/*@ui/*maps topackages/ui/src/*
- Create
apps/<name>/src/index.tsxexporting a defaultrender()function - Add a
package.jsonwith aversionfield and atsconfig.jsonextending../../tsconfig.base.json - Optionally add
src/styles/index.cssif you want Tailwind - Run
pnpm build. Apps are auto-discovered by theirsrc/index.tsx
Releases are handled with changesets.
- Run
pnpm release <app-name>. This generates a draft changeset from commits since the last tag, opens your editor to pick the bump type and write release notes, then bumps the version, updatesCHANGELOG.md, tags, and pushes. - When a tag matching
*-v[0-9]*is pushed, the release workflow builds the app, packages a zip, and creates a GitHub Release.