• Advanced Usage
  • Static


Run a static web server in any browser.

Our static template is powered by the NPM package static-browser-server, which is documented here in case you'd like to use it outside of Sandpack.

Install static browser server

npm i static-browser-server

Setup the static server

To setup a static browser server, setup a preview controller pointing to the static-browser-server preview files hosted on a wildcard domain. We're hosting the latest version at CodeSandbox on https://preview.sandpack-static-server.codesandbox.io, but feel free to self-host it.

// Map of files
const files = new Map<string, string>(["index.html", "Hello world!"]);
// Setup a preview controller
const controller = new PreviewController({
  baseUrl: "https://preview.sandpack-static-server.codesandbox.io",
  // Function to get the file content for the server this can also be async
  getFileContent: (filepath) => {
    const content = files.get(filepath);
    if (!content) {
        throw new Error("File not found");
    return content;
// Initialize the preview
// This will start up a relay frame and return a url which you can use to show the preview
const previewUrl = await this.previewController.initPreview();
// Create a preview frame and set the src url to the returned preview url
const iframe = document.createElement("iframe");
iframe.setAttribute("src", previewUrl);