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.

Overlay components such as StatsPanel, LilGui, and ResourcesList must not initialise when a sketch is rendered inside a dashboard preview card — the card renders the sketch in an <iframe>, and showing performance panels or GUI controls there would clutter the thumbnail and waste resources. useIsPreview centralises the iframe detection so every overlay component uses the same check, rather than each one inlining a slightly different version of the guard expression.

​
Signature

export function useIsPreview(): ComputedRef<boolean>
Returns a ComputedRef<boolean> that is true when window.self !== window.top — that is, when the current page is loaded inside an iframe. A typeof window guard wraps the check so the composable is safe to call in SSR or non-browser environments without throwing a ReferenceError.

​
Usage Example

import { useIsPreview } from '@/composables/useIsPreview'

const isPreview = useIsPreview()

onMounted(() => {
  if (isPreview.value) return // skip overlay initialization in preview cards

  // ... initialize StatsPanel, lil-gui, resource links, etc.
})

​
Who Uses It

StatsPanel, LilGui, and ResourcesList all call useIsPreview() at the top of their <script setup> block and return early from onMounted when isPreview.value is true. This ensures that dashboard preview cards show a clean, unobstructed rendering of the sketch with no overlay UI.
Do not inline window.self !== window.top directly in your sketch components or overlay tools. Use useIsPreview() so the iframe detection is consistent, SSR-safe, and easy to update in one place if the dashboard embedding strategy changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us