A DIFFERENT POINT OF VIEW

Your data. Dressed up.

{#each ['dusk', 'ocean', 'daylight'] as name (name)} (palette = name)} > {#if palette === name} {/each}

workspace.json

READ ONLY

setExpansion(true)}>Expand all setExpansion(false)}>Collapse all

Compact (animateDemo = event.currentTarget.checked)} class="accent-violet-400" /> {reducedMotion.current ? 'Reduced motion' : 'Motion'}

{#snippet row({ id, value, attrs, children })} copyClickedRow(event, id, value)} onkeydown={(event: KeyboardEvent) => { if ( event.target !== event.currentTarget || !['Enter', ' '].includes(event.key) ) return event.preventDefault() event.stopPropagation() void copyValue(id, value) }} initial={false} animate={{ x: motionEnabled && hoveredRow === id ? 2 : 0 }} transition={{ duration: motionEnabled ? 0.15 : 0 }} onpointerover={(event: PointerEvent) => { event.stopPropagation() if (event.pointerType !== 'touch') hoveredRow = id }} onpointerout={(event: PointerEvent) => { event.stopPropagation() // Moving between a row's label and icons is still inside it. if ( event.relatedTarget instanceof Element && event.relatedTarget.closest('.tw-row') === event.currentTarget ) return if (hoveredRow === id) hoveredRow = null }} > {@render children()} {#each ['copied', 'failed'] as status (status)} {#snippet child()} {/snippet} {/each} {/snippet} {#snippet expander({ expanded, hovered, focusVisible })} {/snippet} {#snippet collapsed({ expanded })} {/snippet} {#snippet childGroup({ expanded, attrs, children })} {#snippet child()} {@render children()} {/snippet} {/snippet}

Aa string # number ◐ boolean {'{ }'} container

Click a row to copy · Chevrons to expand · ↑ ↓ ← → to explore