You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Update Discord invite
* Add Discord help menu
* Update discord link for tracking
* Add dashboard wide social icons for support
* delete duplicate icons
description: Introducing Sandpack A Toolkit for Creating In-Browser Live Coding
8
8
date: 2021-12-02
9
9
---
10
10
11
-
Today we’re very excited to announce Sandpack, the in-browser bundler that powers CodeSandbox, has been open-sourced for everyone to use! With this release, you can use Sandpack to power any live running code on your website. Essentially, you can build your own CodeSandbox!
11
+
Today we’re very excited to announce Sandpack, the in-browser bundler that
12
+
powers CodeSandbox, has been open-sourced for everyone to use! With this
13
+
release, you can use Sandpack to power any live running code on your website.
14
+
Essentially, you can build your own CodeSandbox!
12
15
13
16
## What is Sandpack?
14
17
15
-
When CodeSandbox started, it ran all projects in the browser using a primitive bundler that runs in an iframe. As projects on CodeSandbox became more advanced, [we kept on working on this in-browser bundler to support more projects and new bundler features](https://codesandbox.io/post/creating-a-parallel-offline-extensible-browser-based-bundler-for-codesandbox). We’re now at the point that the bundler supports npm dependencies, hot module reloading, caching, and a whole lot more.
18
+
When CodeSandbox started, it ran all projects in the browser using a primitive
19
+
bundler that runs in an iframe. As projects on CodeSandbox became more advanced,
20
+
[we kept on working on this in-browser bundler to support more projects and new bundler features](https://codesandbox.io/post/creating-a-parallel-offline-extensible-browser-based-bundler-for-codesandbox).
21
+
We’re now at the point that the bundler supports npm dependencies, hot module
22
+
reloading, caching, and a whole lot more.
16
23
17
-
At the same time, more and more people wanted to use CodeSandbox for use-cases that we hadn’t thought of before. Sometimes these use cases were so different that we couldn’t make them work for CodeSandbox.
24
+
At the same time, more and more people wanted to use CodeSandbox for use-cases
25
+
that we hadn’t thought of before. Sometimes these use cases were so different
26
+
that we couldn’t make them work for CodeSandbox.
18
27
19
-
That’s why we decided to open source the bundler, named Sandpack. We’re giving you the power to fully customize the experience behind the live-running code, without depending on CodeSandbox. Want to build a student course with live tests? That’s possible! Want to build a no-code editor with a live preview? That’s possible too!
28
+
That’s why we decided to open source the bundler, named Sandpack. We’re giving
29
+
you the power to fully customize the experience behind the live-running code,
30
+
without depending on CodeSandbox. Want to build a student course with live
31
+
tests? That’s possible! Want to build a no-code editor with a live preview?
32
+
That’s possible too!
20
33
21
-
Our main goal behind Sandpack is to give you the full power of CodeSandbox, but with the flexibility to use it for any project that you have in mind.
34
+
Our main goal behind Sandpack is to give you the full power of CodeSandbox, but
35
+
with the flexibility to use it for any project that you have in mind.
22
36
23
37
So, how do you use it? Let’s take a look!
24
38
25
39
## How to use Sandpack
26
40
27
-
With this release, we export two libraries: `@codesandbox/sandpack-client` and `@codesandbox/sandpack-react`. `sandpack-client` is responsible for mounting Sandpack and communicating with it. `sandpack-react` is a wrapper library around `sandpack-client` that makes it possible to use Sandpack with React.
41
+
With this release, we export two libraries: `@codesandbox/sandpack-client` and
42
+
`@codesandbox/sandpack-react`. `sandpack-client` is responsible for mounting
43
+
Sandpack and communicating with it. `sandpack-react` is a wrapper library around
44
+
`sandpack-client` that makes it possible to use Sandpack with React.
28
45
29
-
You can use `sandpack-client` in plain JS or make your own wrapper for Vue, Svelte, or any other library, really!
46
+
You can use `sandpack-client` in plain JS or make your own wrapper for Vue,
47
+
Svelte, or any other library, really!
30
48
31
49
Let's take a quick look at some of the examples from `sandpack-react`:
32
50
@@ -39,50 +57,83 @@ In this example, we render the default editor, and we specify some custom files
39
57
40
58
### Customized Editor
41
59
42
-
What if you want to make something custom? Well, we allow you to write any component that is connected to Sandpack, and you can define the layout yourself. Do you want to use a different code editor? That’s possible:
60
+
What if you want to make something custom? Well, we allow you to write any
61
+
component that is connected to Sandpack, and you can define the layout yourself.
62
+
Do you want to use a different code editor? That’s possible:
43
63
44
-
<sandpack2></sandpack2>
45
-
<br/>
46
-
Here we have a custom code editor (it’s a `textarea`), and a custom component that shows the compiled code of the current file you’re looking at. As you can see, the preview is hidden here. If we’d like to add it, just add the `<SandpackPreview />` component as well!
64
+
<sandpack2></sandpack2> <br/> Here we have a custom code editor (it’s a
65
+
`textarea`), and a custom component that shows the compiled code of the current
66
+
file you’re looking at. As you can see, the preview is hidden here. If we’d like
67
+
to add it, just add the `<SandpackPreview />` component as well!
47
68
48
-
As you can see in the examples, you can use the base template of Sandpack to get a running editor with a minimal amount of work. However, if you want to fully customize the experience, that's possible too. You can build your own devtools on top of Sandpack.
69
+
As you can see in the examples, you can use the base template of Sandpack to get
70
+
a running editor with a minimal amount of work. However, if you want to fully
71
+
customize the experience, that's possible too. You can build your own devtools
72
+
on top of Sandpack.
49
73
50
74
## Who’s using Sandpack?
51
75
52
-
The ability to use live-running code opens up a lot of possibilities. Every time you could benefit from live-running code, you can use Sandpack! These are some of the projects using Sandpack for their own purpose:
76
+
The ability to use live-running code opens up a lot of possibilities. Every time
77
+
you could benefit from live-running code, you can use Sandpack! These are some
78
+
of the projects using Sandpack for their own purpose:
53
79
54
80
### React Docs
55
81
56
-
The new [React Docs](https://beta.reactjs.org/) is using Sandpack for its examples and for the challenges. The React team wanted to fully style and customize Sandpack for their new website, and with Sandpack they were able to customize everything. From the editor to how errors are shown:
82
+
The new [React Docs](https://beta.reactjs.org/) is using Sandpack for its
83
+
examples and for the challenges. The React team wanted to fully style and
84
+
customize Sandpack for their new website, and with Sandpack they were able to
85
+
customize everything. From the editor to how errors are shown:
57
86
58
87
59
88
60
89
### GitLab Web Editor
61
90
62
-
GitLab has a web editor that allows you to write code in the browser and directly commit to GitLab. Gitlab is using Sandpack to execute the code of frontend projects so you can see the live results:
91
+
GitLab has a web editor that allows you to write code in the browser and
92
+
directly commit to GitLab. Gitlab is using Sandpack to execute the code of
93
+
frontend projects so you can see the live results:
63
94
64
95
65
96
66
97
### Codeamigo
67
98
68
-
[Codeamigo](https://codeamigo.dev/) is a place where you can follow byte-sized interactive coding tutorials. They use Sandpack together with their custom editor for running the code:
99
+
[Codeamigo](https://codeamigo.dev/) is a place where you can follow byte-sized
100
+
interactive coding tutorials. They use Sandpack together with their custom
101
+
editor for running the code:
69
102
70
103
71
104
72
105
### CodeHike
73
106
74
-
CodeHike is a library that allows you to create guided code walkthroughs. They use Sandpack for showing the live running code. In this case, they only use the preview of Sandpack, which is also a great use-case:
107
+
CodeHike is a library that allows you to create guided code walkthroughs. They
108
+
use Sandpack for showing the live running code. In this case, they only use the
109
+
preview of Sandpack, which is also a great use-case:
75
110
76
111
77
112
78
113
### Your project?
79
114
80
-
There's really no limit on what you can use Sandpack for. If you’re using Sandpack, let us know and we’ll add you to our showcase!
115
+
There's really no limit on what you can use Sandpack for. If you’re using
116
+
Sandpack, let us know and we’ll add you to our showcase!
81
117
82
118
## Conclusion
83
119
84
-
When we started CodeSandbox, people used it for many more things than we could imagine. With Sandpack, we’re hoping to see the same thing. Give it a try, take a look at our [new landing page](https://sandpack.codesandbox.io/) and [docs](https://sandpack.codesandbox.io/docs) for it and we'd love to get your feedback on [Discord](https://discord.gg/5BpufEP7MH)! You can also find out more about how it works on [GitHub](https://github.com/codesandbox/sandpack).
120
+
When we started CodeSandbox, people used it for many more things than we could
121
+
imagine. With Sandpack, we’re hoping to see the same thing. Give it a try, take
122
+
a look at our [new landing page](https://sandpack.codesandbox.io/) and
123
+
[docs](https://sandpack.codesandbox.io/docs) for it and we'd love to get your
124
+
feedback on [Discord](https://discord.gg/C6vfhW3H6e)! You can also find out more
125
+
about how it works on [GitHub](https://github.com/codesandbox/sandpack).
85
126
86
127
### Thanks
87
128
88
-
Many people have worked on building Sandpack and making it open source. Credits go to [Adewale](https://twitter.com/ace_kyd), [Alex](https://twitter.com/alexnmoldovan), [Danilo](https://twitter.com/danilowoz), [Danny](https://twitter.com/dannyruchtie), [Jasper](https://twitter.com/JasperDeMoor), [Marco](https://twitter.com/marcovincit), [Maria](https://twitter.com/olarclara), [Sanne,](https://twitter.com/sannekalkman)[Tamas](https://twitter.com/metricbrew), and [Zeh](https://twitter.com/zehf) for making this happen!
129
+
Many people have worked on building Sandpack and making it open source. Credits
130
+
go to [Adewale](https://twitter.com/ace_kyd),
131
+
[Alex](https://twitter.com/alexnmoldovan),
132
+
[Danilo](https://twitter.com/danilowoz),
133
+
[Danny](https://twitter.com/dannyruchtie),
134
+
[Jasper](https://twitter.com/JasperDeMoor),
135
+
[Marco](https://twitter.com/marcovincit),
136
+
[Maria](https://twitter.com/olarclara),
137
+
[Sanne,](https://twitter.com/sannekalkman)
138
+
[Tamas](https://twitter.com/metricbrew), and [Zeh](https://twitter.com/zehf) for
0 commit comments