Multi-file Support
Create and manage multi-file projects
Multi-file preview is a core feature of Codespark. You can easily create a multi-file system and manage them.
Files
Pass multiple files as an object to the files prop. Each key represents a file path, and the value contains the file content.
By default, ./App.tsx is used as the entry file.
import { } from '@codespark/react';
const = {
'./App.tsx': `import { Welcome } from './welcome';
export default function App() {
return <Welcome />;
}`,
'./welcome.tsx': `export function Welcome() {
return (
<div className="text-center">
<h1 className="text-xl font-bold">Hello World</h1>
<p>This is my first Codes Park!</p>
</div>
);
}`
};
export default function () {
return < ={} />;
}File Name Convention
All file names must start with './' to distinguish between local file dependencies and external package references.
For example, if you define a file named 'components/button.tsx' without the './' prefix, it becomes ambiguous whether it refers to a local file or an external npm package during import resolution.
Specify the Entry Point
If you want to use a different entry point, specify it using the name prop.
import { Codespark } from '@codespark/react';
const files = {
'./index.tsx': `...`
};
export default function App() {
return <Codespark name="./index.tsx" files={files} />;
}File Management
For more information about file system operations, see the Workspace & File System documentation.
Last updated on