@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 |
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';