An online canvas based Pixel Art creation tool for
Go to file
Nicola 8fcc50b1a4
2023-02-13 18:12:20 +01:00
.devcontainer Add devcontainer for easy development setup 2023-02-10 17:37:41 +05:30
.github Update issue templates 2021-05-09 09:46:16 +02:00
css Final refinements 2022-10-24 13:06:41 +02:00
helpers ported to static site, removed _ext folder, split hbs files into partials 2021-07-06 17:24:20 -04:00
images Fixed tool color 2022-10-24 15:04:09 +02:00
js Resolved previous color selection i,e issue #111 2023-02-09 19:09:00 +05:30
poc_pages push2 2022-02-25 09:49:30 -05:00
svg Fixed topbar css 2022-01-31 00:16:27 +01:00
views Implement loading a palette from the menu. 2022-12-27 18:18:38 +01:00
.eslintrc.json Apply eslint --fix and fix indentation 2020-04-12 10:58:19 +02:00
.gitignore push2 2022-02-25 09:49:30 -05:00
.nvmrc Configure nvm to help us avoid constant switching between lockfile versions 1 and 2 by suggesting which Node.js/npm version to use 2021-04-26 23:14:12 +02:00
Dockerfile feat: Add Dockerfile 2022-10-06 08:09:19 +02:00
LICENCE released under GPL-3 2022-09-19 10:56:16 -04:00 Update 2023-02-13 18:12:20 +01:00 Edited contribution guidelines 2021-12-27 10:54:37 +01:00
build.js fixed links to css/js urls 2022-03-04 14:33:42 -05:00
changelog.json added layers to changelog 2020-09-09 04:00:51 +00:00
file_copier.js push2 2022-02-25 09:49:30 -05:00
hbs_parser.js Various changes 2022-02-23 11:36:15 -05:00
old_lpe1.json another push 2022-03-23 08:47:57 -04:00
package-lock.json Merge branch 'master' into pxlvxl-master 2022-10-24 12:48:08 +02:00
package.json Merge branch 'master' into pxlvxl-master 2022-10-24 12:48:08 +02:00
package.json.bak Fixed #43, #41, #37 and #35 2021-12-11 10:48:14 +01:00
server.js push2 2022-02-25 09:49:30 -05:00

Lospec Pixel Editor

This is a browser based software for creating pixel art

The tool can be viewed online here:

Before contributing

Before starting to work, please open an issue for discussion so that we can organize the work without creating too many conflicts. If your contribution is going to fix a bug, please make a fork and use the bug-fixes branch. If you want to work on a new feature, please use the new-feature branch instead.

What to Contribute

Any changes that fix bugs or add features are welcome. Check out the issues if you don't know where to start: if you're new to the editor, we suggest you check out the Wiki first.

The next version is mostly focused on adding missing essential features and porting to mobile.

Suggestions / Planned features:

  • Documentation

  • Possibility to hide and resize menus (layers, palette)

  • Tiled mode

  • Load palette from LPE file

  • Symmetry options (currently being worked on)

  • Make a palette grid instead of having a huge stack on the right when colours are too many

  • Possibly add collaborate function

  • Mobile

    • Touch equivalent for mouse clicks
    • Hide or scale ui
    • Maybe rearrange UI on portrait
    • Fix popups
  • Polish:

    • CTRL+A to select everything / selection -> all, same for deselection
    • Warning windows for wrong inputs
    • Palette option remove unused colors
    • Move selection with arrows
    • Update borders by dragging the canvas' edges with the mouse when resizing canvas
    • Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class)
    • Scale / rotate selection

How to Contribute


No requirements if you want to use Github's Codespaces. If you prefer to setup your environment on desktop, you'll need to have node.js and git installed.

You also need npm in version 7 (because of 2nd version of lockfile which was introduced there) which comes with Node.js 15 or newer. To simplify installation of proper versions you can make use of nvm and run nvm install it will activate proper Node.js version in your current command prompt session.

Contribution Workflow

Github Codespaces

  1. Click Fork above. It will automatically create a copy of this repository and add it to your account.
  2. At the top of this page, select the branch you want to work on.
  3. Click on "Code". Select the "Codespaces" submenu and click on "Create codespace on branch name".
  4. Run npm install. Then run npm run hot: it will open a popup containing the editor, so make sure to disable your adblock if you're using one.

Desktop environment

  1. Click Fork above. It will automatically create a copy of this repository and add it to your account.
  2. Clone the repository to your computer.
  3. Open the folder in command prompt and run npm install
  4. Make any changes you would like to suggest.
  5. In command prompt run npm run hot which will compile app to the /build folder, serve under http://localhost:3000, then open in your browser. Moreover, it restarts server every time you save your changes in a codebase. You can go even further by running npm run hot:reload, which will also trigger webpage reloads.
  6. Add, Commit and Push your changes to your fork.
  7. On the github page for your fork, click New Pull Request above the file list.
  8. Change the head repository dropdown to your fork.
  9. Add a title and description explaining your changes.
  10. Click create pull request.

If you have any trouble, see this page:

Feature Toggles

Some feature might be hidden by default. Functions to enable/disable them are available inside global featureToggles and operate on a window.localStorage.

For example use featureToggles.enableEllipseTool() to make ellipse tool button visible. Then featureToggles.disableEllipseTool() to hide it.