Tastify provides a complete set of dev tools to connect your personal site to a spotify account and display your listening habits.
Drop-in components for top tracks, top artists, recently played, and now playing — with built-in loading states and error handling.
Framework-agnostic widgets that work anywhere. Mount with a single function call or use data attributes for zero-JS setup.
Run npx tastify init to scaffold a token endpoint for Vercel, Netlify, Cloudflare, or Express in seconds.
Built-in OAuth PKCE flow and token refresh handling. Supports static tokens, dynamic getToken, or a tokenUrl endpoint.
Full-track streaming via the Spotify Web Playback SDK with a fallback to 30-second previews. Bar and toast UI options.
Every visual detail is driven by CSS custom properties. Override colors, fonts, spacing, and radii to match your site.
Three steps to have Spotify widgets running on your site.
# npm
npm install @tastify/react
# pnpm
pnpm add @tastify/reactnpx tastify initimport { TastifyProvider, TopTracks } from '@tastify/react';
import '@tastify/react/styles.css';
function App() {
return (
<TastifyProvider tokenUrl="/api/spotify-token">
<TopTracks limit={5} showTimeRangeSelector />
</TastifyProvider>
);
}