Awesome

Svelte Zoomable UI

This is a component for providing UI that can zoom into different levels of detail.

More docs coming soon, but you can see some Svelte REPL examples to get a good idea of how it works:

• Zoomable Grid
• Flex Layouts

<script>
  let zoomManager;
</script>

<h3><Breadcrumbs {zoomManager} /></h3>
<ZoomableContainer bind:zoomManager>
  {#each data as item}
    <Zoomable id={item.id} title={item.title}>
      <div slot="overview">
        Content when the item is zoomed out
      </div>
      
      <div slot="detail">
        Content when the item is zoomed in. This can contain additional Zoomables for more levels of nesting.
      </div>
    </Zoomable>
  {/each}
</ZoomableContainer>