---
format: typebulb/v1
name: Spotify Data Parsing
---

**code.tsx**

```tsx
import React from "react";
import { createRoot } from "react-dom/client"

interface SpotifyArtist {
  name: string;
  external_urls: { spotify: string };
}

interface SpotifyImage {
  url: string;
  height: number;
  width: number;
}

interface SpotifyTrack {
  id: string;
  name: string;
  track_number: number;
  duration_ms: number;
  explicit: boolean;
  artists: SpotifyArtist[];
}

interface SpotifyAlbum {
  name: string;
  album_type: string;
  release_date: string;
  total_tracks: number;
  images: SpotifyImage[];
  artists: SpotifyArtist[];
  tracks: {
    items: SpotifyTrack[];
  };
}

function formatDuration(ms: number) {
  const minutes = Math.floor(ms / 60000);
  const seconds = ((ms % 60000) / 1000).toFixed(0);
  return `${minutes}:${Number(seconds) < 10 ? '0' : ''}${seconds}`;
}

function App() {
  const data = React.useMemo(() => {
    try {
      return tb.json<SpotifyAlbum>(0);
    } catch (e) {
      console.error("Failed to parse data", e);
      return null;
    }
  }, []);

  if (!data) {
    return <div className="container">Error loading album data.</div>;
  }

  const mainArtist = data.artists[0];
  const coverArt = data.images[0]?.url;
  const releaseYear = new Date(data.release_date).getFullYear();

  return (
    <div className="container">
      <header className="album-header">
        <img src={coverArt} alt={data.name} className="album-art" />
        <div className="album-info">
          <div className="album-meta" style={{ textTransform: 'uppercase', fontSize: '0.75rem', marginBottom: '0.5rem' }}>
            {data.album_type}
          </div>
          <h1>{data.name}</h1>
          <div className="album-meta">
            <a href={mainArtist.external_urls.spotify} className="artist-link" target="_blank" rel="noreferrer">
              {mainArtist.name}
            </a>
            <span className="meta-separator">{releaseYear}</span>
            <span className="meta-separator">{data.total_tracks} songs</span>
          </div>
        </div>
      </header>

      <div className="tracklist">
        {data.tracks.items.map((track) => (
          <div key={track.id} className="track-item">
            <div className="track-number">{track.track_number}</div>
            <div className="track-main">
              <div className="track-name">
                {track.name}
                {track.explicit && <span className="explicit-badge">E</span>}
              </div>
              <div className="track-artist">
                {track.artists.map(a => a.name).join(", ")}
              </div>
            </div>
            <div className="track-duration">
              {formatDuration(track.duration_ms)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

const container = document.getElementById("root")
const root = createRoot(container!)
root.render(<App />)
```
**styles.css**

```css

:root {
  --bg: #ffffff;
  --text: #121212;
  --text-dim: #535353;
  --accent: #1db954;
  --card-bg: #f8f8f8;
  --border: #e0e0e0;
}

html[data-theme="dark"] {
  --bg: #121212;
  --text: #ffffff;
  --text-dim: #b3b3b3;
  --accent: #1db954;
  --card-bg: #181818;
  --border: #282828;
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.album-header {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  align-items: flex-end;
}

.album-art {
  width: 232px;
  height: 232px;
  box-shadow: 0 4px 60px rgba(0,0,0,0.5);
  object-fit: cover;
}

.album-info h1 {
  font-size: 3rem;
  margin: 0 0 0.5rem 0;
  font-weight: 800;
}

.album-meta {
  font-size: 0.9rem;
  font-weight: 600;
}

.artist-link {
  color: var(--text);
  text-decoration: none;
}

.artist-link:hover {
  text-decoration: underline;
}

.meta-separator::before {
  content: " • ";
  color: var(--text-dim);
}

.tracklist {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.track-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  align-items: center;
  gap: 1rem;
}

.track-item:hover {
  background-color: var(--card-bg);
}

.track-number {
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.track-main {
  display: flex;
  flex-direction: column;
}

.track-name {
  font-weight: 500;
}

.track-artist {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.track-duration {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.explicit-badge {
  background: var(--text-dim);
  color: var(--bg);
  font-size: 0.6rem;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: 4px;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .album-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .album-info h1 {
    font-size: 2rem;
  }
}
```
**index.html**

