ConfigProvider

ConfigProvider is a global configuration provider that sets default values for theme, imports, font family, and editor engine across all Codespark components in your application.

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

When to Use

Use ConfigProvider when you want to:

• Set a global theme for all Codespark instances
• Define shared import maps for external dependencies
• Configure a default font family for all editors
• Set a default editor engine (Monaco or CodeMirror)

Basic Usage

Wrap your application (or a section of it) with ConfigProvider:

<ConfigProvider theme="dark" fontFamily="JetBrains Mono">
  <Codespark code={code1} />
  <Codespark code={code2} />
  {/* Both instances inherit dark theme and font */}
</ConfigProvider>

Props

theme

Global theme mode for all editors and previews.

<ConfigProvider theme="dark">
  {/* All children use dark theme by default */}
</ConfigProvider>

imports

Global import map for external dependencies. These imports are available to all Codespark instances.

<ConfigProvider
  imports={{
    'lodash-es': 'https://esm.sh/lodash-es@4.17.21',
    'date-fns': 'https://esm.sh/date-fns@3.0.0'
  }}
>
  {/* All children can use these imports */}
</ConfigProvider>

fontFamily

Default font family for all code editors.

<ConfigProvider fontFamily="JetBrains Mono">
  {/* All editors use JetBrains Mono */}
</ConfigProvider>

editor

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

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

<ConfigProvider editor={Monaco}>
  {/* All editors use Monaco by default */}
</ConfigProvider>

children

Child components that will inherit the configuration.

Configuration Hierarchy

Configuration values are inherited in the following order (later values override earlier ones):

1. ConfigProvider - Global defaults
2. CodesparkProvider - Instance-level configuration
3. Component props - Direct props on individual components

<ConfigProvider theme="dark">
  {/* Uses dark theme from ConfigProvider */}
  <Codespark code={code1} />

  <CodesparkProvider theme="light">
    {/* Uses light theme from CodesparkProvider */}
    <CodesparkEditor />
  </CodesparkProvider>

  {/* Uses light theme from direct prop */}
  <Codespark code={code2} theme="light" />
</ConfigProvider>