Pixel-art to CSS with react

Did you know that you can create pixel art using a single CSS property?

pixel-art-react is a handy and intuitive tool, that can help you to design your awesome drawings!

Try to draw some pixels on the screen, pixel-art-react will generate the CSS code using box-shadow property, ready to use in your HTML blocks.

Check the following mini-pixel-spiderman example:

The project is built with React, Redux and ImmutableJS. Trying to avoid side-effects in a functional way of programming.

You will be able to load and save drawings, undo redo your actions, change grid properties, share your drawings and download them, everything in a very easy and fast way.

See it live at pixelart-to-css-react

Help me to improve it, share and enjoy :)

Technical overview

This application has been built with the following technoligies:

• React (Library to build the UI)
• Redux (Implement Flux architecture)
• ImmutableJS Helps to keep the data immutable
• NodeJS + Express (Server side to build an universal application, create and serve the generated drawings)

Installation

npm run install

Development

If you just want to develop the interface with no need of back-end side, taking advance of webpack-dev-server and react-hot-loader.

npm run development

Deploy

Create the final build and run the generated react html on a express server making in an isomorphic/universal way.

npm run deploy

npm run server

A config.json is needed for deployment with the Twitter and express keys.

Testing

npm run test