simple-codesandbox

simple-codesandbox

easily display configurable codesandbox iframe

Install

npm install --save simple-codesandbox

or

npm install --save simple-codesandbox

Embed Options

The options shown in the embed modal are not all options available. We need a new UI for the share model to reflect these options, in the meantime you can find them here.

Option	Description	Values	Default
codeMirror	Use CodeMirror editor instead of Monaco (decreases embed size significantly).	boolean	false
editorSize	Size in percentage of editor.	number	50
eslint	Use eslint (increases embed size significantly).	boolean	false
expandDevTools	Start with the devtools (console) open.	boolean	false
fontSize	Font size of editor	number (in px)	14
forceRefresh	Force a full refresh of frame after every edit.	boolean	false
hideNavigation	Hide the navigation bar of the preview.	boolean	false
highlights	Which lines to highlight (only works in CodeMirror)	comma separated list of line numbers
initialPath	Which url to initially load in address bar	string	/
moduleView	Evaluate the file that is open in the editor.	boolean	false
previewWindow	Which preview window to open by default	console / tests / browser	browser
runOnClick	Only load the preview when the user says so.	boolean	false
verticalLayout	Whether to show the editor and preview vertically.	boolean	false
view	Which view to open by default	editor / split / preview	split, preview for small screens
module	Which module to open by default. Multiple paths comma separated are allowed, in that case we show them as tabs	path to module (starting with /)	entry path

Example Embeds

These are some examples of embeds, based on their properties.

Usage

const App = () => (
  <CodeSandbox sandbox="github/glweems/empty-sandbox" />
)

Smallest Embed

const App = () => (
  <CodeSandbox sandbox="github/glweems/empty-sandbox" codeMirror />
)

License

MIT © glweems