Home

Awesome

<x-nes>

You once had a NES in your home, now you can have one on your web page. <x-nes> is the web component you didn't know you needed.

x-nes screenshot

Installation

<x-nes> can be installed through npm or bower:

npm install x-nes
bower install x-nes

Usage

Using <x-nes> is easy. Simply import a piece of HTML and then start using the tag:

<link rel="import" href="./node_modules/x-nes/dist/x-nes.html">

<x-nes src="./roms/supermario.nes">

See the demo for an example.

The following attributes are supported:

NametypeDescription
autoplaybooleanIf true, ROM will automatically load and play.
mutedbooleanIf true, sound will be disabled.
preload"none" or "auto"If "auto", ROM will be preloaded (but not played).
posterstringPath to image to use when ROM is not playing yet.
srcstringRequired. Path to INES ROM (usually .nes) file.

Browser support

<x-nes> works in Chrome and Opera without any dependencies. Other modern browsers require the webcomponent.js polyfill (the most recent versions of IE and Firefox have been tested).

Build it yourself

<x-nes> can be built by installing the dependencies, then running make:

npm install
make

This will create x-nes.html in the dist/ directory.

My game favorite game doesn't work!

<x-nes> is built on NESNES. If you find any problems, please file an issue there.

Icon credits

The icons were borrowed from the plyr HTML5 media player. Do check it out!