codesandbox / codesandbox-client

An online IDE for rapid web development

 

An instantly ready, full-featured online IDE for web development on any device with a browser. Enabling you to start new projects quickly and prototype rapidly. With CodeSandbox, you can create web apps, experiment with code, test ideas, and share creations easily.

Other CodeSandbox repositories

CodeSandbox consists of several separate servers, some of which are open sourced.

• Client: the web application
• Server: the Phoenix API server
• Nginx: Nginx config files
• Git Extractor: responsible for extracting the source from a GitHub repository
• CLI: the CLI to upload a CodeSandbox project from your command line

Documentation

You can find our documentation on our website

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Ives van Hoorne 💬 📝 🐛 💻 🎨 📖 💡 🚇 👀 ⚠️ 🔧	Donavon West 💻	Jeff Allen 💻	Ben Gummer 💻	James Gillmore 💻 🐛	Ade Viankakrisna Fadlil 💻	Tushar Sonawane 💬 💻 📖 🤔
Johann Hubert Sonntagbauer 🐛 💻	Joachim Seminck 💻	Subramanya Chakravarthy 💻	Robert (Robby) O'Connor 🚇	Bogdan Luca 🐛 💻	Divjot Singh 💻	Jason Nall 💻
Lionel 💻 🎨	Philipp Brumm 💻	Valentin Hervieu 💻 🐛	Anenth 💻 🎨 🤔	Dony Sukardi 🐛 💻	Geoffrey Dhuyvetters 🎨 💻	Eswar Yaganti 💻 🚇
Frank Tan 💻	Bilal Budhani 💻	El Juli 💻	Arthur Denner 💻 📖	Radi Cho 🐛 💻 🤔	Xiaoyi Chen 💻	Gautam Arora 💻 🤔
Haroen Viaene 💻 🎨	Nick Nisi 💻	Abhishek Jakhotiya 💻 🐛	Tom Kühl 💻	br1anchen 💻	Daniel Hsing 💻	Maciej Kasprzyk 💻
Robert Heessels 📖	Ryan P. C. McQuen 💻	Chris 💻	Drew Smith 💻	Eric Berry 💻	Hum4n01d 💻	Malachi Willey 💻
Michel Weststrate 💻	Oleg 💻	Paul Sherman 🐛 💻	Ro Savage 💻	Sam Denty 💻	Zephraph 💻	Josh Waller 🐛 💻 📖
Joe Ng'ethe 💻	Carles Codony 💻	Vytenis 💻	Manuel Dugué 🐛 💻	Demian Dekoninck 💻	Drake Costa 💻	Marko Stijak 💻
Ilya 💬 🤔	Emerson Laurentino 💻 🐛	Aaron Reisman 🐛 💻 📦	Colton Colcleasure 💻 🐛	PJ Walker 🐛 💻	Satya Rohith 💻 📖	Melanie Seltzer 💻
ZYSzys 📖	Sara Vieira 💻 🎨 🤔	François Chalifour 🐛 💻	Abdullah 💻 🎨	Jon Short 💻	Daniel Vu 💻	Vivek Nayyar 💻
Bob Ziroll 📖	Alexander Lichter 💻	Chiamaka Nwolisa 💻	Steve Shreeve 💻	Robert Wildling 💻	Ben Conolly 💻	Wei-Wei Wu 💻
Alex Casillas 💻	Brian Ng 💻	Mike North 💻	Róbert Oroszi 💻	Adrià Fontcuberta 💻	António Afonso 💻	Artem Sapegin 💻
Brian Bartholomew 💻	Christian Alfoni 💻	David Baumgold 💻	Evgeny Rodionov 💻	Fathy Boundjadj 💻	Fatih Altinok 💻	Grant Timmerman 💻
James 💻	Kelson448 💻	Ken Snyder 💻	Kent C. Dodds 💻	Khaled Garbaya 💻	Liu 💻	Maciej 💻
Matthew Gadd 💻	Miguel Carvajal 💻	Olaolu Olawuyi 💻	Pete Nykänen 💻	Phil Hughes 💻	Rodrigo Pombo 💻	Sai Ram Kunala 💻
The Gitter Badger 💻	Tim Whitbeck 💻	Wei Zhu 💻	Wil Wilsman 💻	abnessor aka findoff 💻	cottom 💻	gitname 💻
Bruce Xu 💻	jess 💻	Juliette Prétot 💻	Victoria Bergquist 💻 📖	Samrith Shankar 💻	Mahendra Hirapra 💻	Rabin Gaire 💻
Neville Mehta 💻	Vasiliy 💻	Romain Lanz 💻	LiBe 💻	Jeremy Bolding 💻	Evan Bacon 💻	Michaël De Boey 📝 🐛 💻 📖 🚇 🔧
gabeeden 💻	Tiffany White 💻	James Bedford 💻	Scott 💻	Dutiyesh Salunkhe 💻	Halit Ogunc 💻	Yash Joshi 💻
Yehor 💻	Jens de Rond 🐛 💻	Benjamin Schachter 📖	Rafael 🐛 💻	baremetalfreak 💬 🐛 💻	Javed 💻	R4M80MRX 💻
Dr. Derek Austin [aka dj D-REK from Richmond, VA] 🐛	Sid 💻	Yeison Daza 💻	Shriram Balaji 💻	Thomas Dillard 💻	Chinmay Chaudhary 💻	Sakthivel Sengodan Sapient 💻
Nabeelah 💻	vanya829 💻	Tane Morgan 💻	Het Patel 💻	Ivan Medina 💻	Gobinath-Manokaran 💻	Abdul Rauf 💻 📖
milap1296 💻	yevhen orlov 💻	Nilesh Patel 💻	Pooja Gaur 💻	Sajad Hashemian 💻	Carlos Galarza 📖	soorajshankar 💻
Matthias Christoph Munder 🐛 💻	Anurag Hazra 💻	johansenja 📖	Shodipo Ayomide 📖	Akash Joshi 💻	Oleksandr Fediashov 🐛 💻	John D. 💻
Nino 📖	Saurabh Daware 💻 🔌	Pablo Varela 💻	Ryan Waldon 💻	Andrew Cherniavskii 💻	NullVoxPopuli 💻 🖋 🚧	Josh 📖
Stefan Retief 🐛 💻	Aditya 🐛 💻	B2D1 📖	Artem 💻	Hugo Wiledal 🐛 💻	Sai Hari 💻	Ku3mi41 💻 ⚠️

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us catch unexpected changes.

