OPEN TECH FOUNDATION

React Node REPL

The Node.js REPL in a React component.

Live Demo | Documentation

Features

• Simple API
• Powered by WebContainers
• 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.

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Learn more.

Installation

npm install @opentf/react-node-repl

yarn add @opentf/react-node-repl

pnpm add @opentf/react-node-repl

bun add @opentf/react-node-repl

Usage

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", "[email protected]", "pkg3@beta"];

  return <NodeREPL code={code} deps={deps} layout="SPLIT_PANEL" />;
}

API

Props

Prop	Type	Required	Default	Description
code	string	No	""	The main code to execute
deps	string[]	No	[]	The npm dependencies.Eg: ['lodash', '[email protected]']
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.

Related

• @opentf/react-sandbox - The CodeSandbox sandpack wrapper with additional features.

• @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.

License

Copyright (c) 2021, Thanga Ganapathy (MIT License).