apm install atom-codesandbox
An Atom package that let's you magically preview your current file in a Codesandbox pane.
No dependency management needed, just import
or require
what you need and Codesandbox's hosted bundler Sandpack will hot-reload and preview your code!
Create a javascript file, save it, then run Codesandbox: Toggle Preview Pane
from the Command Palette.
For example:
import randomColor from 'randomcolor'
console.log(randomColor())
You'll see a random color appear in the Preview Pane console!
Psst: You can also create a new scratch file in your temp directory by running Codesandbox: New Scratch Pad
There's a <div id="root"></div>
that's available to your code, if you want to render something to the DOM.
For example with React:
import React from 'react'
import { render } from 'react-dom'
render(<marquee>Hello world!</marquee>, document.getElementById('root'))
You can import a specific package version by appending the version to the package name, prefixed by an '@' character:
import React from '[email protected]'
// named tags also work
// import React from 'react@next'
This package does not assign a shortcut by default, you can run Application: Open Your Keymap
from the Command Palette add one of your choosing to your keymap.cson
:
'atom-text-editor:not([mini])':
'ctrl-alt-c': 'codesandbox:toggle-preview-pane'
'ctrl-alt-n': 'codesandbox:new-scratch-pad'
There's no support (yet) for special configuration via package.json
or webpack.config.js
.
This package will only look at the active file and recursively gather its dependencies and file contents. The gathered files are only bundled locally in a ServiceWorker and never sent to Codesandbox or a third party. Nothing will be persisted until you choose to 'Open In Codesandbox' at which point they are turned into a dedicated Sandbox.
https://github.com/CompuIves/ for his incredible work and stewardship of Codesandbox without which this project would not have been possible. <3