Up and running in under 5 minutes

How to add your widget as a browser source

35+ themes from minimal to cinematic

Every control explained

The main fill color of the widget card. Set backgroundOpacity to 0 for fully transparent.

Accent color used for progress bars, glows, and highlighted elements. Also accepts hex values like #FF6B6B.

Color of the track title and info text.

Controls how transparent the background is. 0 = fully transparent, 100 = fully solid.

Frosted-glass blur behind the widget. Best used with semi-transparent backgrounds.

Rounds the corners of the widget card. 0 = sharp, 20 = very rounded.

Choose from 35+ fonts grouped by style: Gaming, Bold, Elegant, Friendly, Mono, and Arabic.

Base size for track text. Title is usually 3–4px larger than the base.

Inner spacing between widget edges and content.

The width of the widget. Height is automatic based on content.

Scales the entire widget up or down without affecting the browser source size.

Places the widget as a percentage of the stream canvas. X=2, Y=85 puts it bottom-left.

Toggles the album artwork thumbnail.

Shows or hides the artist name.

Shows or hides the album title (hidden by default).

Animated bar showing how far through the track you are.

When enabled, long track titles scroll horizontally instead of being truncated.

Hides the widget entirely when music is paused. Uses exit animation.

Shows a brief toast popup when the track changes.

Let the album art choose your colors

Enable to extract color from the album art of each track automatically.

Controls which type of color is extracted from the art. Vibrant picks the boldest color. Muted picks softer tones. Cycle rotates through all extracted palette colors every 3 seconds.

Boosts or reduces the saturation of the extracted color. 100 = natural, 130+ = vivid.

Fine-tune every detail with your own CSS

* {
  font-family: 'Bebas Neue', sans-serif !important;
}

[class*="motion"] > div:first-child {
  background: transparent !important;
  backdrop-filter: none !important;
}

[class*="motion"] > div {
  outline: 2px solid #9580FF !important;
  box-shadow: 0 0 20px #9580FF44 !important;
}

p, span, div {
  font-size: 90% !important;
}

.artist, [data-artist] {
  display: none !important;
}
/* Or target by order in the flex column */

Which services are supported and how they work

The most reliable integration. Connects via Spotify's official OAuth — access tokens refresh automatically every hour so you never need to reconnect. The widget polls your playback state every 3 seconds with no delay.

How to connect:

Last.fm is a free music tracking service that works with any music app— YouTube Music, Tidal, Apple Music, Deezer, Plex, and more. It records every song you play ("scrobbles") and MalazBeats reads those scrobbles to show what's currently playing. The session key never expires — you connect once and it works forever.

Step 1 — Create a Last.fm account

Step 2 — Connect Last.fm to MalazBeats

Step 3 — Connect your music app to Last.fm

Now enable scrobbling in whichever app you use:

YouTube Music has no official now-playing API, so the path is: YouTube Music → Last.fm → MalazBeats.

Complete walkthrough — account, connection, and linking your music app

How it works