ResizableIDELayout

VS Code-like layout composing explorer, editor, preview, and console.

bunx --bun shadcn@latest add https://shadcn-sandbox.vercel.app/r/resizable-ide-layout.json

Preview

counter-demo

app/page.tsx

TSX

Preview

Console

10:00:01[next]Dev server ready on http://localhost:3000

10:00:02[compiler]Compiling / ...

10:00:03[compiler]Compiled successfully in 412ms

10:00:05[hmr]Fast Refresh had to perform a full reload.

10:00:08[runtime]TypeError: Cannot read properties of undefined (reading 'count')

import { ResizableIDELayout } from "@/components/sandbox/resizable-ide-layout";

export function PlaygroundShell() {
  return (
    <ResizableIDELayout
      fileTree={<FileTree {...fileTreeProps} />}
      editor={<CodeEditor {...editorProps} />}
      preview={<PreviewFrame {...previewProps} />}
      console={<ConsolePanel {...consoleProps} />}
    />
  );
}