codesandbox-client's Issues

Find a way to detect endless loops

When a sandbox has an endless loop it won't stop executing until the tab kills the editor. This means that users can lose their sandbox.

Maybe there is a way to limit execution time of a sandbox, or maybe we should add a 'Run' button when you're editing your own sandbox. Would love to hear some thoughts.

when you delete a dep and then re-add it, you have to refresh to see it

What I'm doing is deleting a dependency, and then adding it right back @next. You can do things to try trigger it to be used like flipping our favorite module/project switch, but you have to refresh.

In general, the loading dependencies UI elements are not quite in sync with when it's really ready.

It's a small edge case, but at some point deleting/editing/re-adding deps is something you're gonna wanna polish.

Basically I suggest that when this shows:

This also immediately shows:

this will show if you do various things such as toggle the module/project view switch.

And then when it's truly done loading, it refreshes the iframe. There is also an issue with the package appearing in the dll bundle. So even if you just refresh a package (instead of doing the fancy thing I do where I'm switching dist-tag), it won't work, and you'll need to refresh the page.

Refreshing the page automatically for the user (provided there is complete loading indicators) may be a fine stop-gap solution to get this done quicker. Although obviously the ideal solution, is just the inner iframe refreshes (while keeping the same URL it was on).

HMR with Redux (redux store currently on keydown)

First off, excellent stuff. I think I've written this to you in like 4 places now.

I'm going to create a sandbox for Redux-First Router. There's just one problem, and I'm sure you know it: the store resets again when you type anything.

I'd be interested to know how you built "instant preview." It's fantastic. Let's figure out how to make it support more use-cases. Do we need a module.hot api?

sandbox with github repo as parent does not show on profile > sandboxes/showcase

For example, go here:

https://codesandbox.io/u/faceyspacey/likes

You will see my main codesandbox there, but it does not appear here:

https://codesandbox.io/u/faceyspacey/sandboxes

and also it cannot be selected as for "showcase."

you can't view the code files in the embeddable widget

