RetroWeb Components

RetroWeb Components is a library of WebComponents for working with JavaScript-based emulators.

This library was created by splitting up the functionality of the RetroWeb Vintage Computer Museum into smaller stand-alone components. These components are meant to be simple enough to be incorporated into other websites or used with other JavaScript emulators.


The inline-svg tag inserts SVG images into the document where they may be styled or animated using CSS rules.
   inline-svg:hover {
      --path-color: green;

<inline-svg src="test.svg"></inline-svg>

Element Attributes:

URL for the SVG

CSS Attributes:

Color of SVG path elements


Surrond the canvas element of an emulator with this element to give it the look of a vintage computer.

<emulator-skin name="macplus">
   <canvas id="screen-area"></canvas>
   <div id="sidebar">
      Additional content can go here

Element Attributes:

Name of skin (e.g. "macplus")
Set to "right" to push the emulator's screen to the right side of the page

JavaScript Methods:

Same as "name" attribute
Return an array of names of skins


Surrounding an emulator's canvas with this element to give it the ability to animate in and out of full screen mode:


This element provides no controls for triggering the action. Use this element alone if you intend to build your own user interface, otherwise combine it with emulator-buttons for a complete solution.

JavaScript Methods:

Zooms the contents to full screen
Zooms the contents back to the original size
Alternates between the zoomed and unzoomed state
Returns the current zoom state

emulator-buttons (for use with animated-zoom)

Surround an element with emulator-buttons and animated-zoom to give the emulator interactive on-screen buttons:


The buttons will be shown on the emulator's screen when the user hovers over it. The buttons do the following actions:

  • Left: Triggers the surrounding animate-zoom into zooming out to full-screen.
  • Center: Allows the user to interact with the emulator.
  • Right: Triggers a callback function to reset the emulator.
In addition to the floating controls, emulator-buttons will also add two buttons to the full-screen mode, allowing the user to exit full screen mode or restart the emulator.

JavaScript Methods:

Sets a function to be called when the user clicks the restart button


Modern UI Icons for interface icons.


Shows dialog and status boxes over the emulator.

<div style="position: relative">

The various dialog boxes can be triggered by JavaScript and will provide results via callbacks.

JavaScript Methods:

setVisibility(named, visibility)
Shows or hides a named popup
Sets the string on the status popup (does not show it)
askForFile(prompt, callback)
Shows the popup asking the user to choose a local file; calls callback with file as an argument
Shows the popup informing the user that a ROM is needed and allowing the user choose one; calls callback with file as an argument
Returns an array of popup names
Folder Folder with Boot Files Bootable Disk Bootable Floppy Floppy Boot into ROM ROM No Dot Local Document External Hyperlink Download File Download Floppy Upload File Upload Floppy Enter URL Interact with Cassette Start Emulator


Shows icons for mounting disks or triggering actions.

   <a data-type="type" href="resource-url" data-json="{ ... }"></a>

Anchor Attributes:

Select icon type
Link to the resource (such as to a disk image)
Additional configuration data, JSON encoded

Data-Type Values:

  • folder
  • folder-dot
  • boot-hd
  • boot-floppy
  • floppy
  • boot-rom
  • rom
  • doc
  • hyperlink
  • download-file
  • download-floppy
  • upload-file
  • upload-floppy
  • enter-url
  • cassette
  • power


Crystal Clear icon set by Everaldo Coelho


Uses peer.js to establish a simulated dial up connection through WebRTC between two browser windows (possibly across the world).

Automatically assigns a virtual phone number for the user, implements the Hayes command set for control and supports a terminal widget for interaction.

<serial-modem peer-config='{"key":"your-peerjs-cloud-key"}'>

JavaScript Methods:

setReceiveDataCallback(function (data) {...})
Sets a function to be called when data is available from the remote end (when online) or the command interpreter (when in command mode)
Sends data to the remote end (when online) or the command interpreter (when in command mode)

Element Attributes:

JSON string containing option argument for PeerJS Peer object, which generally will contain your PeerJS Cloud key, or connection info for your private PeerServer. Alternatively, you may set RetroWeb.peerJSConfig to a JavaScript object.
If "no-terminal" is present, the terminal will be inaccessible.
If "hide-terminal" is present, the terminal will start out hidden and a "Show Terminal" link will be present.

Additional Examples

Fork me on GitHub