Codespark

The main component that combines editor and preview into a complete interactive code playground.

Codespark is the all-in-one component that provides a complete code playground experience. It combines a code editor, file explorer, and live preview into a single, easy-to-use component.

import { Codespark } from '@codespark/react';

Basic Usage

The simplest way to use Codespark is to pass your code as a string:

<Codespark code="anything you want to preview..." />;

Props

code

Source code content for single-file mode.

Type	Default	Since
`string`	-	v1.0.0

< ="export default () => <div>Hello</div>" />

files

File mapping for multi-file mode. Each key represents a file path, and the value contains the file content.

Type	Default	Since
`Record<string, string>`	-	v1.0.0

File Name Convention

All file names must start with './' to distinguish between local file dependencies and external package references.

import {  } from '@codespark/react';

const  = {
  './App.tsx': `import { Welcome } from './welcome';

export default function App() {
  return <Welcome />;
}`,
  './welcome.tsx': `export function Welcome() {
  return (
    <div className="text-center">
      <h1 className="text-xl font-bold">Hello World</h1>
      <p>This is my first Codes Park!</p>
    </div>
  );
}`
};

export default function () {
  return < ={} />;
}

name

Entry file path. This is the main file that will be compiled and rendered.

Type	Default	Since
`string`	`'./App.tsx'`	v1.0.0

< ="./index.tsx" ={{ './index.tsx': '...' }} />

framework

Framework to use for code analysis and compilation.

Type	Default	Since
`Framework \| (new () => Framework) \| string`	`'react'`	v1.0.0

Currently supported frameworks:

react - React/JSX components
markdown - Markdown documents
HTML - Pure HTML markup

< ={} />

theme

Theme mode for the editor and preview.

Type	Default	Since
`'light' \| 'dark'`	`'light'`	v1.0.0

< ="dark" />

orientation

Layout orientation of the editor and preview areas.

Type	Default	Since
`'vertical' \| 'horizontal'`	`'vertical'`	v1.0.0

vertical: Preview on top, editor on bottom
horizontal: Editor on left (2/3 width), preview on right (1/3 width)

< ="horizontal" />

imports

Custom import map for external dependencies. Each key represents the module name used in import statements, and the value is a valid esm.sh URL.

Type	Default	Since
`Record<string, string>`	-	v1.0.0

Use this to pin specific package versions or override default package resolutions.

<
  ={`import * as _ from 'lodash-es';`}
  ={{ 'lodash-es': 'https://esm.sh/lodash-es@4.17.21' }}
/>

tailwindcss

Type	Default	Since
`boolean`	`true`	v1.0.0

This prop is passed directly to the CodesparkPreview component. See CodesparkPreview > Props > tailwindcss for usage details.

preflight

Type	Default	Since
`preflight`	`true`	v1.0.1

This prop is passed directly to the CodesparkPreview component. See CodesparkPreview > Props > preflight for usage details.

showEditor

Whether to show the code editor.

Type	Default	Since
`boolean`	`true`	v1.0.0

Set to false to show only the preview area. Useful for documentation where you want to display the result without the editable code.

import {  } from '@codespark/react';

const  = `export default function App() {
  return (
    <div className="flex items-center justify-center">
      <span className="text-lg font-medium">Preview Only Mode</span>
    </div>
  );
}`;

export default function () {
  return < ={} ={false} />;
}

showPreview

Whether to show the preview area.

Type	Default	Since
`boolean`	`true`	v1.0.0

Set to false to show only the code editor. Useful when you want users to write code without seeing the live preview.

import {  } from '@codespark/react';

const  = `export default function App() {
  return <div>Editor Only Mode</div>;
}`;

export default function () {
  return < ={} ={false} />;
}

showFileExplorer

Whether to show the file explorer sidebar.

Type	Default	Since
`boolean`	`true`	v1.0.0

The file explorer appears when you have multiple files. Set to false to hide it even in multi-file mode.

< ={false} />

readonly

Whether to set the editor to read-only mode.

Type	Default	Since
`boolean`	`false`	v1.0.0

When true, users can view but not edit the code. The preview still works normally.

import {  } from '@codespark/react';

const  = `export default function App() {
  return (
    <div className="text-center">
      <h1 className="text-xl font-bold">Read-Only Mode</h1>
      <p className="text-gray-500">Try editing this code - you can't!</p>
    </div>
  );
}`;

export default function () {
  return < ={}  />;
}

defaultExpanded

Whether the file explorer is expanded by default.

Type	Default	Since
`boolean`	Auto (based on file count)	v1.0.0

When not set, the file explorer automatically expands if there are multiple files.

<  />

editorHeight

Height of the editor area.

Type	Default	Since
`string \| number`	`200`	v1.0.0

import {  } from '@codespark/react';

const  = `export default function App() {
  return (
    <div className="text-center">
      <h1 className="text-xl font-bold">Custom Height</h1>
      <p>Editor height is set to 100px</p>
    </div>
  );
}`;

export default function () {
  return < ={} ={100} />;
}

previewHeight

Height of the preview area.

Type	Default	Since
`string \| number`	`200`	v1.0.0

import {  } from '@codespark/react';

const  = `export default function App() {
  return (
    <div className="flex h-full items-center justify-center">
      <span className="text-lg font-medium">Preview height is 100px</span>
    </div>
  );
}`;

export default function () {
  return < ={} ={100} />;
}

className

CSS class name for the container element.

| Type | Default | Since | | ---- | ------- | ----- | v1.0.0 | | string | - |

< ="my-custom-class" />

editor

Editor engine component to use. Supports Monaco Editor or CodeMirror.

Type	Default	Since
`typeof Monaco \| typeof CodeMirror`	`CodeMirror`	v1.0.0

CodeMirror is the default editor and is lighter weight. Monaco provides a more feature-rich experience similar to VS Code.

< ={} />

Monaco Editor

Monaco Editor requires additional setup. See the Monaco Integration guide for details.

toolbox

Type	Default	Since
`boolean \| (ToolboxItemId \| ToolboxItemConfig \| ReactElement)[]`	`['reset', 'format', 'copy']`	v1.0.0

This prop is passed directly to the CodesparkEditor component. See CodesparkEditor > Props > toolbox for usage details.

getWorkspace

Ref to get the Workspace instance for external control.

Type	Default	Since
`RefObject<Workspace \| null>`	-	v1.0.0

Use this to programmatically control the workspace, such as getting/setting files, listening to events, etc.

import {  } from 'react';
import { , type  } from '@codespark/react';

function () {
  const  = < | null>(null);

  const  = () => {
    const  = .;
    if () {
      .(.);
    }
  };

  return (
    <>
      < ={code} ={} />
      < ={}>Get Code</>
    </>
  );
}

See the Workspace API for more details on available methods and events.

children

Type	Default	Since
`ReactNode`	-	v1.0.0

This prop is passed directly to the CodesparkPreview component. See CodesparkPreview > Props > children for usage details.

onConsole

Type	Default	Since
`(data: OnConsoleData) => void`	-	v1.0.0

This prop is passed directly to the CodesparkPreview component. See CodesparkPreview > Props > onConsole for usage details.

onError

Type	Default	Since
`(error: unknown) => void`	-	v1.0.0

This prop is passed directly to the CodesparkPreview component. See CodesparkPreview > Props > onError for usage details.

On this page