Custom files without using Sandpack

[gdimitropoulos]

Trying to follow the example

  SandpackProvider,
  SandpackLayout,
  SandpackCodeEditor,
  SandpackPreview,
} from "@codesandbox/sandpack-react";

const CustomSandpack = () => (
  <SandpackProvider template="react">
    <SandpackLayout>
      <SandpackCodeEditor />
      <SandpackPreview />
    </SandpackLayout>
  </SandpackProvider>
);

I was't able to find a way to insert custom files to the initiated sandbox and could not find an example on docs.
Is there a way of initiate the sandbox with my custom files while using this setup?

[danilowoz]

Hey @GeorgeDimCeid, thanks for opening this issue. We know that our documentation still is not that good, and we're looking forward to improving it. That's why it's so important to know when you don't find in the documentation what you're looking for.

So basically, you can use the customSetup prop which is a SandpackSetup type that supports the files options.

const CustomSandpack = () => (
  <SandpackProvider 
    template="react" 
    customSetup={{
        files: {
            "/App.js": code,
        },
    }}>
    <SandpackLayout>
      <SandpackCodeEditor />
      <SandpackPreview />
    </SandpackLayout>
  </SandpackProvider>
);

[gdimitropoulos]

I was wondering if you can pass your whole project folder or to be shown inside the sandpack instance via the files prop

can anyone show me an example?
@danilowoz