Emulatorjs is a js library to configure and run retro games in web version of retroarch with great UI and features like save states, capturing screenshots, configuring controls, etc... Emulatorjs team did the great job to compile retroarch cores. Check out cores list.
react-emulatorjs is a easiest way to use emulatorjs in React with full typescript support including all emulatorjs options. Available cores, available options.
Install react-emulatorjs
npm install react-emulatorjs
Next we have to provide url to ROM. It can be somewhere in the internet. Or we can upload a local file. Let's create a file handler to make url to our local blob.
Next we have to select core and start the emulator when the rom is ready.
import { ChangeEvent, useState } from "react"
import { EmulatorJS } from "react-emulatorjs"
function App() {
const [rom, setRom] = useState<string>()
const onFileSelect = async (e: ChangeEvent<HTMLInputElement>) => {
if (!e.target.files?.[0]) return
const file = e.target.files?.[0]
setRom(URL.createObjectURL(file))
}
return (
<>
<input type="file" onChange={onFileSelect} />
{rom && (
<EmulatorJS
EJS_core="nes" // emulator core
EJS_gameUrl={rom} // rom url
/>
)}
</>
)
}And thats all! Now You can run nes roms in browser.
Checkout codesandbox demo with this code.
The most important option is EJS_pathtodata. This path points to emulatorjs's binaries. And the best performance option is keep them close as possible, on Your sever. And it is very easy.
- Just extract
datafolder from latest emulatorjs release and copy in to project'spublicfolder. For example, if You are using 'vite' data folder should be in/public/data. - Update prop with new path
<EmulatorJS //... EJS_pathtodata="/data" />