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.

Adding a sketch to the playground is a two-step process: create the Vue component in src/sketches/, then register it in src/config/sketches.ts. Because the playground uses a fully dynamic routing architecture (src/pages/[...all].vue), you never need to create any files inside src/pages/ — the registry entry alone is enough to wire up the route, dashboard card, and preview.
1

Create the sketch component

Create a .vue file at src/sketches/<category>/<sketch-name>/index.vue. The example below uses the useP5 composable to mount a p5.js canvas that follows the mouse cursor:
<script setup lang="ts">
import { tryOnMounted } from '@vueuse/core'
import { useTemplateRef } from 'vue'
import { useP5 } from '@/composables/useP5'
import Default from '@/layouts/default.vue'

const containerRef = useTemplateRef<HTMLElement>('container')
const { mountSketch } = useP5(containerRef)

tryOnMounted(() => {
  mountSketch((p) => {
    p.setup = () => p.createCanvas(p.windowWidth, p.windowHeight)
    p.draw = () => {
      p.background(0)
      p.fill(255)
      p.circle(p.mouseX, p.mouseY, 40)
    }
  })
})
</script>

<template>
  <Default>
    <div ref="container" class="fixed inset-0 size-full" />
  </Default>
</template>
The Default layout provides the standard page shell (dark background, overlay slots). The ref="container" div is the mount target that useP5 attaches the p5 canvas to.
2

Register in SKETCHES

Open src/config/sketches.ts and add an entry to the SKETCHES array. Every field in the SketchMeta interface is required except resources:
// src/config/sketches.ts
{
  id: 'my-category-my-sketch',     // unique slug, used as map key
  title: 'My Sketch',              // display label on dashboard card
  category: 'my-category',        // slash-separated category path
  path: '/my-category/my-sketch', // URL path — no trailing slash
  order: 40,                      // sort order (lower = first)
  previewMode: 'iframe',          // 'iframe' | 'image'
  resources: [                    // optional reference URLs
    'https://example.com/tutorial',
  ],
  component: () => import('@/sketches/my-category/my-sketch/index.vue'),
}
The component field is a dynamic import factory. The playground lazy-loads the sketch module only when the route is visited or the preview card scrolls into view.
3

Open the dashboard

Start the dev server if it isn’t running:
pnpm dev
Navigate to http://localhost:5173. Your sketch card appears automatically in the correct category section, using the previewMode you set. No additional routing configuration is needed.

​
SketchMeta Fields

Every entry in the SKETCHES array must conform to the SketchMeta interface exported from src/config/sketches.ts. The table below documents each field:
FieldTypeDescription
idstringUnique identifier for the sketch. Must be globally unique across all sketches. Used as a stable key when referencing the sketch in tooling and tests.
titlestringHuman-readable display title shown on the dashboard card header.
categorystringSlash-separated category path, e.g. 'gsap/footer'. Controls which dashboard page the sketch appears on and determines the nested route hierarchy.
pathstringFull URL path without trailing slash, e.g. '/shader/learn'. Must match the physical location implied by category + sketch name.
ordernumberSort key; lower numbers sort first on the dashboard. Used by buildDashboardItems() to arrange cards.
previewMode'image' | 'iframe'Controls which preview renderer the dashboard card uses. See Preview Modes for details.
resourcesstring[]Optional array of reference URLs (tutorials, docs, videos) surfaced by the <ResourcesList> overlay component.
component() => Promise<{ default: Component }>Dynamic import factory for the sketch Vue component. Called by [...all].vue when the route is matched.
The category field drives the entire nested dashboard hierarchy. A sketch with category: 'gsap/footer' automatically appears inside the gsap top-level category, then within the footer sub-category — no intermediate route files or category index pages required.

​
Ordering and Sorting

The order field is an integer sort key. Dashboard cards are sorted in ascending order so the sketch with order: 0 appears first. Use gaps between values (0, 10, 20, 30 …) rather than sequential integers so you can insert new sketches between existing ones without renumbering the entire list. 
// Good — room to insert between entries
{ id: 'shader-learn',   order: 0  }
{ id: 'images-swiper',  order: 10 }
{ id: 'gsap-foo',       order: 20 }

// Later you can add order: 5 between 0 and 10
// without touching any other entry
{ id: 'shader-basics',  order: 5  }
Within a given category level, buildDashboardItems() reads the minOrder of all sketches that share the same category prefix to determine how to order category folder cards relative to leaf sketch cards on the same dashboard page.

Build docs developers (and LLMs) love

Get started for freeTalk to us