Vite-based playground for testing and developing Video.js 10 integrations. Each sandbox is a standalone entry point that demonstrates a different platform or scenario.

Sandboxes

Name	Description
`core`	Framework-agnostic core API
`html`	HTML player with skin switching
`html-background`	Full-screen background video (HTML)
`html-tailwind`	HTML player styled with Tailwind CSS
`react`	React player with skin switching
`react-tailwind`	React player styled with Tailwind CSS
`react-background`	Full-screen background video (React)

Getting started

# From the repo root
pnpm dev
# Or just the sandbox
pnpm -F sandbox dev

This runs setup.ts first, which mirrors any missing files from templates/ into src/, then starts the Vite dev server. Open the root URL to see links to all sandboxes.

How it works

The package has two parallel directories:

templates/ — Checked into git. The source of truth for each sandbox's starting point.
src/ — Gitignored (except index.html). Your working copy where you freely edit, experiment, and break things.

On pnpm dev, setup.ts copies any file from templates/ that doesn't already exist in src/. Existing files in src/ are never overwritten, so your local changes are preserved across restarts.

Syncing changes back to templates

When you've made improvements in src/ that should become the new baseline:

pnpm -F sandbox sync

This shows a colored diff of every changed file, then prompts for confirmation before copying src/ changes into templates/. Files that only exist in templates/ are left untouched.

Sync when:

You've fixed a bug or improved a sandbox and want to preserve it for others.
You're preparing a commit — templates are what gets checked in.

Adding a new sandbox

Create a directory in templates/ (e.g. templates/my-feature/).
Add an index.html entry point and a main.ts or main.tsx.
Add a link to your sandbox in templates/index.html.
Register the entry in vite.config.ts under rollupOptions.input.
Run pnpm dev — setup.ts mirrors the new template into src/ automatically.