Sandbox

Six independently deployable sandboxes exercise the same public Orbz API. They intentionally share the same layout, labels, controls, defaults, and pure CSS presentation. Only the framework integration changes.

The showcase domains are deployment targets. DNS and production deployment are managed separately from this documentation scaffold.

What every sandbox demonstrates

• all five states and their distinct motion profiles
• size and speed controls
• pause, elevation, and reduced-motion behavior
• six built-in presets
• a strict five-color custom palette
• switching cleanly between preset mode and custom-color mode
• framework-native state controlling the same <orb-z> contract
• semantic status text outside the closed Shadow DOM

The identical UI is part of the demonstration: adopting a web component should not produce a different product merely because one surface uses Vue and another uses React.

Run the sandbox workspace

From the repository root:

pnpm install --frozen-lockfile
pnpm build

pnpm build builds all six applications against the published Orbz package. Start every development server together with the root showcase command:

pnpm showcase

Each sandbox uses the port shown in the table, so all six can run at the same time without competing for one address.

Deploy as separate Vercel projects

Create one Vercel project per sandbox and select the corresponding sandbox folder as that project’s Root Directory:

sandbox/vanilla
sandbox/react
sandbox/vue
sandbox/svelte
sandbox/angular
sandbox/next

Every sandbox is private, has its own framework dependencies and build configuration, and includes a local vercel.json. The sandboxes are repository tooling and showcases; they are not included in the npm package.

Each showcase consumes the exact published Orbz version as an ordinary application dependency. It must never import the package’s src/ directory or another sandbox application.

Compare integrations, not designs

Use the sandboxes to answer framework-specific questions:

• Where does browser registration belong?
• How does this framework bind boolean custom-element attributes?
• Which compiler setting recognizes orb-z?
• How does TypeScript obtain OrbzState and OrbzElement?
• Where should a React/Next client boundary begin?

For compact recipes, see Framework recipes. For independently deployed, mixed-framework surfaces, see Orbz in microfrontends.