`plvy-list` is a web component.

Install through npm: npm i plvylist.
Import from something like Skypack: <script type="module" src="https://cdn.skypack.dev/plvylist"></script>.

Import (if installed with npm) or add the script (if installed manually) to your page, then place the element <plvy-list file="path/to/tracks.json"></plvy-list> wherever you want it.

The only required HTML attribute for Plvylist to work is file which accepts a path to a .json file describing your tracks: file="path/to/tracks.json". The syntax for the file is as follows:

{
  "tracks": [
    {
      "file": "path/to/song.mp3",
      "title": "Song Name",
      "artist": "Artist Name",
      "artistUrl": "https://www.artist.com",
      "album": "Album/Collection Name",
      "albumUrl": "https://www.album.com",
      "artwork": "path/to/artwork.jpg"
    }
  ]
}

Each key aside from file is optional and will default to placeholders if they aren't provided.

View the demo or the documentation.

`plvy-list` is a web component.

Demo

Documentation