# CodeSandbox & Github Magic

If you're into web development, you probably already know what [CodeSandbox](https://codesandbox.io/) is, and you sure know what [Github](https://github.com/) is (if not, well, time to leave your cave 😁). For those who never used CodeSandbox, here's what it does:

> CodeSandbox is an online editor for rapid web development. With CodeSandbox, you can prototype quickly, experiment easily, and share creations with a click. Use it to create static sites, full-stack web apps, or components on any device with a web browser.

I personally use it a lot, I find it really useful to try some stuff in complete isolation, free of any constraint the project you're working on can have. It's also quite common to provide a sandbox with the minimum setup to reproduce a bug you're asking for help with.

That said, I recently learned some amazing _tips & tricks_ to get more productive with these tools, and this was my reaction:

> Wait, what? 😱 How am I only finding out about this now?

So I decided to make a quick post to share those with you, I hope you'll find it as useful as I do.

## #1 Kickstart a sandbox

A common thing to do when creating a sandbox is to choose a template. Either you're working with just JavaScript, TypeScript, React, Vue, or Angular, they got a template for you so you can start coding right away.

Well, here's where the magic happens: go ahead and open a new tab in your browser, and type the URL [js.new](http://js.new). Hold your breath, and press `Enter`...

✨ Tadaaaa ! Amazing, right?

You can now start coding with your favorite template in a split second. Also works with:

- TypeScript - [ts.new](http://ts.new)
- React - [react.new](http://react.new)
- Vue - [vue.new](http://vue.new)
- Angular - [ng.new](http://ng.new)

And more...

## 2 - Turn a GitHub repo into a sandbox

Sweet, now that you know how to create a Code Sandbox from a template faster than Lucky Luke shot his gun, what if I tell you that you can do the same from a Github repository?

🔥 That's right! Open one of your favorite repo, and just insert `box` between `github` and `.com` :

`https://githubbox.com/User/Repo`

I love this one.

## Bonus - VSCode in the browser (whaaat ?)

I'll leave you with this last one, my absolute favorite of all. Instead of inserting `box` between `github` and `.com`, if you insert `1s`, it will open VSCode **in your browser** 😍


![github1s.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618474236613/LEMQogkdH.png)

This makes it so easier to browse a repo and read the code through the entire project, just like you would do on your local machine.

Aaaand it's open-source, feel free to check it out: https://github.com/conwnet/github1s GitHub and "smash that star button" as they say.

Alright, that's all for today, I hope you enjoyed it. Feel free to leave your tips in the comment if you got something similar in-store, I really love those 👌