Sandbox

The sandbox component allows you to preview and test components in a sandboxed environment.

Installation

npx love-ui@latest add sandbox

Usage

import { SandboxProvider, SandboxLayout, SandboxTabs, SandboxTabsList, SandboxTabsTrigger, SandboxTabsContent, SandboxCodeEditor, SandboxPreview, SandboxConsole, SandboxFileExplorer } from "@/components/sandbox"

<SandboxProvider template="react" files={{ "/App.js": "export default function App() { return <div>Hello</div> }" }}>
  <SandboxLayout>
    <SandboxFileExplorer />
    <SandboxTabs>
      <SandboxTabsList>
        <SandboxTabsTrigger value="code">Code</SandboxTabsTrigger>
        <SandboxTabsTrigger value="preview">Preview</SandboxTabsTrigger>
        <SandboxTabsTrigger value="console">Console</SandboxTabsTrigger>
      </SandboxTabsList>
      <SandboxTabsContent value="code">
        <SandboxCodeEditor />
      </SandboxTabsContent>
      <SandboxTabsContent value="preview">
        <SandboxPreview />
      </SandboxTabsContent>
      <SandboxTabsContent value="console">
        <SandboxConsole />
      </SandboxTabsContent>
    </SandboxTabs>
  </SandboxLayout>
</SandboxProvider>

Features

Interactive code editor with syntax highlighting and auto-completion
Live preview of your code changes
Built-in console for debugging
File explorer for managing multiple files
Resizable panels for customizing your workspace
Tabs for switching between code, preview, and console views
Support for multiple file types
Real-time error reporting

Examples

Without File Explorer

"use client";

import {
  SandboxCodeEditor,
  SandboxConsole,
  SandboxLayout,
  SandboxPreview,
  SandboxProvider,
  SandboxTabs,
  SandboxTabsContent,
  SandboxTabsList,
  SandboxTabsTrigger,
} from "../../../../../packages/sandbox";
import { AppWindowIcon, CodeIcon, TerminalIcon } from "lucide-react";

const Example = () => (
  <SandboxProvider>
    <SandboxLayout>
      <SandboxTabs defaultValue="preview">
        <SandboxTabsList>
          <SandboxTabsTrigger value="code">
            <CodeIcon size={14} />
            Code
          </SandboxTabsTrigger>
          <SandboxTabsTrigger value="preview">
            <AppWindowIcon size={14} />
            Preview
          </SandboxTabsTrigger>
          <SandboxTabsTrigger value="console">
            <TerminalIcon size={14} />
            Console
          </SandboxTabsTrigger>
        </SandboxTabsList>
        <SandboxTabsContent value="code">
          <SandboxCodeEditor showTabs />
        </SandboxTabsContent>
        <SandboxTabsContent value="preview">
          <SandboxPreview
            showOpenInCodeSandbox={false}
            showRefreshButton={false}
          />
        </SandboxTabsContent>
        <SandboxTabsContent value="console">
          <SandboxConsole />
        </SandboxTabsContent>
      </SandboxTabs>
    </SandboxLayout>
  </SandboxProvider>
);

export default Example;

Editor Snippet