@miosa/react, @miosa/vue, and @miosa/svelte are drop-in component libraries that let you embed live MIOSA sandboxes directly in your own frontend — no iframe glue code, no WebSocket wiring, no API plumbing.
Each package ships four production-ready components:
| Component | What it renders |
|---|---|
<MiosaPreview> | A sandboxed iframe showing your sandbox’s HTTP preview URL |
<MiosaTerminal> | A full xterm.js terminal connected to a sandbox PTY over WebSocket |
<MiosaFileTree> | An interactive file browser backed by the sandbox filesystem |
<MiosaUsage> | A usage summary widget (compute seconds, storage, egress) per end-user |
The broader MIOSA Foundation component browser lives separately from the drop-in SDK packages. Use Foundation Component Library to inspect the product UI system, design tokens, cleanup rules, and reusable internal components.
Auth model
The recommended pattern for public embeds:
<MiosaPreview> and <MiosaTerminal> both accept a previewToken in place of an apiKey. Tokens are short-lived (1 hour by default) and scoped to a single sandbox.
Which framework package to choose
| If you use… | Install |
|---|---|
| React / Next.js / Remix | @miosa/react |
| Vue 3 / Nuxt 3 | @miosa/vue |
| Svelte 5 / SvelteKit | @miosa/svelte |
The component APIs are structurally identical across all three packages. Prop names, event names, and behavior are the same — only the import path and framework idioms differ.
Install
Also add the stylesheet to your app entry point (React only — Vue and Svelte bundle their own scoped styles):
import '@miosa/react/styles.css';