> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cantae.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Playlist

> All playlists created by you

## How to create a playlist

<Steps>
  <Step title="Create a playlist">
    Click on <span className="text-gray-800 dark:text-white">'Add Playlist'</span> in the button in the menu sidebar
  </Step>

  <Step title="Edit">
    Click on pencil icon over playlist cover to edit the playlist

    <Frame caption="Edit playlist">
      <img className="block border border-black/5 rounded-md dark:border-white/5 dark:hidden" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/edit-playlist-light.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=e0212aeb11ba69459f62077af03f047a" width="711" height="173" data-path="assets/images/edit-playlist-light.png" />

      <img className="hidden border border-black/5 rounded-md dark:border-white/5 dark:block" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/edit-playlist-dark.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=3d37564e3489bfa974fb139aa5f10189" width="705" height="165" data-path="assets/images/edit-playlist-dark.png" />
    </Frame>

    Add playlist name and description and click on <span className="text-gray-800 dark:text-white">'Save'</span> button. If you want to change the playlist cover, click on the pencil icon button.

    <Frame caption="Edit playlist">
      <img className="block border border-black/5 rounded-md dark:border-white/5 dark:hidden" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/edit-playlist-modal-light.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=c3c893ccb06b99123450e7be2924e569" width="436" height="326" data-path="assets/images/edit-playlist-modal-light.png" />

      <img className="hidden border border-black/5 rounded-md dark:border-white/5 dark:block" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/edit-playlist-modal-dark.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=563280822ad2bb42735415849b383ef7" width="440" height="321" data-path="assets/images/edit-playlist-modal-dark.png" />
    </Frame>
  </Step>

  <Step title="Add Songs">
    Click on <span className="text-gray-800 dark:text-white">'Add Songs'</span> button to add songs to the playlist

    <Frame caption="Add songs to playlist">
      <img className="block border border-black/5 rounded-md dark:border-white/5 dark:hidden" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/add-song-playlist-light.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=23521b25efac5f345b765e7782fac3d3" width="436" height="517" data-path="assets/images/add-song-playlist-light.png" />

      <img className="hidden border border-black/5 rounded-md dark:border-white/5 dark:block" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/add-song-playlist-dark.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=7ff88fea5f5a51013364aab1102d5da4" width="435" height="512" data-path="assets/images/add-song-playlist-dark.png" />
    </Frame>
  </Step>

  <Step title="Remove Songs">
    Click on <span className="text-gray-800 dark:text-white">'•••'</span> more actions button to remove songs from the playlist

    <Frame caption="More actions">
      <img className="block border border-black/5 rounded-md dark:border-white/5 dark:hidden" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/remove-song-playlist-light.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=7ec594f8c28899b0cccad31b78809b7f" width="770" height="233" data-path="assets/images/remove-song-playlist-light.png" />

      <img className="hidden border border-black/5 rounded-md dark:border-white/5 dark:block" src="https://mintcdn.com/canta/C5S1j4kpUEOg9-Sx/assets/images/remove-song-playlist-dark.png?fit=max&auto=format&n=C5S1j4kpUEOg9-Sx&q=85&s=2a6dbeaa50f57cf5944908a9eec469d5" width="779" height="237" data-path="assets/images/remove-song-playlist-dark.png" />
    </Frame>
  </Step>

  <Step title="Delete Playlist">
    Click on <span className="text-gray-800 dark:text-white">'Delete'</span> button on top to delete the playlist
  </Step>
</Steps>