Sandpack File Explorer

An enhanced drop in replacement for Sandpack's FileExplorer. Providing immense flexibility to sandpack's capabilities.

• Add and remove files or directories,
• Drag and drop to move files or directories,
• Allow users to customise the entire folder structure right within your website!
• Works out of the box with all of Sandpack's templates.
• Comes with default protection of the entry file (derived from package.json)

https://user-images.githubusercontent.com/17838632/208105414-5c7457bd-3bdc-4f24-b710-c152eb60d991.mov

Installation

1npm install sandpack-file-explorer

1yarn add sandpack-file-explorer

How do I use it?

As a drop in replacement for Sandpack's FileExplorer, you can use it in the same way. This means you must be running a custom Sandpack setup using the granular <SandpackProvider> and <SandpackCodeEditor>.

1import {
2  SandpackProvider,
3  SandpackThemeProvider,
4  SandpackPreview,
5  SandpackCodeEditor,
6  SandpackStack,
7  SandpackLayout,
8} from '@codesandbox/sandpack-react';
9import { nightOwl } from '@codesandbox/sandpack-themes';
10import { SandpackFileExplorer } from 'sandpack-file-explorer';
11
12const MySandpackComponent = () => {
13  return (
14    <SandpackProvider template="react-ts">
15      <SandpackThemeProvider theme={nightOwl}>
16        <SandpackStack>
17          <SandpackLayout>
18            <div
19              style={{
20                display: 'flex',
21                width: '100%',
22                minHeight: '300px',
23                maxHeight: '300px',
24                backgroundColor: `var(--sp-colors-surface1)`,
25              }}
26            >
27              <div
28                style={{
29                  minWidth: 150,
30                  maxWidth: '300px',
31                  overflow: 'hidden',
32                }}
33              >
34                <SandpackFileExplorer />
35              </div>
36              <div style={{ flex: 'min-content' }}>
37                <SandpackCodeEditor
38                  wrapContent
39                  style={{
40                    minHeight: '100%',
41                    maxHeight: '100%',
42                    overflow: 'auto',
43                  }}
44                  showTabs
45                  closableTabs
46                  showInlineErrors
47                  showLineNumbers
48                />
49              </div>
50            </div>
51            <SandpackPreview />
52          </SandpackLayout>
53        </SandpackStack>
54      </SandpackThemeProvider>
55    </SandpackProvider>
56  );
57};