Modular

Modular architecture makes Codespark highly flexible and extendable. You can combine different components to customize your own Codespark, or use individual components as needed.

Components

import {
  CodesparkEditor,
  CodesparkFileExplorer,
  CodesparkPreview,
  CodesparkProvider
} from '@codespark/react';

CodesparkProvider

CodesparkProvider is a bridge that connects the editor and preview components, managing the state of the entire module. If you want to use the out-of-the-box Edit → Preview live preview capability, wrap the editor and preview components with CodesparkProvider.

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

CodesparkEditor

CodesparkEditor is a code editor with syntax highlighting built on CodeMirror. You can also use Monaco as the editor engine. See the Monaco documentation for details.

CodesparkPreview

CodesparkPreview is a secure and isolated sandbox with rendering capabilities. It runs in an independent iframe environment and never affects the host code, ensuring code isolation. Simply pass the code to preview and the component will be rendered on the page.

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

CodesparkFileExplorer

CodesparkFileExplorer is a component for displaying the current file tree. It must be placed inside a CodesparkProvider to work.

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

const workspace = new Workspace({
  entry: './App.tsx',
  files: {
    './App.tsx': '',
    './src/index.ts': '',
    './components/button.tsx': '',
    './components/input.tsx': ''
  }
});

export default function App() {
  return (
    <CodesparkProvider workspace={workspace}>
      <div className="flex justify-center">
        <CodesparkFileExplorer />
      </div>
    </CodesparkProvider>
  );
}

Custom Layouts

Combine components freely to create your own custom editor experience:

• Vertical layout: Stack editor and preview top-to-bottom
• Horizontal layout: Place editor and preview side-by-side
• Tabbed layout: Switch between editor and preview with tabs
• Three-column layout: Add file explorer alongside editor and preview
• Preview-only mode: Display just the preview for read-only demos