Template Reference¶

This document lists all available templates in What's Now Playing, organized by category with descriptions of their functionality.

Templates are HTML files that control how track information is displayed in various outputs like OBS, Discord, web browsers, and text files. For template variables, see Template Variables. For visual examples of templates in action, see the Gallery.

Mtv Templates¶

Mtv Style¶

MTV-style layouts with customizable fade effects

Template	Description
`ws-mtv-cover-nofade.htm`	MTV Style with Cover - No Fade
`ws-mtv-cover-fade.htm`	MTV Style with Cover - Fade Effects
`ws-mtv-nofade.htm`	MTV Style Text Only - No Fade
`ws-mtv-fade.htm`	MTV Style Text Only - Fade Effects

Artist Templates¶

Artist Images¶

Artist artwork displays (logo, banner, thumbnail, fanart)

Template	Description
`ws-artistlogo-nofade.htm`	Artist Logo Display
`ws-artistbanner-nofade.htm`	Artist Banner Display
`ws-artistthumb-nofade.htm`	Artist Thumbnail Display
`ws-justthecover.htm`	Just The Cover Image

Artist Fanart¶

Artist fanart with special streaming endpoint

Template	Description
`ws-artistfanart-nofade.htm`	Artist Fanart Display
`ws-artistfanart-conditional.htm`	Conditional Artist Fanart (audio only, transparent video)

Anime Templates¶

Anime Effects¶

Templates using anime.js animations

Template	Description
`ws-anime-elastic.htm`	Elastic scale animation with anime.js
`ws-anime-bounce.htm`	Bouncy animation with anime.js
`ws-anime-stagger.htm`	Advanced staggered animations with anime.js

Basic Templates¶

Basic Text¶

Simple text displays in various colors

Template	Description
`ws-basicblack.htm`	Basic Black Text
`ws-basicblue.htm`	Basic Blue Text
`ws-basicwhite.htm`	Basic White Text
`ws-basicyellow.htm`	Basic Yellow Text

Generic Dj Tryhard¶

The same boring titlecard every DJ uses because they lack creativity

Template	Description
`ws-unoriginal-dj-clone.htm`	Congrats, you look exactly like every other DJ now
`ws-basic-bro-vibes.htm`	For when you want to blend into the crowd of indistinguishable DJs
`ws-cookie-cutter-dj.htm`	Mass-produced DJ aesthetic - now with 100% less personality! (Blue Edition)

Complex Templates¶

Complex Websocket¶

Complex WebSocket templates with multiple endpoints

Template	Description
`ws-coverslideshow.htm`	Cover slideshow using multiple WebSocket endpoints

Special Templates¶

Gifwords¶

GIF word displays with fade effects

Template	Description
`ws-gifwords-fade.htm`	GIF Words with Fade

Special Layouts¶

Special purpose templates

Template	Description
`ws-requests.htm`	Track Request Display

Effects Templates¶

Explode Effects¶

Text displays with explode effects using anime.js

Template	Description
`ws-explodeblack.htm`	Black Text with Explode Effect
`ws-explodewhite.htm`	White Text with Explode Effect

Spin Effects¶

Text displays with spin effects using anime.js

Template	Description
`ws-spinblack.htm`	Black Text with Spin Effect
`ws-spinwhite.htm`	White Text with Spin Effect

Slide Effects¶

Text displays with slide down/up effects

Template	Description
`ws-slidedownup-black.htm`	Black Text with Slide Effects
`ws-slidedownup-white.htm`	White Text with Slide Effects

Typing Effects¶

Typewriter effects with realistic mistakes using Typed.js

Template	Description
`ws-typing-terminal.htm`	Terminal-style typing effect with mistakes
`ws-typing-matrix.htm`	Matrix-style green typing effect
`ws-typing-amber.htm`	Amber terminal typing effect
`ws-typing-classic.htm`	Classic typewriter effect on paper

Static Templates¶

Basic Websocket¶

Basic WebSocket templates with real-time updates

Template	Description
`ws-basic-web.htm`	Basic WebSocket Display
`ws-cover-title-artist.htm`	Cover, Title, Artist WebSocket Display