check it:

https://medium.com/faceyspacey/redux-first-router-lookin-sexy-on-code-sandbox-d9d9bea15053

open the sidebar. try to view a file.

.jsx file extension support

This one should be easy to do, I found out that create-react-app does support the jsx extension. We should update the sandbox to handle these cases.

All the code for this resides in src/sandbox/, if you'd search for js you'll find where we check for the extension.

I believe all logic is in src/sandbox/eval/js/index.js and src/sandbox/utils/resolve-module.js.

resizer shows over the settings modal

When in settings, the bar that resizes the file tree, and the editor, is shown above the modal. Seen here:

The modal had a z-index of 20. Bumping it up to 30 fixed it, as seen here:

I can put in a pull request on this tonight, let me know what you think!

Make react and react-dom mandatory dependencies (or show error message when these deps are missing)

I noticed that if you remove the react and react-dom deps no error message appears but the output remains frozen.

Solution:

Show error message when this happens or make these 2 packages mandatory dependencies.

Make column headers sortable in Profile page

Clicking on the title of a column in my profile page will sort the list of sandboxes by that column. Currently, they are sorted by creation date (?).

Support for dependency from Github branch?

First of all, really cool stuff. I first learned about codesandbox from styled-components issue template. I'm impressed with it, great job @CompuIves!

I want to replace Grommet base codepen with codesandbox. I like that I can use imports and have a structure that is very close to my local environment.

Our codepen today is used to test things in a branch called "stable" that is updated multiple times a day after CI passes in the master branch. I understand that I can use "External Resources" and add the minified css and js available here.

But I wondering if there is a way to specify the branch in the version for the" Dependency" section. Something similar to this package.json here.

When I add https://github.com/grommet/grommet/tarball/stable as the version for a package, I get an error in codesandbox.

Thoughts?

"Import from GitHub" page sometimes shows invalid output URL

If I go to https://codesandbox.io/s/github and enter http://github.com/test/123 it output a sandbox URL of https://codesandbox.iohttp://github.com/test/123 (or https://www.github.com/test/123) it outputs something like https://codesandbox.iohttps://www.github.com/test/123.

Should be a relatively uncommon edge case if people are copy + pasting GH URLs directly from their browser into the page.

I'm happy to take a look at fixing this :)

I18n support

CodeSandbox is used by a lot of users in China and Russia, I think it'll be very valuable to have an i18n system in place that people could contribute to.

This will make CodeSandbox much more accessible.

Thinks that need to happen:

• Change build system to use i18n-next
• Add a world icon to the header with a dropdown to select language, store preference in localStorage for now using preferences reducer
• Move all text to t() calls
• Move existing text to en.json

Uncaught TypeError: Cannot read property 'call' of undefined

Something is wrong trying to access this url
https://codesandbox.io/s/new

Error:

bootstrap f260dcf…:54 Uncaught TypeError: Cannot read property 'call' of undefined
    at t (bootstrap f260dcf…:54)
    at Object.0 (app.f260dcff.js:29627)
    at t (bootstrap f260dcf…:54)
    at window.webpackJsonp (bootstrap f260dcf…:25)
    at app.f260dcff.js:1

Google Chrome Version 59.0.3071.115

The application gets freezed on this screen

Tags and other new options missing from sidebar for GitHub-repo-based sandbox

That stuff isn't showing in my repo. Only in forks, ie regular sandboxes

when u deep link into files, apps dont work

all these apps are just starting on the entry point. i think the app should run based on the entry point (index.js) even if u deep link into a module u want showing in the editor. my 2 cents.

Create new Sandbox Popup Menu

When you click the ➕ to create a new sandbox, have a popup menu appear asking: "Create: Public, Private, or Hidden".

Docs on how to create synced github examples

I would like to incorporate sandboxes as live examples in redux-saga, but as those were not generated by CRA, I'm not 100% sure what are the exact requirements.

Would be great if the list of requirements would be listed in the main README.

link to forks when you click the fork icon or count

to display the forks, probably a modal makes the most sense and is the easiest.

Missing dependency detection should support scoped packages

embedded editor not reflecting changes

I'm seeing this issue for all embedded sandboxes, as an example you can checkout Formik Example.

