StackBlitz
Less than 1 minute
Embed StackBlitz demo in Markdown files.
Demo
A StackBlitz project
<StackBlitz id="vuepress-theme-hope" />
A StackBlitz project with custom settings
<StackBlitz id="vuepress-theme-hope" hideExplorer hideNavigation hideDevtools />
Props
id
- Type:
string - Required: Yes
StackBlitz id
type
- Type:
"project" | "github" - Default:
"project"
Type of StackBlitz project.
width
- Type:
string | number - Default:
100%
Stackblitz component width.
height
- Type:
string | number - Required: No
Stackblitz component height
ratio
- Type:
number - Default:
16 / 9
Stackblitz component ratio, ONLY valid when height not set.
file
- Type:
string[] | string - Required: No
The default file to have open in the editor.
initialPath
- Type:
string - Required: No
The initial URL path the preview should open.
embed
- Type:
boolean - Default:
false
Embed StackBlitz editor instead of displaying a button.
load
- Type:
boolean - Default:
false
Whether load embed demo directly. (Only available with embed)
theme
- Type:
"dark" | "light" - Default:
"dark"
Editor theme. (Only available with embed)
text
- Type:
string - Default:
"Open in StackBlitz"
Text to display on the button. (Only available without embed)
view
- Type:
"default" | "editor" | "preview" - Default:
"preview"
Which view to open by default.
hideExplorer
- Type:
boolean - Default:
false
Hide file explorer panel in embed view.
hideNavigation
- Type:
boolean - Default:
false
Hide navigation panel in embed view.
hideDevtools
- Type:
boolean - Default:
false
Hide the debugging console in the editor preview.