A React component that runs a Node.js environment in the browser using [WebContainers](https://webcontainers.io/).
npm install webcontainer-react-runnerA React component that runs a Node.js environment in the browser using WebContainers.
``bash`
npm install webcontainer-react-runner
You can pass a JSON object representing your project's file system to the component.
`jsx
import { WebContainerRunner } from 'webcontainer-react-runner';
import 'webcontainer-react-runner/dist/webcontainer-runner.css';
// Example project structure
const myProject = {
'package.json': {
file: {
contents: JSON.stringify({
name: 'my-app',
version: '1.0.0',
scripts: { start: 'node index.js' },
dependencies: {}
}, null, 2)
}
},
'index.js': {
file: {
contents:
const http = require('http');
const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello from WebContainer!');
});
server.listen(3000, () => {
console.log('Server running quite smoothly at http://localhost:3000/');
});
}
}
};
function App() {
return (
export default App;
`
| Prop | Type | Description |
|------|------|-------------|
| files | FileSystemTree` | An object representing the file system structure. |
- Full Node.js environment: Run Node.js commands directly in the browser.
- Terminal Integration: Includes a fully functional terminal.
- File System: Virtual file system with read/write capabilities.
- Editor: Built-in Monaco editor for editing code.
MIT