A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

Overview

Component toolkit for live running code editing experiences

Sandpack

Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox.

Learn more about Sandpack

Sandpack client

This is a small foundation package that sits on top of the bundler. It is framework agnostic and facilitates the handshake between your context and the bundler iframe.

Read more

Sandpack React

React components that give you the power of editable sandboxes that run in the browser.

; ">
import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

<Sandpack template="react" />;

Read more

Documentation

You can find the Sandpack documentation on https://sandpack.codesandbox.io/docs/.

Start with the Sandpack introduction page for a quick overview and you can kick the tyres as well.

The documentation is divided into following sections:

Comments
  • [Feature Request] Multi-user support

    [Feature Request] Multi-user support

    Tell us how you think we can improve Sandpack

    Packages affected

    • [X] sandpack-client

    What is this feature?

    Offer documentation or first-class support for setting up multiple user editing in Sandbox.

    feature:request triage 
    opened by kylemh 13
  • Feature request: feature for view console

    Feature request: feature for view console

    Tell us how you think we can improve Sandpack

    It would be useful to have component like <SandpackConsole> that renders... a sandpack's console.

    Packages affected

    • [x] sandpack-client (probably)
    • [x] sandpack-react

    How would your idea work?

    It might be a component that renders console or props like <SandpackPreview console> to include console into preview.

    Do you have any examples of how you would like to see us implement it?

    It depends on implementation way. The first example right on codesandbox.io ("Console" button on the bottom of preview).

    Another way is something like this:

    localhost_3000_read_html-and-css_tags

    help wanted feature:request needs-scoping area:devx estimate:l 
    opened by kuduzow 12
  • Using npmregistries for private packages, is failing to load package. Because of CORS error.

    Using npmregistries for private packages, is failing to load package. Because of CORS error.

    Bug report

    Packages affected

    • [ ] sandpack-client
    • [Y] sandpack-react

    Using npmregistries for private registry is failing to load package, because of CORS error.

    Used npmregistry for loading packages from custom registry

    npmRegistries: [ { proxyEnabled: true, enabledScopes: ['@scope'], limitToScopes: true, registryUrl: "custom registry url", registryAuthToken:"token" }, ],

    Error info: 'https://1-4-0-sandpack.codesandbox.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

    Link to sandbox: link (optional)

    Your Environment

    | Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | | | Sandpack-react version | 1.5 | | Browser | chrome | | Operating System | windows10 |

    bug triage 
    opened by appanasantosh 10
  • Can we add a new template for typescript-react ?

    Can we add a new template for typescript-react ?

    Hey, I wanted to use React Typescript. What would be the steps to to add that to the current version. I was looking inside the templates folder and this looks relative simpler to add, I can add if agreed.

    Is there a way to add this to the existing version ?

    opened by vipulbhj 10
  • Feature request: performance improvements

    Feature request: performance improvements

    This issue aims to centralize all concerns related to performance and what actions Sandpack is taking to solve them.

    How to skip the transpiled step? Or how to load pre-transpiled code? We have already addressed an internal solution for it, which aims to cache all compiled files and share them between sandboxes with the same dependencies.

    Why codesandbox.io loads faster than Sandpack? We use the exact same bundler in codesandbox as is published with the sandpack package, so actual bundling/transformation speed should be identical. However, on CodeSandbox we have a server-side redis cache which makes initial loads almost instant as it does not need to transpile anything initially. Again, we have some things planned to make this better for all sandpack users (a cache that isn't tied to a sandbox and some other improvements).

    Related https://github.com/codesandbox/sandpack/issues/292, https://github.com/codesandbox/sandpack/issues/271, https://github.com/codesandbox/sandpack/discussions/259

    feature:request area:devx 
    opened by danilowoz 9
  • ReferenceError: process is not defined (Docusaurus)

    ReferenceError: process is not defined (Docusaurus)

    Hi. I was testing sandpack-react with Docusaurus, but there's a fatal error as soon as I import a sandpack component:

    client.js?e6b8:10 Uncaught (in promise) ReferenceError: process is not defined
        at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-client/esm/client.js:21)
        at Module../node_modules/@codesandbox/sandpack-client/esm/client.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:23)
        at __webpack_require__ (:3000/runtime~main.js:36)
        at fn (:3000/runtime~main.js:339)
        at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js:8)
        at Module../node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:143)
        at __webpack_require__ (:3000/runtime~main.js:36)
        at fn (:3000/runtime~main.js:339)
        at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js:6)
        at Module../node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:183)
        at __webpack_require__ (:3000/runtime~main.js:36)
        at fn (:3000/runtime~main.js:339)
        at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js:8)
        at Module../node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:79)
        at __webpack_require__ (:3000/runtime~main.js:36)
        at fn (:3000/runtime~main.js:339)
        at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js:7)
        at Module../node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:215)
        at __webpack_require__ (:3000/runtime~main.js:36)
        at fn (:3000/runtime~main.js:339)
        at eval (webpack-internal:///./src/pages/index.js:12)
        at Module../src/pages/index.js (:3000/component---site-src-pages-index-jsc-4-f-f99.js:47)
        at __webpack_require__ (:3000/runtime~main.js:36)
        at Function.fn (:3000/runtime~main.js:339)
    

    Made a repro repo here, but it's basically the default docusaurus template with this added to pages/index.js:

    import { SandpackRunner } from "@codesandbox/sandpack-react";
    
    const CustomSandpack = () => <SandpackRunner />;
    

    Using version 0.0.6.

    bug 
    opened by pomber 9
  • feat: add vue-ts vue3-ts template

    feat: add vue-ts vue3-ts template

    What kind of change does this pull request introduce?

    image

    Feature:

    • add vue-ts vue3-ts template
    • update vue vue3 template

    I checked it and it works fine.

    @danilowoz In daily development, the VUE3-TS is widely used. It is recommended to merge.

    opened by jerrywu001 8
  • Hacktoberfest: contribute to Sandpack Themes

    Hacktoberfest: contribute to Sandpack Themes

    image

    We're open to supporting new Sandpack themes because our key goal is empowering developers to include custom live coding experiences over the web, regardless of your website layout or level of design expertise. That's why we provide plenty of options under @codesandbox/sandpack-themes, and we want to offer even more options. So, how can you contribute to new themes?

    Sandpack Theme Builder

    Sandpack provides a tool to guide you in creating your custom theme. Start with a dark or light theme, and then add your custom values like primary and secondary colors.

    Plus, if you want to give an even more personal touch, you can go to the Advanced tab and set colors for the syntax highlight and other cases.

    https://sandpack.codesandbox.io/theme

    Publish a theme

    At this point, you need to go to the Sandpack repository, fork, and introduce some changes in your pull request. BTW, you can just use CodeSandbox Projects to do that:

    1. Open the Sandpack repository on CodeSandbox Projects;
    2. Create a contribution branch, which will fork the repository for you:
    Screenshot 2022-09-27 at 09 31 22
    1. Create a new file in codesandbox/sandpack/sandpack-themes/src folder with following file [theme name].ts
    2. The content of this file must be an export for an object that contains the theme:
    import type { SandpackTheme } from "./types";
    
    export const THEME_NAME: SandpackTheme = {
      colors: {
    		...
      },
    
      syntax: {
    		...
      },
      font: {
        ...
      },
    };
    
    1. Include your new theme into the index.ts file, that exposes all themes.

    Still not clear? Feel free to contact us on Discord or on GitHub.

    hacktoberfest 
    opened by danilowoz 8
  • fix(file-explorer): adds property not to show hidden files

    fix(file-explorer): adds property not to show hidden files

    What kind of change does this pull request introduce?

    provide a property(enableAutoHiddenFile: default value is false) in FIleExplorer Component that indicates whether files in the file tree are automatically hidden.

    What is the current behavior?

    Closes #482

    What is the new behavior?

    My solution is to provide a property that indicates whether files in the file tree are automatically hidden.LIke this:

    // enableAutoHiddenFile: boolean; // default: false
    <SandpackProvider
        files={{
          "/index.js": {
            code: "// index.js",
            active: true
          },
          "/index2.js": {
            code: "// index2.js"
          },
          "/src/index.js": {
            code:
              "// this file is generated by vanilla template, but it is not needed",
            hidden: true
          },
          "/hidden.js": {
            code: "// hidden.js",
            hidden: true
          }
        }}
        customSetup={{
          entry: "/index.js"
        }}
        template={"vanilla"}
      >
        <SandpackLayout>
          <SandpackFileExplorer enableAutoHiddenFile />
          <SandpackCodeEditor />
        </SandpackLayout>
      </SandpackProvider>
    

    image

    image

    What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.

    add story: http://localhost:6006/?path=/story/bug-reports-issues--issue-482

    Checklist

    • [ ] Documentation;
    • [x] Storybook (if applicable);
    • [ ] Tests;
    • [x] Ready to be merged;
    opened by jerrywu001 8
  • Degraded editor performance during file compression

    Degraded editor performance during file compression

    Bug report

    Packages affected

    • [ ] sandpack-client
    • [x] sandpack-react

    Description of the problem

    Hi! First off, thank you for this amazing tool 🙏 It has been an extremely simple process to get up and running with an embedded code editor, which is incredibly awesome.

    The issue I noticed is that when using the suggested strategy for using private NPM packages, I've noticed that if the package is large, it can cause a really notable lag when trying to use the editor (see the video below). From what I can tell, this happens because when the files change, it kicks of a useEffect that compresses the files.

    With smaller files, that makes a lot of sense and allows the ability to open in a codesandbox anytime with little delay, which is awesome. However, it seems that if this is the go-to strategy for using private packages, it may benefit from having a way to avoid this behavior for larger packages. The options I thought of were:

    1. Add an option in the options or customSetup to remove the "Open in Codesandbox button"
    2. Make the compression an asynchronous process that does not block the main thread (and a loader can show in the button till it's complete)
    3. Implement a caching strategy to avoid re-compressing large files (maybe detect which file changed and only re-process them?)

    I'm not familiar enough with the package to know which of these, if any, are viable, but option 1 seemed like it'd be relatively straight forward compared to the others.

    https://user-images.githubusercontent.com/46691367/163629990-c00a8e2e-5109-423a-9f68-37ce532ce459.mov

    (Apologies if the video is unclear, but anytime that typing stops, it's because it's lagging)

    Note: I tried running with autorun: false and recompileMode: 'delayed' to try to change the behavior, and they might have helped a little bit, but the issue persisted.

    What were you doing when the problem occurred?

    Editing a file while using a very large UI library package as a dependency.

    What steps can we take to reproduce the problem?

    • Use this strategy to add in a LARGE custom package. Unfortunately mine is private or else I'd set up an example using it, but it's a 2.3MB bundle comprised of a relatively large UI component library.
    • Attempt to edit a code file that imports that library

    Your Environment

    | Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | 0.15.2 | | Sandpack-react version | 0.15.2 | | Browser | chrome / 100.0.4896.88 | | Operating System | macOS / 12.3.1 |

    Apologies if this a duplicate issue or there's already an easy way to go about this!

    bug triage 
    opened by joebingham-wk 8
  • Bug: sandpack-react: Duplicate entry points

    Bug: sandpack-react: Duplicate entry points

    FIrst of all - thank you for nice tool! I'm really happy to use it in my projects :raised_hands:

    Bug report

    1. This setup gives 2 tabs with same title App.tsx, and renders default template in preview, instead of my App.tsx
    <Sandpack
      template="react-ts"
      files={{
        "/App.tsx": code
      }}
    />
    
    1. This setup gives no tabs, but nothing renders in preview
    <Sandpack
      template="react-ts"
      files={{
        "/App.tsx": code
      }}
      customSetup={{ entry: "/App.tsx", main: "/App.tsx" }}
    />
    

    Expected:

    • no tabs
    • preview renders my provided example

    You can try it in sandbox https://codesandbox.io/s/sandpack-codesandbox-rendering-conflict-forked-hfuip

    bug 
    opened by apostololeg 8
  • [Not for merge yet] Highlight <foo> differently from <Foo>

    [Not for merge yet] Highlight differently from

    This is a port of changes in https://github.com/lezer-parser/javascript/commit/00173306dc20e2b1f364cc30b6de0398156e8f42.

    See https://github.com/codemirror/dev/issues/956 for context.

    I don't think merging this would actually work unless you backport the changes from https://github.com/codemirror/dev/issues/956 to the old version of @codemirror/highlight and @lezer/lang-javascript. Which I did in my local copy but maybe that's too much. I really want this change though.


    A proper way would be to of course actually upgrade. And then do this PR.

    opened by gaearon 4
  • There was an error using the extension

    There was an error using the extension

    Bug report

    Packages affected

    • [ ] sandpack-client
    • [ ] sandpack-react

    Description of the problem

    when i use Codemirror extensions in the CodeEditor component like this

    <Sandpack
      options={{
        codeEditor: {
          extensions: [autocompletion()],
          extensionsKeymap: [completionKeymap],
        },
      }}
      template="react"
    />
    

    but console show me below errors , how can i fix up this problem :( image

    What were you doing when the problem occurred?

    https://github.com/codesandbox/sandpack/pull/286#issue-1093281496

    What steps can we take to reproduce the problem?

    Link to sandbox: link (optional)

    Your Environment

    | Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | | | Sandpack-react version | | | Browser | | | Operating System | |

    bug triage 
    opened by KeyToLove 2
  • "Could not fetch dependencies" error when using custom registry and scoped packages

    Bug report

    Packages affected

    • [ ] sandpack-client (haven't tried without React, sorry)
    • [x] sandpack-react

    Description of the problem

    I'm not sure if this is a sandpack bug, a verdaccio bug or I've just messed up the configuration. Apologies in the advance if this is the wrong place to post this.

    What were you doing when the problem occurred?

    Following the sandpack "private packages" docs to setup a custom registry (to eventually access privately hosted npm packages)

    What steps can we take to reproduce the problem?

    1. Configure verdaccio with the npmjs registry setup as follows (note, this was mostly in the default configuration):
    uplinks:
      npmjs:
        url: https://registry.npmjs.org/
    
    ...
    
    packages:
      '@*/*':
        access: $all
        publish: $authenticated
        unpublish: $authenticated
        proxy: npmjs
    
      '**':
        access: $all
        publish: $authenticated
        unpublish: $authenticated
        proxy: npmjs
    
    1. Run verdaccio locally with:
    npx verdaccio --listen 4000
    
    1. Configure Sandpack to use the registry as follows:
        <Sandpack
          template="react-ts"
          files={{
            "/App.tsx": code,
          }}
          customSetup={{
            dependencies: {
              "styled-components": "^5.3.6",
              // "@mui/material": "^5.10.13",
              // "@emotion/react": "^11.10.5",
              // "@emotion/styled": "^11.10.5",
            },
            npmRegistries: [
              {
                enabledScopes: [],
                limitToScopes: false,
                registryUrl: "http://localhost:4000",
              },
            ],
          }}
        />
    
    
    1. This should work just fine with styled-components because it is not a scoped package Note, you should also see activity in the verdaccio proxy console

    2. Remove the comments to add the MUI scoped packages

    3. This will produce the following error

    Could not fetch dependencies, please try again in a couple seconds: Cannot read properties of undefined (reading 'content')

    Link to sandbox

    Note, to use this sandbox, you'll need to follow the above steps to setup a verdaccio proxy locally on port 4000 first. In this sandbox, I've created three files:

    1. NotWorking.tsx - This demonstrates the problem with a custom registry and a scoped package (@mui/material)
    2. Working.tsx - This demonstrates that using a custom registry works fine with non-scoped packages (styled-components)
    3. AlsoWorking.tsx - This demonstrates that scoped packages (@mui/material) still works as expected without the custom registry

    Only the NotWorking example is rendered by default but these can be switched in and out in index.tsx. Hope that helps.

    Your Environment

    | Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | 1.12.1 | | Sandpack-react version | 1.17.0 | | Browser | Chrome | | Operating System | OSX |

    bug triage 
    opened by stevenocchipinti 2
  • `externalResources` not included when using

    `externalResources` not included when using "Open in Codesandbox" button

    Bug report

    Not sure if this is a bug or expected behaviour but when I add stuff to externalResources, it's not included in the newly created codesandbox when using the "Open in Codesandbox" button.

    Packages affected

    • [x] sandpack-react

    Description of the problem

    externalResources not included in codesandbox when using the "Open in Codesandbox" button.

    What were you doing when the problem occurred?

    Clicked the "Open in Codesandbox" button

    What steps can we take to reproduce the problem?

    Add:

    externalResources: ['https://cdn.tailwindcss.com']
    

    to you your customSetup options and use the "Open in Codesandbox" button. You will see that https://cdn.tailwindcss.com is not included in the head.

    On our website, everything works great: https://reactflow.dev/docs/examples/styling/tailwind/ but when you use the "Open in Codesandbox" button, it is broken.

    bug triage 
    opened by moklick 1
  • Add support for caching the build for 2nd load onwards

    Add support for caching the build for 2nd load onwards

    Tell us how you think we can improve Sandpack

    The current implementation of bundler doesn't cache the build which means, even on the second or subsequent loads the whole build process starts from scratch causing a huge performance overhead(think about a sandpack using tons of npm dependencies)

    Packages affected

    • [x] sandpack-client
    • [x] sandpack-react

    What is this feature?

    Feature Request: Add support for caching the build for 2nd load onwards

    This helps with our use-case of running a "heavy sandpack"! This should also help every user of sandpack have an instant preview 2nd load onwards (no matter their choice of template and build step)

    feature:request triage 
    opened by mohdashraf010897 2
Releases(v1.18.4)
Owner
CodeSandbox
An online editor tailored for web applications
CodeSandbox
Harness the power of Intersection Observers for simple list virtualization in React

React RenderIfVisible Harness the power of Intersection Observers for simple list virtualization in React. This tiny React component is a drop-in list

NightCafe Studio 78 Dec 28, 2022
An attempt to visualize the power of million+react

Observations Million was able to render 1M items successfully. Let alone 1M items, React failed to render even 100K items. Yes, browser threw page not

Anuj Joshi 10 Aug 12, 2022
Execute Power FX in your client (React) via .NET (WASM) and JS interop.

WIP, details TBD Click here for live DEMO. Based on: https://github.com/microsoft/power-fx-host-samples/tree/main/Samples/WebDemo Blog post: https://h

NETWORG 10 Nov 16, 2022
Solana-base-app - Solana-base-app is for Solana beginners to get them up and running fast

solana-base-app solana-base-app is for Solana beginners to get them up and runni

UjjwalGupta49 33 Dec 27, 2022
Live coding in your browser with your favourite language.

Live coding in your browser with your favourite language.

Fatih Erikli 986 Nov 20, 2021
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

Transl8r About the Project Transl8r is an app designed to connect people and translators to provide fast, effective translations via live chat, video

Richard Barnes 8 Oct 27, 2022
An interactive CLI automation tool 🛠️ for creating react.js and next.js projects most fast and efficiently. ⚛️

An interactive CLI automation tool ??️ for creating react.js and next.js projects most fast and efficiently. ⚛️

Alexis Guzman 27 Apr 12, 2022
Steven Petryk 2k Jan 6, 2023
Creating modals in React Framer Motion

Creating modals in React Framer Motion

Fireship 73 Dec 29, 2022
my-watchlist is a web application for creating your own watchlist.

my-watchlist is a web application for creating your own watchlist. The website tracks your created watchlist, so that you can comeback anytime and pick from where you left.

Ashish Poudel 4 Jun 25, 2022
A powerful toolkit for building websites with beautiful design

Typography.js A powerful toolkit for building websites with beautiful typography. Typography.js A powerful toolkit for building websites with beautifu

Kyle Mathews 3.8k Dec 31, 2022
Base ReactJs project with Redux Toolkit, Jest and styled-components

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Esteban Cabrera 0 Jan 7, 2022
Here is the place try to learn to call API using React.js with anything your code style and contribute to open-source. Part of Hacktoberfest

Table of Contents About The Project Built With Getting Started Prerequisites Installation Usage About The Project To welcome hacktoberfest we provide

Abdul Hakim 13 Oct 30, 2022
Simple generator of React code from Figma

Simple generator of React code from Figma

seya 276 Dec 23, 2022
A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

The Sword Breaker 315 Dec 30, 2022
MobX React Handbook with code samples

Manual do MobX com React Exemplos de gerenciamento de estado no React usando a biblioteca MobX Versões Este repositório está utilizando as seguintes v

Sampaio Leal 13 Apr 1, 2022
Contains the code for Terraform, Spring Boot, React used in AWS POC

AWSTerraformPOC Contains the code for Terraform, Spring Boot, React used in AWS POC Description This application shows the top trending ticks and watc

null 15 May 5, 2022
Source Code For the TextUtils React Application from CodeWithHarry YouTube Tutorial.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 165 Dec 31, 2022
⚛️ Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere

SkynexUI Use the platform, don't care about how to style there ⚠️ Version 1.x.x is alpha, trust only in v2 A set of components writen on top of React

SkynexUI 671 Dec 31, 2022