dev-sandbox

dev-sandbox ^[beta]

Play with your local code live in browser

Features

• Deploys sandbox from root of your package.
• Typescript ready. Recognizes the types of local files and installed packages.
• Builds the code using esbuild and sends the result directly to the browser.
• Syntax highlighting and code validation using monaco.

Install

You can install dev-sandbox globally and use it from any local package.

$ yarn global add dev-sandbox

or

$ npm i -g dev-sandbox

Configuration

cosmiconfig is used for managing configuration. Any of rc file can be used for config. For example: .sandboxrc, .sandboxrc.json, .sandboxrc.js, etc (see examples in cosmiconfig).

You can view an example of config below (.sandboxrc.js):

const initialCode = `
import React from 'react'
import ReactDOM from 'react-dom'
import ThemeProvider from './src/ThemeProvider'
import Button from './src/components/Button'

const App: React.FC = () => {
  return (
    <ThemeProvider>
      <Button>Hello</Button>
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.getElementById('app'))
`;

module.exports = {
  // Option that enables the use of typescript (default: true)
  typescript: true,
  // Initial code in editor (default: '// Example...')
  initialCode
}

Usage

$ cd ./my-package
$ dev-sandbox

✔ Typescript config loaded from tsconfig.json
✔ Types generated
✔ Server listening on http://localhost:3000

License

dev-sandbox is MIT licensed.