CodesparkPreview

CodesparkPreview is a sandboxed preview component that executes compiled React code in an isolated iframe environment. It supports Tailwind CSS, custom scripts/styles injection, and console output capture.

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

Basic Usage

<CodesparkPreview code="anything you want to preview...">

Props

code

Source code to preview. Used when not providing a workspace instance.

Type	Default	Since
`string`	-	v1.0.0

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

workspace

Workspace instance to use for compilation and file management.

Type	Default	Since
`Workspace`	Inherited from context	v1.0.0

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

const  = new ({
  : './App.tsx',
  : { './App.tsx': 'export default () => <div>Hello</div>' }
});

< ={} />

theme

Theme mode for the preview.

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

< ="dark" />

framework

Framework to use for code analysis and compilation.

Type	Default	Since
`Framework \| (new () => Framework) \| string`	Inherited from context	v1.0.0

import {  } from '@codespark/framework/html';
import {  } from '@codespark/react';

< ={} />

tailwindcss

Whether to enable Tailwind CSS support in the preview.

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

When enabled, you can use any Tailwind CSS class in your preview code.

< ={false} />

preflight

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

Whether to apply preflight styles (base reset, font smoothing, layout defaults) in the preview iframe.

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

html {
  width: 100vw;
  height: 100vh;
  padding: 0;
}

body {
  height: 100%;
  padding: 12px;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
}

#root {
  margin: auto;
}

imports

Custom import map for external dependencies.

Type	Default	Since
`Record<string, string>`	Inherited from context	v1.0.0

< ={{ 'lodash-es': 'https://esm.sh/lodash-es@4.17.21' }} />

height

Height of the preview area in pixels.

Type	Default	Since
`number`	`200`	v1.0.0

< ={300} />

className

CSS class name for the preview container.

Type	Default	Since
`string`	-	v1.0.0

< ="h-full" />

children

Child elements to inject into the preview iframe, such as Script, Style, or Link components.

Type	Default	Since
`ReactNode`	-	v1.0.0

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

<>
  <>{`.custom { color: red; }`}</>
  < ="https://example.com/script.js" />
  < ="stylesheet" ="https://example.com/styles.css" />
</>

See the Style, Script, and Link component documentation for more details.

onError

Callback fired when a runtime error occurs in the preview.

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

<
  ={ => {
    .('Runtime error:', );
  }}
/>

onLoad

Callback fired when the preview iframe is loaded and ready.

Type	Default	Since
`(iframe: HTMLIFrameElement) => void`	-	v1.0.0

<
  ={ => {
    .('Preview loaded:', );
  }}
/>

onRendered

Callback fired when the preview has finished rendering.

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

<
  ={() => {
    .('Render complete');
  }}
/>

onConsole

Callback fired when console methods are called in the preview. Useful for capturing and displaying console output.

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

interface OnConsoleData {
  level: string;    // 'log', 'warn', 'error', 'info', 'debug'
  args: unknown[];  // Arguments passed to console method
  duplicate?: boolean;
}

<
  ={ => {
    .(`[${.}]`, ....);
  }}
/>

On this page