Did you know you could use React to create custom UI components with access to netscript?

Turns out it's pretty simple since React and ReactDOM are already present in Window object of Bitburner.

1. Use an IDE with ability to sync files to Bitburner

   • There is a great extension available for VSCode which can be found here

2. Run the game

3. Backup your save

1. Clone the repo and install packages

git clone https://github.com/oddiz/bitburner-react-ui-example.git
cd bitburner-react-ui-example
npm i

2. Enter your Bitburner API key inside .vscode/settings.json

"bitburner.authToken": "YourAPIKeyHere"

3. Run build npm run build
   • If you want automatic build on file change use npm run dev

Run ui-example/ui.js from Bitburner:

run ui-example/ui.js

_{^{Except for the input field titled Monitor, everything is placeholder and has no function in game.}}

• Imports must be done with full path with a / at start in order for Bitburner to find.

import { Button } from "/ui-example/components/Button";

• UI doesn't disappear if you kill ui.js. However using it without running the script will very likely cause errors.

If you still have questions you can message me on discord

oddiz#9659