Editing the sandbox results in the changes being reflected in the Preview view but not in the Editor view.

Uncaught SyntaxError: Unexpected token =

Custom plugin/rendering system

Jupyter like preview of .md files where code blocks are actually evaluated as 'mini modules'.

Allow directly linking to a URL

I can't see a way to do this currently. Example:

I want to directly link /topics/props-v-state for the react-router example https://codesandbox.io/s/r0wXp0Njw

Same thing for URL parameters, I want to pass external data to a sandbox via an URL parameter, but that doesn't seem possible currently.

I'm assuming this is not implemented right now because getSandboxOptions seems to be used to pass external data to the sandbox, and that doesn't contain a parameter for the initial path.

Adding this would make this project very useful for me, right now I have to use codepen.io which allows reading external URL parameters (and thus passing data to a snippet) but has many other limitations. Thanks!

SCSS support

Hi!
Is it possible to include .scss files in the codesandbox-client and import the styles to our jsx files?

Badge for readme files

Would be nice to have a small badge image, so we can use it to link from the readme on the repo to its sandbox.

Responsiveness

We're moving more and more to touch devices, CodeSandbox is in the unique position that it already works on any device.

Let's make CodeSandbox responsive and start brainstorming on React Native support.

Show tags on Profile page

Show tags under each title on my profile page. Allow me to filter by tag.

Delete sandboxes from Profile/Sandboxes

Allow the user to delete one of their sandboxes from their Profile/Sandboxes page. Either on hover, hamburger menu, or static icon. We probably want a confirmation as well, warning the user that: "This action is permanent and can not be undone! Are you sure?"

Could not find 'history'

Currently, CodeSandbox fails to import the history package even if it is an imported dependency.

Demo: https://codesandbox.io/s/wpRWxgNxz

