Props and Events
Props
Aside from the panel models, KrgzSandbox accepts some flags to adjust the visibility of some features:
booting
When passed as true, shows a loading indicator. It is important to pass it to avoid rendering panels before the WebContainer is ready.
hideExplorer
When passed as true, hides file explorer (e.g. to only show a specific set of editor tabs).
hideFullScreenToggle
When passed as true, hides the fullscreen toggle.
hideSolveButton
When passed as true, hides the solve button if it is not needed.
hideThemeToggle
When passed as true, hides the dark/light theme toggle.
Events
Only one event es emitted by KrgzSandbox.
solve
Emitted when the solve button is clicked (if not hidden).
There is no specific way to handle this event, but usually it involves mounting new files or remounting existing files in the WebContainer to show the desired result.
<script setup lang="ts">
const onSolveClick = async () => {
sandbox.container.value?.mount({
public: {
directory: {
"about.html": {
file: {
contents: "..."
}
},
"index.html": {
file: {
contents: "..."
}
}
}
}
})
}
</script>
<template>
<KrgzSandbox
:booting="isBooting"
@solve="onSolveClick()"
></KrgzSandbox>
</template>
In the following example, clicking the solve button loads a remote FileSystemTree from a server endpoint and
mounts it in the WebContainer, changing index.html by adding a top navigation bar and creating and additional page
about.html.