The CodeSandbox sandpack wrapper with additional features.
- CodeSandbox
- Stackblitz (If preview is not working, try
Open in New Tab
button)
- Multiple Layouts (
Tabs
,Code+Console
, etc) - Choose between console types:
Basic
orAdvanced
(console-feed)
npm install @opentf/react-sandbox
yarn add @opentf/react-sandbox
pnpm add @opentf/react-sandbox
bun add @opentf/react-sandbox
import { SandBox } from '@opentf/react-sandbox';
export default function App() {
const code = `export default function App() {
return <h1>Hello world</h1>
}`;
return <SandBox code={code} />;
}
Name | Type | Required | Default | Description |
---|---|---|---|---|
code | string | Yes | '' | Template specific default file content Eg: nextjs -> pages/index.js |
template | string | No | 'react' | The codesandbox template. |
theme | SandpackThemeProp | No | 'auto' | The codesandbox theme. |
layout | string | No | 'Default' | Currently, there are three presets available: 1. Default 2. Tabs 3. Code_Console |
deps | string[] | No | [] | The npm dependencies. eg: ['lodash', '[email protected]']. |
files | Record<string, string> | No | {} | The files prop accepts an object, where each key is the relative path of that file in the sandbox folder structure. |
cdns | string[] | No | [] | Any third party external dependencies, eg: ['https://cdn.tailwindcss.com'] |
tabIndex | number | No | 0 | The tab index to select in the Tabs layout |
consoleType | string | No | 'Basic' | There are two types, Basic and Advanced . It uses console-feed for 'Advanced' |
-
@opentf/react-node-repl - The Node.js REPL in a React component.
-
@opentf/react-state - A global state manager for React.
-
@opentf/react-form - A simple form state manager for React.
-
@opentf/std - An Extensive JavaScript Standard Library.
Copyright (c) Thanga Ganapathy (MIT License).