I want a Sandpack Provider with no files (blank template)

[jamesmurdza]

If I remove, template="static" from the below code, the template is still applied. I want to provide my own directory structure with a completely different list of files. How can I do this?

import './App.css'
import { SandpackProvider, SandpackLayout, SandpackPreview, SandpackConsole } from "@codesandbox/sandpack-react";

export default function App() {
  const files = {}

  return (
    <SandpackProvider
      files={files}
      theme="light"
      template="static"
    >
      <SandpackLayout>
        <SandpackPreview />
        <SandpackConsole />
      </SandpackLayout>
    </SandpackProvider>
  )
}

[jamesmurdza]

This is the workaround that I'm using now:

  useEffect(() => {
    if (files["/App.js"]) {
      deleteFile("/App.js");
    }
    if (files["/index.js"]) {
      deleteFile("/index.js");      
    }
  }, [deleteFile]);

This deletes the template files when Sandpack loads.

[SarthakSKumar]

You can override it by explicitly defining your own file structure and custom setup. Here's how you can do it:

<SandpackProvider
  theme="auto"
  files={{
    '/user.sql': `CREATE TABLE users (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      age INTEGER NOT NULL
    );`,
  }}
  customSetup={{
    entry: '/user.sql',
  }}
>
  <SandpackLayout>
    <SandpackPreview />
    <SandpackConsole />
  </SandpackLayout>
</SandpackProvider>