StackBlitz

A StackBlitz project with editor and preview.

import { StackBlitz } from 'sveltekit-embed';

Svelte

1<StackBlitz id="vitejs-vite-yyoood" hide_navigation />

id is the project’s name in its URL, after stackblitz.com/edit/.

The project waits for a click before it boots. Pass click_to_load={false} to start it with the page.

Open on a file

Show the editor only, with the file explorer and a particular file open.

Svelte

1<StackBlitz
2	id="vitejs-vite-yyoood"
3	view="editor"
4	file="src/App.svelte"
5	hide_explorer={false}
6/>

Prop	Type	Default
`id` The project ID from its URL, e.g. `vitejs-vite-yyoood`.	`string`	`''`
`view` Open on the editor, the preview or both.	`'editor' \| 'preview' \| 'default'`	`'default'`
`click_to_load` Wait for a click before starting the project.	`boolean`	`true`
`hide_navigation` Hide the preview’s URL bar.	`boolean`	`false`
`hide_explorer` Hide the file explorer.	`boolean`	`true`
`theme` The editor theme.	`'light' \| 'dark' \| 'default' \| string`	`'dark'`
`file` The file to open first.	`string`	–
`width` Any CSS width.	`string`	`'100%'`
`height` Any CSS height.	`string`	`'500px'`
`loading` `lazy` waits until the embed is near the viewport, `eager` loads it straight away.	`'lazy' \| 'eager'`	`'lazy'`
`iframe_styles` Inline styles for the iframe. Defaults to the `height` and `width` props.	`string`	–

Something wrong on this page? Edit it on GitHub.