```html
<div id="root"></div>
```
**data.txt**

```txt
{
  "album_type": "album",
  "total_tracks": 18,
  "external_urls": {
    "spotify": "https://open.spotify.com/album/6LZiNXaDvhzvnXUubVOmNU"
  },
  "href": "https://api.spotify.com/v1/albums/6LZiNXaDvhzvnXUubVOmNU?market=US&locale=en-US%2Cen-GB%3Bq%3D0.9%2Cen%3Bq%3D0.8",
  "id": "6LZiNXaDvhzvnXUubVOmNU",
  "images": [
    {
      "url": "https://i.scdn.co/image/ab67616d0000b2739effb26eea559ce6f3fed751",
      "height": 640,
      "width": 640
    },
    {
      "url": "https://i.scdn.co/image/ab67616d00001e029effb26eea559ce6f3fed751",
      "height": 300,
      "width": 300
    },
    {
      "url": "https://i.scdn.co/image/ab67616d000048519effb26eea559ce6f3fed751",
      "height": 64,
      "width": 64
    }
  ],
  "name": "Music Has The Right To Children",
  "release_date": "1998-04-20",
  "release_date_precision": "day",
  "type": "album",
  "uri": "spotify:album:6LZiNXaDvhzvnXUubVOmNU",
  "artists": [
    {
      "external_urls": {
        "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
      },
      "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
      "id": "2VAvhf61GgLYmC6C8anyX1",
      "name": "Boards of Canada",
      "type": "artist",
      "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
    }
  ],
  "tracks": {
    "href": "https://api.spotify.com/v1/albums/6LZiNXaDvhzvnXUubVOmNU/tracks?offset=0&limit=50&market=US&locale=en-US,en-GB;q%3D0.9,en;q%3D0.8",
    "limit": 50,
    "next": null,
    "offset": 0,
    "previous": null,
    "total": 18,
    "items": [
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 75626,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/1XZdwzd8DTDvkjVc0eJ9BI"
        },
        "href": "https://api.spotify.com/v1/tracks/1XZdwzd8DTDvkjVc0eJ9BI",
        "id": "1XZdwzd8DTDvkjVc0eJ9BI",
        "is_playable": true,
        "name": "Wildlife Analysis",
        "preview_url": null,
        "track_number": 1,
        "type": "track",
        "uri": "spotify:track:1XZdwzd8DTDvkjVc0eJ9BI",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 385520,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/7sAzXuEwz0sOhnB57xoccs"
        },
        "href": "https://api.spotify.com/v1/tracks/7sAzXuEwz0sOhnB57xoccs",
        "id": "7sAzXuEwz0sOhnB57xoccs",
        "is_playable": true,
        "name": "An Eagle In Your Mind",
        "preview_url": null,
        "track_number": 2,
        "type": "track",
        "uri": "spotify:track:7sAzXuEwz0sOhnB57xoccs",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 105626,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/0sgzC3F93Dh76Yfj5gNUkT"
        },
        "href": "https://api.spotify.com/v1/tracks/0sgzC3F93Dh76Yfj5gNUkT",
        "id": "0sgzC3F93Dh76Yfj5gNUkT",
        "is_playable": true,
        "name": "The Color Of The Fire",
        "preview_url": null,
        "track_number": 3,
        "type": "track",
        "uri": "spotify:track:0sgzC3F93Dh76Yfj5gNUkT",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 395480,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/7AfbtT8GN1iv3Crb11NaVI"
        },
        "href": "https://api.spotify.com/v1/tracks/7AfbtT8GN1iv3Crb11NaVI",
        "id": "7AfbtT8GN1iv3Crb11NaVI",
        "is_playable": true,
        "name": "Telephasic Workshop",
        "preview_url": null,
        "track_number": 4,
        "type": "track",
        "uri": "spotify:track:7AfbtT8GN1iv3Crb11NaVI",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 110413,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/5sW2mFMpTFNR5pTNfzG0Ox"
        },
        "href": "https://api.spotify.com/v1/tracks/5sW2mFMpTFNR5pTNfzG0Ox",
        "id": "5sW2mFMpTFNR5pTNfzG0Ox",
        "is_playable": true,
        "name": "Triangles & Rhombuses",
        "preview_url": null,
        "track_number": 5,
        "type": "track",
        "uri": "spotify:track:5sW2mFMpTFNR5pTNfzG0Ox",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 348346,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/2A6YNzhnvSgaqkJzDjtVyf"
        },
        "href": "https://api.spotify.com/v1/tracks/2A6YNzhnvSgaqkJzDjtVyf",
        "id": "2A6YNzhnvSgaqkJzDjtVyf",
        "is_playable": true,
        "name": "Sixtyten",
        "preview_url": null,
        "track_number": 6,
        "type": "track",
        "uri": "spotify:track:2A6YNzhnvSgaqkJzDjtVyf",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 307880,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/7F3MjS1b1xHeaeXyBTvCE0"
        },
        "href": "https://api.spotify.com/v1/tracks/7F3MjS1b1xHeaeXyBTvCE0",
        "id": "7F3MjS1b1xHeaeXyBTvCE0",
        "is_playable": true,
        "name": "Turquoise Hexagon Sun",
        "preview_url": null,
        "track_number": 7,
        "type": "track",
        "uri": "spotify:track:7F3MjS1b1xHeaeXyBTvCE0",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 59293,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/3FJ4suZo6FuW0xmARmE0R4"
        },
        "href": "https://api.spotify.com/v1/tracks/3FJ4suZo6FuW0xmARmE0R4",
        "id": "3FJ4suZo6FuW0xmARmE0R4",
        "is_playable": true,
        "name": "Kaini Industries",
        "preview_url": null,
        "track_number": 8,
        "type": "track",
        "uri": "spotify:track:3FJ4suZo6FuW0xmARmE0R4",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 95973,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/7keJ7uDxNNp2RFx91ZgWpc"
        },
        "href": "https://api.spotify.com/v1/tracks/7keJ7uDxNNp2RFx91ZgWpc",
        "id": "7keJ7uDxNNp2RFx91ZgWpc",
        "is_playable": true,
        "name": "Bocuma",
        "preview_url": null,
        "track_number": 9,
        "type": "track",
        "uri": "spotify:track:7keJ7uDxNNp2RFx91ZgWpc",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 149080,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/5Hf2h59YLInKlic7ooWZVd"
        },
        "href": "https://api.spotify.com/v1/tracks/5Hf2h59YLInKlic7ooWZVd",
        "id": "5Hf2h59YLInKlic7ooWZVd",
        "is_playable": true,
        "name": "Roygbiv",
        "preview_url": null,
        "track_number": 10,
        "type": "track",
        "uri": "spotify:track:5Hf2h59YLInKlic7ooWZVd",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 399493,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/4Wc2IIL5jGE1V9NkxS9OL3"
        },
        "href": "https://api.spotify.com/v1/tracks/4Wc2IIL5jGE1V9NkxS9OL3",
        "id": "4Wc2IIL5jGE1V9NkxS9OL3",
        "is_playable": true,
        "name": "Rue The Whirl",
        "preview_url": null,
        "track_number": 11,
        "type": "track",
        "uri": "spotify:track:4Wc2IIL5jGE1V9NkxS9OL3",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 358080,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/08EgS4Nqe1jPkI9tx9Dq3S"
        },
        "href": "https://api.spotify.com/v1/tracks/08EgS4Nqe1jPkI9tx9Dq3S",
        "id": "08EgS4Nqe1jPkI9tx9Dq3S",
        "is_playable": true,
        "name": "Aquarius",
        "preview_url": null,
        "track_number": 12,
        "type": "track",
        "uri": "spotify:track:08EgS4Nqe1jPkI9tx9Dq3S",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 91706,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/5DZ4M3yMat79ok25rZHuA9"
        },
        "href": "https://api.spotify.com/v1/tracks/5DZ4M3yMat79ok25rZHuA9",
        "id": "5DZ4M3yMat79ok25rZHuA9",
        "is_playable": true,
        "name": "Olson",
        "preview_url": null,
        "track_number": 13,
        "type": "track",
        "uri": "spotify:track:5DZ4M3yMat79ok25rZHuA9",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 367720,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/1U9svUekJ1Hp4sLy9HOqj9"
        },
        "href": "https://api.spotify.com/v1/tracks/1U9svUekJ1Hp4sLy9HOqj9",
        "id": "1U9svUekJ1Hp4sLy9HOqj9",
        "is_playable": true,
        "name": "Pete Standing Alone",
        "preview_url": null,
        "track_number": 14,
        "type": "track",
        "uri": "spotify:track:1U9svUekJ1Hp4sLy9HOqj9",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 187320,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/2GFE4jzz9fqolm1J3unXIB"
        },
        "href": "https://api.spotify.com/v1/tracks/2GFE4jzz9fqolm1J3unXIB",
        "id": "2GFE4jzz9fqolm1J3unXIB",
        "is_playable": true,
        "name": "Smokes Quantity",
        "preview_url": null,
        "track_number": 15,
        "type": "track",
        "uri": "spotify:track:2GFE4jzz9fqolm1J3unXIB",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 265026,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/6YKnA7JgJsvnd1gKD3vdED"
        },
        "href": "https://api.spotify.com/v1/tracks/6YKnA7JgJsvnd1gKD3vdED",
        "id": "6YKnA7JgJsvnd1gKD3vdED",
        "is_playable": true,
        "name": "Open The Light",
        "preview_url": null,
        "track_number": 16,
        "type": "track",
        "uri": "spotify:track:6YKnA7JgJsvnd1gKD3vdED",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 85053,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/1zo4sobFM7e95KevSJzXfZ"
        },
        "href": "https://api.spotify.com/v1/tracks/1zo4sobFM7e95KevSJzXfZ",
        "id": "1zo4sobFM7e95KevSJzXfZ",
        "is_playable": true,
        "name": "One Very Important Thought",
        "preview_url": null,
        "track_number": 17,
        "type": "track",
        "uri": "spotify:track:1zo4sobFM7e95KevSJzXfZ",
        "is_local": false
      },
      {
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/2VAvhf61GgLYmC6C8anyX1"
            },
            "href": "https://api.spotify.com/v1/artists/2VAvhf61GgLYmC6C8anyX1",
            "id": "2VAvhf61GgLYmC6C8anyX1",
            "name": "Boards of Canada",
            "type": "artist",
            "uri": "spotify:artist:2VAvhf61GgLYmC6C8anyX1"
          }
        ],
        "disc_number": 1,
        "duration_ms": 476026,
        "explicit": false,
        "external_urls": {
          "spotify": "https://open.spotify.com/track/55IsBrXUfZUmY7KSm2BjUp"
        },
        "href": "https://api.spotify.com/v1/tracks/55IsBrXUfZUmY7KSm2BjUp",
        "id": "55IsBrXUfZUmY7KSm2BjUp",
        "is_playable": true,
        "name": "Happy Cycling",
        "preview_url": null,
        "track_number": 18,
        "type": "track",
        "uri": "spotify:track:55IsBrXUfZUmY7KSm2BjUp",
        "is_local": false
      }
    ]
  },
  "copyrights": [
    {
      "text": "1998 Warp Records",
      "type": "C"
    },
    {
      "text": "1998 Warp Records",
      "type": "P"
    }
  ],
  "external_ids": {
    "upc": "0801061005535"
  },
  "genres": [],
  "label": "Warp Records",
  "popularity": 59,
  "is_playable": true
}
```
**config.json**

```json
{
  "dependencies": {
    "react": "^19.2.3",
    "react-dom": "^19.2.3"
  },
  "description": "Spotify data parsing example. Typebulb gives the AI assistant a summarized view of the data tab. This ensures the AI sees the *structure* of the data without wasting its context window. AIs are inc..."
}
```