CodesparkProvider

CodesparkProvider is a context provider that shares workspace state and configuration across child components. Use it when building custom layouts with CodesparkEditor, CodesparkPreview, and CodesparkFileExplorer.

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

When to Use

The all-in-one Codespark component already includes a provider internally. You only need CodesparkProvider when:

• Building a custom layout with separate editor and preview components
• Sharing workspace state across multiple components
• Creating advanced integrations with custom UI

Basic Usage

<CodesparkProvider>
  <CodesparkEditor />
  <CodesparkPreview />
</CodesparkProvider>

Props

workspace

Workspace instance to use for file management and compilation.

If not provided, a default workspace is created with an empty ./App.tsx file.

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

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

<CodesparkProvider workspace={workspace}>
  {/* children */}
</CodesparkProvider>

theme

Theme mode for the editor and preview.

<CodesparkProvider theme="dark">
  {/* children */}
</CodesparkProvider>

framework

Framework to use for code analysis and compilation.

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

<CodesparkProvider framework={html}>
  {/* children */}
</CodesparkProvider>

imports

Custom import map for external dependencies.

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

editor

Default editor engine component to use (Monaco or CodeMirror).

import { CodesparkProvider } from '@codespark/react';
import { Monaco } from '@codespark/react/Monaco';

<CodesparkProvider editor={Monaco}>
  {/* children */}
</CodesparkProvider>

children

Child components that will receive the workspace context.

Layouts

Vertical Layout

Horizontal Layout

Tabbed Layout