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.

multiPanelFrom

Forces only 1 panel to be shown at a time depending on container width:

• Available values:
  none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
• The value determines the minimum container width to allow showing multiple panels, for that tailwindcss-container-queries is used.
• The additional value none enforces only 1 panel regardless of container width.
• If no value or undefined is provided, then showing multiple panels is always allowed.
• In single-panel mode the first panel from shown-panels is initially shown. After that, the latest toggled panel is shown.

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.

Full example code