Skip to main content
Version: 1.0.3

DeveloperPlaygroundLayout

The Developer Playground Layout template provides the shell behind in-browser coding environments (CodeSandbox, StackBlitz, CodePen): a file tab strip above an editor pane, a draggable and keyboard-resizable divider splitting it from a live preview pane, and an optional collapsible console along the bottom. The actual editor and preview content are supplied by the consumer as slots - this component only provides the surrounding shell.

export default function App() {
  return <h1>Hello, playground!</h1>;
}

Hello, playground!

Console

> Compiled successfully.

> Listening on http://localhost:3000

Installation​

ignix add component DeveloperPlaygroundLayout

Usage​

import { DeveloperPlaygroundLayout, type PlaygroundFile } from '@ignix-ui/developer-playground-layout';

Basic Usage​

function App() {
  return (
    <DeveloperPlaygroundLayout
      editor={<CodeEditor />}
      preview={<PreviewFrame />}
    />
  );
}

With File Tabs​

import { useState } from 'react';

const files: PlaygroundFile[] = [{ name: 'App.tsx' }, { name: 'styles.css' }];

function App() {
  const [activeFileName, setActiveFileName] = useState(files[0].name);

  return (
    <DeveloperPlaygroundLayout
      files={files}
      activeFileName={activeFileName}
      onActiveFileChange={setActiveFileName}
      editor={<CodeEditor file={activeFileName} />}
      preview={<PreviewFrame />}
    />
  );
}

With a Console​

import { useState } from 'react';

function App() {
  const [logs, setLogs] = useState(['Compiled successfully.']);

  return (
    <DeveloperPlaygroundLayout
      editor={<CodeEditor />}
      preview={<PreviewFrame />}
      consoleContent={logs.map((log, i) => <p key={i}>{log}</p>)}
      onClearConsole={() => setLogs([])}
    />
  );
}

Vertical Split​

<DeveloperPlaygroundLayout
  orientation="vertical"
  editor={<CodeEditor />}
  preview={<PreviewFrame />}
/>

Controlled Split​

import { useState } from 'react';

function App() {
  const [splitPercentage, setSplitPercentage] = useState(50);

  return (
    <DeveloperPlaygroundLayout
      splitPercentage={splitPercentage}
      onSplitChange={setSplitPercentage}
      editor={<CodeEditor />}
      preview={<PreviewFrame />}
    />
  );
}

Interaction Reference​

InputAction
Drag the dividerResize the editor and preview panes
Arrow keys (divider focused)Nudge the split by 5%
Home / End (divider focused)Snap the split to minSplitPercentage / maxSplitPercentage
Click a file tabSwitch the active file
Console collapse/expand buttonToggle the console panel
Clear console buttonCalls onClearConsole (shown only when both consoleContent and onClearConsole are provided)

Props​

DeveloperPlaygroundLayout​

PropTypeDefaultDescription
headerReact.ReactNodeundefinedCustom node rendered at the start of the top toolbar (e.g. a logo/title)
actionsReact.ReactNodeundefinedOptional node rendered at the end of the top toolbar (e.g. a "Run" button)
filesPlaygroundFile[]undefinedFiles listed in the tab strip; omit to hide the tab strip entirely
activeFileNamestringundefinedControlled active file name; provide alongside onActiveFileChange to drive it externally
onActiveFileChange(name: string) => voidundefinedCalled whenever the active file changes, whether controlled or not
editorReact.ReactNode—Editor content for the currently active file
previewReact.ReactNodeundefinedLive preview content, rendered in the other pane of the split. Omit to hide the divider and preview pane, letting the editor fill the container
consoleContentReact.ReactNodeundefinedContent for the collapsible console panel; omit to hide the console entirely
onClearConsole() => voidundefinedCalled when the clear-console button is clicked. The button only renders when both consoleContent and this callback are provided; clearing the actual content is the consumer's responsibility
showConsolebooleanundefinedControlled console-expanded state; provide alongside onShowConsoleChange to drive it externally
defaultShowConsolebooleantrueInitial console-expanded state when uncontrolled
onShowConsoleChange(show: boolean) => voidundefinedCalled whenever the console's expanded state changes, whether controlled or not
orientation"horizontal" | "vertical""horizontal"Split direction between the editor and preview panes
splitPercentagenumberundefinedControlled editor-pane size as a percentage; provide alongside onSplitChange to drive it externally
defaultSplitPercentagenumber50Initial editor-pane percentage when uncontrolled
onSplitChange(percentage: number) => voidundefinedCalled whenever the split changes, whether controlled or not
minSplitPercentagenumber20Minimum editor-pane percentage
maxSplitPercentagenumber80Maximum editor-pane percentage
classNamestringundefinedAdditional CSS classes applied to the root container. The root fills its parent's height (h-full), not the viewport

PlaygroundFile​

PropTypeDefaultDescription
namestring—File name, shown in its tab
languagestringundefinedOptional language identifier (for consumer-side syntax highlighting)
iconReact.ReactNodeundefinedOptional icon shown in the tab; defaults to a generic file icon