What is Codespark

Codespark is a React component playground for documentation sites, component libraries, and interactive tutorials.

Why Codespark

Traditional documentation has limitations:

• Static code blocks - Users can only read, not interact
• External sandboxes - Popular playground like CodeSandbox requires context switching
• Manual setup - Each demo needs boilerplate configuration
• Stale examples - Code snippets become outdated without validation

Codespark solves these by providing:

• Live editing - Modify code and see results instantly
• Inline preview - Code and preview side-by-side
• Auto dependency resolution - No manual configuration needed
• Multiple integrations - Works with React, MDX, and markdown

Features

• Modular architecture with highly customizable component styles
• Components using popular TailwindCSS and shadcn/ui as the design system
• Real-time preview with hot reloading
• Automatic dependency resolution via esm.sh
• Monaco Editor with syntax highlighting and IntelliSense
• MDX and remark plugin integration
• Rollup/Vite plugin for build-time processing

How it Works

Codespark transforms your code into a live preview through a streamlined pipeline:

1. User Input - Code changes in the Monaco editor trigger a debounced update

2. Workspace Management - The Workspace class tracks all files and notifies listeners of changes

3. Dependency Analysis - framework.analyze() parses the AST to extract:

   • Internal imports (other files in the workspace)
   • External imports (npm packages resolved via esm.sh)

4. Code Compilation - framework.compile() transforms the code:

   • Converts internal imports to blob URLs
   • Appends React render boilerplate
   • Generates executable ES module code

5. Iframe Communication - PreviewProxy sends compiled code to a sandboxed iframe via postMessage

6. Live Rendering - The iframe executes the code as an ES module and renders the React component

Live Demo

Try editing the code below to see the pipeline in action: