@opentf/react-node-repl NPM

OPEN TECH FOUNDATION

React Node REPL

Demo

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

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", "pkg2@1.2.3", "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', '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. DEFAULT2. 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.

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