Quick Links:
- View Code of Sandpacks used: Click here
- View Live @ https://learn-sandpack.vercel.app
NOTE: In console there is an error like - Service Worker registration failed: TypeError #1091 - You can track this issue here.
- Awesome Docs: Usage of sandpack: Click here
- Source - A World-Class Code Playground with Sandpack by Josh W. Comeau Click here
- Docs - Sandpack React: Click here
- Sandpack React Templates: Click here
- Sandpack Migration Guide: Click here
SandpackProvider is our main component, the one that takes a set of files and bundles them into an application. It then provides the necessary data to all child components via React context.
There are lots of additional LEGO™ bricks for us to mix and match, including things like SandpackFileExplorer, SandpackConsole, and SandpackTests.
For full customization, however, we need to access the underlying state. And that's where their custom hooks come in.
Open in Codesandbox Feature
- Quoting from Josh: Initially, I didn't think much of this feature, but I've come to realize that it's amazing. It makes it super easy for folks to share chunks of code. If someone gets stuck on something and need help, they can click this button and send me the URL, instead of having to describe what they did, or copy/paste all of the code (which is often split across multiple files).
Docs: Click here
- Docs: Click here
- Sandpack Theme Builder - Click here
- Sarah Drasner's wonderful
Night Owl: Click here
- CodeMirror: Click here
- Monaco: Click here
Default editor in sandpack-react used is CodeMirror but you can switch to Monaco by following this section in docs: Click here
