Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt

Use this file to discover all available pages before exploring further.

ResourcesList renders as a compact pill button fixed to the bottom-center of the screen. Clicking it expands a glassmorphic card above the button that lists all the reference links provided via its resources prop. It is useful for crediting tutorial videos, linking to library documentation, or surfacing any external asset used while building a sketch — without permanently occupying screen space.

​
Props

​
resources
string[]
required
An array of fully-qualified URLs to display in the reference panel. Each URL is shown with the https://www. or https:// prefix stripped for readability, but the full URL is used as the anchor href and opens in a new tab.

​
Usage

The example below is taken from the Images / Swiper sketch: 
<template>
  <Default>
    <div ref="pixiRef" />
    <ResourcesList
      :resources="[
        'https://www.youtube.com/watch?v=Q1uNf54jjgU',
        'https://github.com/pixijs/pixijs',
        'https://pixijs.download/dev/docs/filters.html',
      ]"
    />
  </Default>
</template>

​
UI Behavior

The pill button label reads 📖 References [N] ▲, where N is the count of items in the resources array. The ▲ chevron rotates 180° when the panel is open. Clicking the button toggles the reference card with a smooth CSS transition (scale + translate + opacity). The card can be dismissed in three ways:
  • Clicking the ✕ button inside the card header.
  • Pressing the Escape key (detected via VueUse’s useMagicKeys()).
  • Clicking anywhere outside the panel (detected via VueUse’s onClickOutside()).
Each link is rendered as a full-width row inside a scrollable list capped at 160px height. The display text strips the https://www. and https:// prefixes using the regex /https?:\/\/(www\.)?/. An ↗ arrow appears on the right and shifts on hover to reinforce that links open externally.

​
Iframe-aware

ResourcesList calls useIsPreview() during setup and applies a v-if="!isIframe" guard on its root element. When running inside a preview iframe (such as the dashboard’s LazyIframePreview cards), the component renders nothing at all — the button and panel are completely absent from the DOM.

​
Keyboard support

The Escape key is bound using VueUse’s useMagicKeys() composable. A watch on the escape key ref checks whether the panel is currently open before closing it, so the binding doesn’t interfere with other keyboard interactions in the sketch.

Build docs developers (and LLMs) love

Get started for freeTalk to us