noVNC is a VNC client JavaScript library and application. This fork adds compatibility for environments like Next.js/SSR.
Maintainer: Justin Bojarski (@Bojo-io) Original Project: noVNC/noVNC License: MPL-2.0
Note: This repository is a fork of the official noVNC library (@novnc/novnc).
Purpose of this fork:
The primary goal of novnc-next is to provide compatibility with modern JavaScript frameworks like Next.js, specifically addressing issues that arise during Server-Side Rendering (SSR) or build-time execution.
Changes Made:
The core modifications involve guarding access to browser-specific global objects (like window, navigator, document) within the library's internal modules (primarily core/util/browser.js and related files). This prevents errors such as window is not defined or navigator is not defined when the code is processed in a non-browser environment.
Usage in Next.js / SSR Environments:
With these changes, you should be able to import and use novnc-next components or classes within your Next.js application without encountering the common SSR-related errors associated with the original library. Ensure that the component using novnc-next is still treated as a client-side component (e.g., using "use client"; in Next.js App Router or dynamic imports if necessary), as the library fundamentally requires a browser environment to function.
Build Process (Required for Use):
This fork requires a build step to generate distributable files. Run the following commands within this directory:
npm install
npm run build # (Build script to be added)
(Original README content follows below)
noVNC is both a HTML VNC client JavaScript library and an application built on top of that library. noVNC runs well in any modern browser including mobile browsers (iOS and Android).
This novnc-next fork specifically adapts the library for easier use within modern web frameworks like Next.js.
Many companies, projects and products have integrated noVNC including OpenStack, OpenNebula, LibVNCServer, and ThinLinc. See the Projects and companies wiki page for a more complete list with additional info and links.
The project website is found at novnc.com.
If you are a noVNC developer/integrator/user (or want to be) please join the noVNC discussion group.
Bugs and feature requests for the original noVNC project can be submitted via its github issues. If you have questions about using noVNC then please first use the discussion group. We also have a wiki with lots of helpful information.
For issues or questions specifically related to this novnc-next fork (e.g., SSR compatibility, build process), please use the issue tracker for this repository.
If you are looking for a place to start contributing to noVNC, a good place to start would be the issues that are marked as "patchwelcome". Please check our contribution guide though.
If you want to show appreciation for noVNC you could donate to a great non- profits such as: Compassion International, SIL, Habitat for Humanity, Electronic Frontier Foundation, Against Malaria Foundation, Nothing But Nets, etc.
Running in Firefox before and after connecting:
See more screenshots here.
noVNC uses many modern web technologies so a formal requirement list is not available. However these are the minimum versions we are currently aware of:
noVNC follows the standard VNC protocol, but unlike other VNC clients it does require WebSockets support. Many servers include support (e.g. x11vnc/libvncserver, QEMU, and MobileVNC), but for others you need to use a WebSockets to TCP socket proxy. noVNC has a sister project websockify that provides a simple such proxy.
Install the package:
# Assuming published to npm:
npm install novnc-next
# For local development (linking):
# In this repo's directory:
npm link
# In your consuming project's directory:
npm link novnc-next
Import and use the RFB class:
import RFB from 'novnc-next';
// Example usage within a client-side component or script
// Ensure this code runs only in the browser
let rfb;
const targetElement = document.getElementById('vnc-canvas'); // Your target canvas element
const websocketUrl = 'ws://your-vnc-websocket-proxy:6080/';
try {
rfb = new RFB(targetElement, websocketUrl, {
// RFB options (e.g., credentials, shared)
credentials: { password: 'your-vnc-password' },
});
// Add event listeners as needed
rfb.addEventListener('connect', () => {
console.log('VNC connected');
});
rfb.addEventListener('disconnect', (detail) => {
console.log('VNC disconnected:', detail);
});
rfb.addEventListener('credentialsrequired', () => {
const password = prompt("Password Required:");
rfb.sendCredentials({ password: password });
});
// Connect using rfb.connect() if not done automatically
// Manage rfb instance lifecycle (e.g., rfb.disconnect() on component unmount)
} catch (exc) {
console.error('Unable to create RFB client', exc);
}
See the Library Usage Guide for more detailed API information.
(Optional) Testing with included viewer:
You can still use the included vnc.html page for quick testing. First, start a VNC server and the websockify proxy:
# Example: Start websockify proxy for a VNC server running on localhost:5900
websockify 6080 localhost:5900
Then, serve the novnc-next directory using any simple web server and open vnc.html in your browser.
Running the command below will install the latest release of noVNC from snap:
sudo snap install novnc
You can run the snap package installed novnc directly with, for example:
novnc --listen 6081 --vnc localhost:5901 # /snap/bin/novnc if /snap/bin is not in your PATH
If you want to use certificate files, due to standard snap confinement restrictions you need to have them in the /home/<user>/snap/novnc/current/ directory. If your username is jsmith an example command would be:
novnc --listen 8443 --cert ~jsmith/snap/novnc/current/self.crt --key ~jsmith/snap/novnc/current/self.key --vnc ubuntu.example.com:5901
The snap package also has the capability to run a 'novnc' service which can be configured to listen on multiple ports connecting to multiple VNC servers (effectively a service running multiple instances of novnc). Instructions (with example values):
List current services (out-of-box this will be blank):
sudo snap get novnc services
Key Value
services.n6080 {...}
services.n6081 {...}
Create a new service that listens on port 6082 and connects to the VNC server running on port 5902 on localhost:
sudo snap set novnc services.n6082.listen=6082 services.n6082.vnc=localhost:5902
(Any services you define with 'snap set' will be automatically started) Note that the name of the service, 'n6082' in this example, can be anything as long as it doesn't start with a number or contain spaces/special characters.
View the configuration of the service just created:
sudo snap get novnc services.n6082
Key Value
services.n6082.listen 6082
services.n6082.vnc localhost:5902
Disable a service (note that because of a limitation in snap it's currently not possible to unset config variables, setting them to blank values is the way to disable a service):
sudo snap set novnc services.n6082.listen='' services.n6082.vnc=''
(Any services you set to blank with 'snap set' like this will be automatically stopped)
Verify that the service is disabled (blank values):
sudo snap get novnc services.n6082
Key Value
services.n6082.listen
services.n6082.vnc
Please see our other documents for how to integrate noVNC in your own software, or deploying the noVNC application in production environments:
See AUTHORS for a (full-ish) list of authors. If you're not on that list and you think you should be, feel free to send a PR to fix that.
novnc-next / @novnc/novnc fork team:
@novnc/novnc core team:
Previous @novnc/novnc core contributors:
Notable @novnc/novnc contributions:
Included libraries:
Do you want to be on this list? Check out our contribution guide and start hacking!
FAQs
noVNC is a VNC client JavaScript library and application. This fork adds compatibility for environments like Next.js/SSR.
We found that novnc-next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.