File System

Codespark provides a structured file system that supports multi-file previews.

Quick Start

Suppose you want to create a file tree with the following structure:

button.tsx

App.tsx

You can define the files object according to the file hierarchy and pass it to the Codespark component:

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

const files = {
  './App.tsx': '...', // Entry point file
  './components/button.tsx': '...'
};

export default function App() {
  return <Codespark files={files} />;
}

Through Workspace

Creating and managing files through Workspace offers greater flexibility and control. You can create a multi-file system by specifying the entry file and files in the Workspace.

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

const  = new ({ : './App.tsx', : { './App.tsx': '...' } });

< ={} />

File Management

File Tree Structure

The useWorkspace hook provides access to a hierarchical file tree representation:

const { fileTree } = useWorkspace();

// Example fileTree structure:
[
  {
    type: 'file',
    name: 'App.tsx',
    path: './App.tsx',
    code: '...',
    language: 'typescript'
  },
  {
    type: 'folder',
    name: 'components',
    path: 'components',
    children: [
      {
        type: 'file',
        name: 'Button.tsx',
        path: 'components/Button.tsx',
        code: '...',
        language: 'typescript'
      }
    ]
  }
]

Creating and Updating Files

// Create or update a single file
workspace.setFile('./utils.ts', 'export const add = (a, b) => a + b;');

// Create or update multiple files simultaneously
workspace.setFiles({
  './App.tsx': '...',
  './utils.ts': '...',
  './styles.css': '...'
});

Renaming Files

// Rename a single file
workspace.renameFile('./utils.ts', 'helpers.ts');
// Result: ./helpers.ts

// Rename a folder (all nested files are automatically renamed)
workspace.renameFile('src/components', 'ui');
// Example: src/components/Button.tsx → ui/Button.tsx

Deleting Files

// Delete a file
workspace.deleteFile('./utils.ts');

// Delete a folder (all nested files are automatically deleted)
workspace.deleteFile('src/components');

Setting Active File

// Set the currently active file in the editor
workspace.setCurrentFile('./App.tsx');

Interactive Demo

This demo showcases all file management operations. Click the buttons to see each operation in action. Try in playground.

On this page