Example – a JSON tree viewer

In this section, we will walk you through building a JSON tree viewer component in Svelte. The JSON tree viewer component helps you visualize JSON data in a tree-like format. Along the way, we’ll make use of some of the advanced Svelte features we’ve covered in this chapter, including <svelte:self>, <svelte:component>, and slots.

Before we start, let’s think about what our JSON Tree Viewer should look like and how it should behave. Essentially, a JSON object is made up of key-value pairs, where the values can be either primitives, arrays, or other nested objects. Our goal is to display these key-value pairs in a way that clearly represents the hierarchical structure of the JSON object.

So, let’s create a JsonTree component for our JSON tree viewer:

<!-- filename: JsonTree.svelte -->
<script>
  export let data;
</script>
<ul>
  {#each Object.entries(data)...