https://github.com/open-tech-foundation/react-node-repl
The Node.js REPL in a React component.
https://github.com/open-tech-foundation/react-node-repl
console nodejs react repl sandbox terminal webcontainer
Last synced: 2 months ago
JSON representation
The Node.js REPL in a React component.
- Host: GitHub
- URL: https://github.com/open-tech-foundation/react-node-repl
- Owner: Open-Tech-Foundation
- License: mit
- Created: 2024-02-20T11:18:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-07T15:41:20.000Z (about 2 years ago)
- Last Synced: 2025-10-23T07:58:40.258Z (8 months ago)
- Topics: console, nodejs, react, repl, sandbox, terminal, webcontainer
- Language: TypeScript
- Homepage: https://node-repl.pages.dev/
- Size: 458 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[OPEN TECH FOUNDATION](https://open-tech-foundation.pages.dev/)
# React Node REPL
> The Node.js [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) in a React component.
# [Live Demo](https://node-repl.pages.dev/) | [Documentation](https://node-repl.pages.dev/docs)
## Features
- Simple API
- Powered by [WebContainers](https://webcontainers.io/)
- Install npm packages locally, directly in the terminal
- Switch between `Terminal` or `Console` View
- Keyboard shortcuts
- TypeScript support
## Upcoming
- Serialization of objects for better console view
- Code formating
- Syntax errors highlighting
- TypeScript errors
## Requirements
- Your site must be served over HTTPS.
- The following headers must be set in your deployed page.
```text
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
```
## Installation
```shell
npm install @opentf/react-node-repl
```
```shell
yarn add @opentf/react-node-repl
```
```shell
pnpm add @opentf/react-node-repl
```
```shell
bun add @opentf/react-node-repl
```
## Usage
```jsx
import { NodeREPL } from "@opentf/react-node-repl";
import "@opentf/react-node-repl/lib/style.css";
export default function App() {
const code = `console.log("Hello World")`;
const deps = ["pkg1", "pkg2@1.2.3", "pkg3@beta"];
return ;
}
```
## API
### Props
| Prop | Type | Required | Default | Description |
| --------- | ------------------- | -------- | --------- | ---------------------------------------------------------------------------------------------------------------- |
| code | string | No | "" | The main code to execute |
| deps | string[] | No | [] | The npm dependencies.Eg: ['lodash', 'chalk@4.1.2'] |
| setupCode | string | No | "" | The setup code, used to init some values.
Eg: const log = console.log |
| layout | string | No | "DEFAULT" | The predefined layouts for the components.
There are two types of layout:
1. DEFAULT
2. SPLIT_PANEL |
| editor | EditorProps | No | undefined | The editor component config. |
| terminal | TerminalProps | No | undefined | The terminal component config. |
| console | ConsoleProps | No | undefined | The console component config. |
| style | React.CSSProperties | No | {} | It is used to style the component container. |
### EditorProps
| Prop | Type | Required | Default | Description |
| -------- | ------------------- | -------- | ------- | ----------------------------------------- |
| header | boolean | No | true | Show / Hide the editor header component. |
| darkMode | boolean | No | false | The editor dark mode toggle. |
| style | React.CSSProperties | No | {} | It is used to style the editor container. |
### TerminalProps
| Prop | Type | Required | Default | Description |
| ----- | ------------------- | -------- | ------- | ------------------------------------------- |
| show | boolean | No | true | Show / Hide the terminal component. |
| style | React.CSSProperties | No | {} | It is used to style the terminal container. |
### ConsoleProps
| Prop | Type | Required | Default | Description |
| ----- | ------------------- | -------- | ------- | ------------------------------------------ |
| show | boolean | No | true | Show / Hide the console component. |
| style | React.CSSProperties | No | {} | It is used to style the console container. |
## Limitations
- Currently, it runs only Node.js v18
- By default, in REPL mode, you cannot use import statements. You need to fallback to require().
- You can run ESM modules manually in the terminal with the ESM switch on. Eg: `$ node main.js`
- It is not possible to run [native addons](https://nodejs.org/api/addons.html).
## Related
- [@opentf/react-sandbox](https://github.com/Open-Tech-Foundation/react-sandbox) - The CodeSandbox sandpack wrapper with additional features.
- [@opentf/react-state](https://react-app-state.pages.dev/) - A global state manager for React.
- [@opentf/react-form](https://react-form.pages.dev/) - A simple form state manager for React.
- [@opentf/std](https://js-std.pages.dev/) - An Extensive JavaScript Standard Library.
## License
Copyright (c) 2021, [Thanga Ganapathy](https://github.com/Thanga-Ganapathy) ([MIT License](./LICENSE)).