This is not an issue for projects that have implicit history dependencies, such as React Router v4 (https://codesandbox.io/s/r0wXp0Njw).

Issues with prettier

I am getting the below error when I try to start a local instance

Error in ./~/prettier/src/parser-typescript.js
Module not found: Error: Can't resolve 'fs' in '/home/varunkumar/tmp/codesandbox-client/node_modules/prettier/src'
 @ ./~/prettier/src/parser-typescript.js 1:17303-17316
 @ ./~/prettier/index.js
 @ ./src/app/utils/codemirror/prettify.js
 @ ./src/app/components/sandbox/CodeEditor/index.js
 @ ./src/embed/components/Content.js
 @ ./src/embed/App.js
 @ ./src/embed/index.js
 @ multi react-hot-loader/patch webpack-dev-server/client?/ webpack/hot/only-dev-server ./config/polyfills.js ./src/embed/index.js

Error in ./~/prettier/src/parser-typescript.js
Module not found: Error: Can't resolve 'module' in '/home/varunkumar/tmp/codesandbox-client/node_modules/prettier/src'
 @ ./~/prettier/src/parser-typescript.js 1:17457-17474
 @ ./~/prettier/index.js
 @ ./src/app/utils/codemirror/prettify.js
 @ ./src/app/components/sandbox/CodeEditor/index.js
 @ ./src/embed/components/Content.js
 @ ./src/embed/App.js
 @ ./src/embed/index.js
 @ multi react-hot-loader/patch webpack-dev-server/client?/ webpack/hot/only-dev-server ./config/polyfills.js ./src/embed/index.js

The instance is coming up fine though. Issue seems to be similar to prettier/prettier#986

Give me a contributor badge, dammit! 😄

issue: module IDs change whenever you update a sandbox, which invalidates all embeds

Ideally module IDs stay the same once created. Not sure how they are determined, but if it's based on file-content, that shouldn't be the case either. It seems every single module ID name changes whenever you update the sandbox.

For example, the 2 links on the homepage (and all my articles) don't correctly deep-link anymore after making some updates.

Emmet.io support

I've had some requests for emmet.io support. This should be possible with https://github.com/emmetio/codemirror.

feature: language translations

I'd love to share this platform with people I know (some of whom are not native English speakers). Any thoughts on using react-intl or a platform like transifex (free for OSS) for translations?

Search box should auto focus after navigating to the search page.

Make preferences permanent

Hello Ives,

First of all, thanks for the great work, I love how easy is to create React live samples with this app.

More than an issue is an enhancement request actually. Right now if I create a new sandbox and then go back to it later that day, I have to set up all the preferences again, such as autocomplete, line height, prettier settings, etc. It would be nice to either saver those for each sandbox or create a general preferences for the account that could be fetched whenever the user creates/loads a sandbox.

Although I'm in no hurry about it, I can live with setting everything by hand for now.

Best,
Rodrigo.

feature: custom sidebar widget + custom explanation modal

I think it would be incredibly useful and save you from having to build lots of features if, for example, users could embed their own chatbox iframe in a sidebar WorkspaceItem.

I'd like to put chat in, and perhaps other things like a youtube video iframe, and wouldn't have to request these features if I could embed things somewhere.

Another place is your own modal where you can do all sorts of things, like provide pretty documentation, videos, etc.

I'm not sure which is the better/higher_priority of the 2 options. I'm leaning toward the drawer item, and an ability to specify which item is opened by default in the URL params--this way you can guarantee users see it, whereas a modal requires clicking something and many users might never see it. To me, that's the driving factor, and perhaps why the drawer item is the better place to start.

But from an implementation point of view, a modal is easier to develop. So you could just put a "more info" link in the sidebar for users that have decided to create such a page. It pops up in a modal and has 2 tabs: "Write" and "Preview" just like a github comment/issue. It's basically the "Talk" section of a wikipedia article.

If this stuff is done correctly, it will become a highly used feature of Sandboxes, just like readmes on github. I think the trick is to make it feel like a readme, so it's familiar, and therefore likely to be used more. ...but it needs to be better than a readme. Iframe embeds need to be allowed basically. And support for more custom styles. And you should be able to develop it in React, not markdown! ...by the way, i think u should rename to React Sandbox or similar. Do you support Vue and Angular. Rename again once u have those areas tamed. Better to do one thing really well. Explode in popularity because of it, and then expand. But I'm sure u have other plans, especially if u already put the work to support Vue etc.

---

Wanna know something funny, both our repos are at exactly 274 stars as of this writing:

https://github.com/faceyspacey/redux-first-router

exceeded the maximum required depth

I guess this isn't supported. Is it something that can be supported. You'd figure if it works in CRA it works here. Thoughts?

React DevTools doesn't work on sandbox

Currently the DevTools defaults to the React version of CodeSandbox, it should default to the sandbox.

Integrated console

A console you can expand from the editor pane, should work both in embed view and editor view.

TypeError: CSS2Properties doesn't have an indexed property setter for '0'

My project at https://codesandbox.io/s/Q5AE9vG0 works fine in Chrome, but shows this error in Firefox:
Error in index.js: TypeError: CSS2Properties doesn't have an indexed property setter for '0'.

I removed the inline styling of the App's root-div element. Maybe it has something to do with that?

Ability to specify file and line number when sharing embed

Suggestion by jschr:

"Actually I do have one suggestion. It would be awesome to be able to link to a specific file and even line number so I can direct the reader to the appropriate spot when clicking on the "Edit on CodeSandbox" from an embed. You could take a page from Gist and do something like https://codesandbox.io/s/[id]#file-[filename]-L[linenumber].
This would allow me to link to specific areas of the code as I'm writing up a tutorial or post."

Horizontal split

An option to have a horizontal split over the vertical split.

feature: URL param for line # to highlight :)

can the github file limit be increased?

It's currently 30. What about 60?

feature: modal showing forks when clicking fork icon/count

Icon for Private/Hidden/Public sandboxes on Profile page

In the list view, show if a sandbox is private, hidden, or public (default). Maybe show a lock icon for private. Hidden... not sure.

Allow sandbox owner to change Private/Hidden/Public state in Profile

Also allow the user to change the state without having to open the sandbox. Simular to the delete option.

feature: button to tweet a sandbox

A highly visible tweet button that allows users to share the sandbox.

Perhaps near the view/heart/fork counts.

embed URL doesn't work on the repo URL

when i was first trying to figure out how to paste a full on iframe embed to Medium, I couldn't get it to work. Try it:

https://codesandbox.io/s/github/faceyspacey/redux-first-router-codesandbox

Then i realized only forks with proper IDs have this feature working.

Also, links to this sort of URL with module IDs you want opened in the editor do not open with that file.