P I X E L 8

pixel8 is a minimal JavaScript library for creating pixel art and games.

Easy-to-use: Simply use JSX to add/update/remove interactive shapes and sprites. With this library, you can create low-res UIs using the same techniques you would in any other application. And since it's just like any other JavaScript app, you can continue to use all of the tools and libraries you do in all your other projects.
Performant: Under the hood, pixel8 avoids Canvas's stateful/mutable API and relies primarily on ArrayBuffers to render bytes representing pixels directly to a <canvas> 2dContext. This low-level architecture gives pixel8 a proper "8-bit" aesthetic, solid performance, and lets future development easily take advantage of new and experimental browser APIs such as OffscreenCanvas, SharedArrayBuffer, and WebAssembly.
Customizable: There are no limitations on color palettes, resolutions, memory/cpu usage, etc. You can make your app look like it was created on a ZX Spectrum or a Game Boy. It's entirely up to you. And it's up to the community to develop an ecosystem of tools and libraries that can enforce tasteful constraints for those who wish to opt-in to them.

Installation
Usage
Examples
Community
License

Installation

Install with yarn or npm

yarn add pixel8

Usage

You should definitely check out the interactive documentation...but if you're looking for a quick start...

Option 1 - Vanilla

pixel8 comes with it's own tiny vdom implementation, so it works out-of-the-box without any external libraries like React. If you want to take this approach, here's what it looks like:

import { h, render } from 'pixel8'
// @jsx h

const App = ({ frame }) => {
  return (
    <stage fps={30} width={64} height={64} scale={6} background="#000">
    {/*
      * You can use the following components:
      * <rect>, <circ>, <pixel>, <text>, <sprite>, <transition>, <animation> and <buffer>
      * Read the API documentation at https://pixel8.vsmode.org/#drawing-shapes
      */}
    </stage>
  )
}

// the #root element should be a HTMLCanvasElement
render(App, document.getElementById('root'))

Option 2 - React

If you want to use pixel8 with React, that's cool too! The general idea is that you want to start off with something like this:

import React from 'react'
import { render } from 'react-dom'
import { Stage } from 'pixel8'

const App = () => (
  <Stage fps={30} width={64} height={64} scale={6} background="#000">
    {/*
      * You can use the following components:
      * <rect>, <circ>, <pixel>, <text>, <sprite>, <transition>, <animation> and <buffer>
      * Read the API documentation at https://pixel8.vsmode.org/#drawing-shapes
      */}
  </Stage>
)

render(<App />, document.getElementById('root'))

But seriously, check out the docs. They are very detailed + easy to understand ;)

Examples

In addition to the examples in the docs, here are a couple more

Handling User Input
Simple Pixel Editor
More coming soon...

Handling User Input

Simple Pixel Editor

Community

You can join the pixel8 community online in several places:

Issues? Questions? Contributions?

If you find a bug, have a cool idea for a feature, want to see some specific code examples/tutorials, or just want to say hello, please get in touch! Feel free to create an issue, jump into the gitter channel, or shoot me a message on twitter

License

pixel8 is MIT licensed. See LICENSE.

♥

jozanza/pixel8