notjs-react

A React component for interactive code playgrounds with real-time WebSocket terminal support. Built with Monaco Editor and xterm.js.

NotJS is a backend (Spring Boot) and React library for code playgrounds for compiled languages. It's intended to be used mainly on blogs where you want to demo language features. This is the React library component that connects to a NotJS server.

View Demo | Server Repository

Prerequisites

NotJS Server Required: This component requires a NotJS server to handle code execution. You can self-host the server by following the instructions at https://github.com/cholnhial/notjs

$3

- Java (versions 8, 11, 17, 21, 25)
- C (C89, C99, C11, C17, C23)
- C++ (C++98, C++11, C++14, C++17, C++20, C++23)
- Go (version 1.19.8)
- Rust (version 1.63.0)

Installation

``bash
npm install notjs-react
`

Usage

`tsx
import { NotJS } from 'notjs-react'
import 'notjs-react/styles.css'

function App() {
return (
apiBaseUrl="http://localhost:8080/api"
websocketUrl="ws://localhost:8080/terminal"
initialLanguage="java"
initialVersion="25"
initialDarkMode={true}
/>
)
}
`

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| apiBaseUrl | string | "http://localhost:8080/api" | Base URL for the API |
| websocketUrl | string | "ws://localhost:8080/terminal" | WebSocket endpoint URL |
| initialLanguage | string | "java" | Initial programming language |
| initialVersion | string | "25" | Initial language version |
| initialDarkMode | boolean | true | Enable dark mode by default |
| initialCode | string | (language default) | Custom starting code |
| hideHeader | boolean | false | Hide header for embedding |
| editorWidthPercent | number | 50 | Initial editor width as percentage (20-80) |

Features

- 🎨 Monaco Editor integration for code editing
- 💻 Real-time terminal with xterm.js
- 🌓 Dark/Light mode support
- 📋 Copy code and console output
- ↔️ Resizable editor/console panels
- 🔌 WebSocket-based code execution
- 🎯 TypeScript support
- 📦 Zero configuration required

Examples

$3

`tsx
import { NotJS } from 'notjs-react'
import 'notjs-react/styles.css'

function MyBlogPost() {
return (



)
}
`

$3

Perfect for use in blog posts written with MDX:

`mdx
import { NotJS } from 'notjs-react'
import 'notjs-react/styles.css'

Learning Rust

Try out this Rust example:

apiBaseUrl="https://your-notjs-api.com/api"
websocketUrl="wss://your-notjs-api.com/terminal"
initialLanguage="rust"
initialCode={fn main() {
println!("Hello from Rust!");
}}
/>
`

$3

Hide the header for a cleaner embedded experience:

`tsx
apiBaseUrl="https://your-notjs-api.com/api"
websocketUrl="wss://your-notjs-api.com/terminal"
initialLanguage="cpp"
hideHeader={true}
initialCode={#include

int main() {
std::cout << "Hello World!" << std::endl;
return 0;
}}
/>
`

Troubleshooting

$3

Although NotJS includes self-contained CSS, some frameworks may experience styling issues due to CSS purging/tree-shaking. The terminal styles (xterm.js) are added dynamically at runtime, so build tools may incorrectly remove them as "unused."

#### Symptoms
- Terminal appears with white/blank background
- Terminal resizing doesn't work
- Missing terminal UI elements

#### Solution: Wrapper Component (Recommended)

Create a wrapper component with explicit dimensions and always import the CSS in the wrapper:

`tsx
// components/NotJSWrapper.tsx
import { NotJS } from 'notjs-react'
import 'notjs-react/styles.css' // Critical: Import styles here

export function NotJSWrapper({ width = '100%', height = '600px', ...props }) {
return (



)
}
`

Then use the wrapper in your MDX/pages:

`mdx
import { NotJSWrapper } from '@/components/NotJSWrapper'

My Blog Post

width="100%"
height="500px"
apiBaseUrl="https://your-api.com/api"
websocketUrl="wss://your-api.com/terminal"
initialLanguage="java"
/>
`

Important: The CSS import (import 'notjs-react/styles.css') must be in the wrapper component file, not just in your page/MDX file. This ensures the styles are properly bundled and not purged by the build process.

Development

To develop the library locally:

1. Clone the repository:
`bash
git clone https://github.com/cholnhial/notjs
cd notjs/packages/notjs-react
`

2. Install dependencies:
`bash
npm install
`

3. Build the library in watch mode:
`bash
npm run dev
`

4. Link the library for local testing:
`bash
npm link
`

5. In your test project:
`bash
npm link notjs-react
`

API

$3

The NotJS component accepts the following props:

#### apiBaseUrl (optional)
- Type: string
- Default: "http://localhost:8080/api"
- Description: Base URL for the NotJS API server

#### websocketUrl (optional)
- Type: string
- Default: "ws://localhost:8080/terminal"
- Description: WebSocket endpoint URL for real-time communication

#### initialLanguage (optional)
- Type: "java" | "c" | "cpp" | "go" | "rust"
- Default: "java"
- Description: Programming language to start with

#### initialVersion (optional)
- Type: string
- Default: "25" (for Java)
- Description: Language version to use. Available versions depend on the language.

#### initialDarkMode (optional)
- Type: boolean
- Default: true
- Description: Whether to start in dark mode

#### initialCode (optional)
- Type: string
- Default: Language-specific default code
- Description: Code to display initially in the editor

#### hideHeader (optional)
- Type: boolean
- Default: false
- Description: Hide the header (language selector, version, theme toggle) for embedded views

#### editorWidthPercent (optional)
- Type: number
- Default: 50
- Description: Initial width of the editor panel as a percentage (constrained between 20-80). The console panel takes the remaining space. Users can still manually resize using the drag handle.

Architecture

The NotJS component architecture:

`
┌─────────────────────────────────────────────────────┐
│ NotJS React Component │
│ ┌────────────────┐ ┌──────────────────┐ │
│ │ Monaco Editor │ │ xterm.js │ │
│ │ (Code Input) │ │ (Terminal) │ │
│ └────────────────┘ └──────────────────┘ │
│ │ │ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────────────────────────────────┐ │
│ │ WebSocket Connection │ │
│ └─────────────────────────────────────────────┘ │
└──────────────────┬──────────────────────────────────┘
│
▼
┌─────────────────────┐
│ NotJS Server │
│ (Spring Boot) │
└─────────────────────┘
``

Contributing

Contributions are welcome! Please visit the main repository to contribute.

License

MIT

---

Note: This component requires a running NotJS server. For setup instructions, visit https://github.com/cholnhial/notjs