Sandbox

Component for easy embeding CodeSandbox/StackBlitz in your documentation with great performances.

It's using the IntersectionObserver to load when visible in the viewport.

You can either provide a src prop with the URL of the sandbox or a repo prop with the repository name (it will render both CodeSandbox and StackBlitz).

Loading Sandbox...

Props

Props	Type	Default	Description
`src`	`String`	`''`	The URL of the sandbox.
`repo`	`String`	`''`	The repository of the sandbox.
`branch`	`String`	`''`	The branch of the sandbox.
`dir`	`String`	`''`	The directory of the sandbox.
`file`	`String`	`app.vue`	The directory of the sandbox.

Design Tokens

tokens.config.ts

import { defineTheme } from 'pinceau'

export default defineTheme({
  elements: {
    sandbox: {
      backgroundColor: '{elements.surface.primary.backgroundColor}',
      height: '700px',
      fontSize: '{text.3xl.fontSize}',
      lineHeight: '{text.3xl.lineHeight}',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: '{elements.border.secondary.static}',
      borderRadius: '{radii.md}',
    },
  }
})

Edit this page on GitHub

ElementsTooltipA Tooltip is a text-based popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It usually appears after a short delay and disappears either when the Escape key is pressed or when the mouse pointer moves away from the element.ElementsVideo PlayerA component to playback the video content. It lazy loads native video or iframe depending on video source, and shows image preview when it's not loaded.