Working with Panels

Existing Panels

Karagöz Sandbox provides 4 panels:

1. Code: renders the file explorer (if not hidden) and the currently open editors.
2. Result: renders the preview frame and the address bar (if enabled).
3. Processes: renders currently running and finished processes.
4. Terminals: renders the open shell terminals (jsh — a custom shell that comes out of the box with WebContainer API).

The panels are controlled through 2 models of KrgzSandbox:

• availablePanels: controls which panels are available to the user, which in turn means which toggles to show to the user so they can show and hide panels.
  Default: ['code', 'processes', 'result', 'terminal'] (all panels are available).
• shownPanels: controls which panels to show initially.
  Default: ['code', 'result'].

<!-- show toggles for all panels and show all panels initially -->
<KrgzSandbox
        :available-panels="['code', 'processes', 'result', 'terminal']"
        :shown-panels="['code', 'processes', 'result', 'terminal']"
/>

<!-- show toggles for "code" and "result" and show only the "result" panel initially -->
<KrgzSandbox
        :available-panels="['code', 'result']"
        :shown-panels="['result']"
/>

Panel Components

KrgzSandbox renders the panel contents in slots as follows:

These components get all they need to operate by calling useKaragozSandbox(), which is why they take no props (with the exception of the mode prop of KrgzProcessTabs).

This gives more flexibility, allowing the following scenarios:

Replacing Panels

You can replace any or all of the panel components and still use the structure provided by KrgzSandbox, retaining its functionality (toggles, resizable panels, additional function buttons).

<KrgzSandbox>
  <template #explorer>
    <MyExplorer />
  </template>
  <template #editor>
    <MyEditor />
  </template>
  <template #preview>
    <MyPreview />
  </template>
  <template #processes>
    <MyProcesses />
  </template>
  <template #terminal>
    <MyTerminal />
  </template>
</krgzSandbox>

For a practical example let's replace the default explorer with a simple list to edit an HTML file, a JavaScript file and CSS file.

<script setup lang="ts">
const { boot, isBooting } = useSandboxBoot()
provideWebContainer(boot)

const sandbox = useSandbox()

// ... omitted for readability 
</script>

<template>
  <KrgzSandbox :booting="isBooting" hide-solve-button>
    <template #explorer>
      <div class="p-1 text-sm">
        Your files:
        <ul class="list-disc list-inside">
          <li>
            <a @click.prevent="sandbox.editorTabs.open('./public/index.html')">HTML</a>
          </li>
          <li>
            <a @click.prevent="sandbox.editorTabs.open('./public/script.js')">JS</a>
          </li>
          <li>
            <a @click.prevent="sandbox.editorTabs.open('./public/style.css')">CSS</a>
          </li>
        </ul>
      </div>
    </template>
  </KrgzSandbox>
</template>

Full example code

Replacing KrgzSandbox Itself

You can also utilise the provided panel components without sticking to the default layout and functionality provided by KrgzSandbox.

The following example renders the editor and the result in a simple div element without using KrgzSandbox.

<template>
  <div class="grid grid-cols-2 h-full">
    <div class="border-r">
      <KrgzEditorTabs v-if="!isBooting" />
    </div>
    <div>
      <KrgzPreview v-if="!isBooting" />
    </div>
  </div>
</template>

Full example code