DEV Community

Emil Merle
Emil Merle

Posted on


Pixlr: Social Network based on Pixelart using Appwrite

Overview of My Submission

Pixlr is a social network developed by two developers that focuses on simple pixel art. It was created in the course of the "Appwrite Hackathon on DEV" under the category "Web2 Wizards". The user interface was created using the web framework "Svelte" and the CSS framework "Bulma". The backend uses the self-hosted open-source backend server "Appwrite", which provides databases, user management and many other features.

Creating posts in Pixlr is done with the help of a simply designed editor that provides a 32 by 32 pixel canvas for painting artistic masterpieces.

An Appwrite server is used as the backend. The Account API is used for independent registration via the frontend, as well as for linking posts, likes and comments with the respective creators. The posts, likes, comments and news (for display on the news page) are each stored in a separate collection. The structure of the documents can be seen in the following screenshots. To store the individual images of the posts, the Storage API is used and the IDs of the created files are stored as an attribute within a posts document.

Attributes of the "Posts" collection:
Attributes of the posts collection

Attributes of the "Likes" collection:
Attributes of the likes collection

Attributes of the "Comments" collection:
Attributes of the comments collection

Attributes of the "News" collection:
Attributes of the news collection

We are using Appwrite functions for various things, for example to create a post or to delete a comment. With the execute access for functions, we can make sure only registered users can create and like posts or write comments. Also, we can automatically get the user that triggers the function and link him to the post or comment he creates.

Submission Category:

  • Web2 Wizards

Link to Code

GitHub logo FinnKr / pixlr

A Pixelart based social network


A Pixelart based social network.


Pixlr was developed during the Appwrite Hackathon in April and May 2022 and is published on

Pixlr lets users create 32x32 pixelarts and share them directly with other users. People who are logged in can comment and like post from other users to give feedback on created art.

Pixlr is using Appwrite as backend and Svelte and Bulma as frontend.

A small article about this project can be found at here.

Getting Started


  • NodeJS (for Frontend)

Installing and executing program

  • run npm install in the Frontend/pixlr-frontend folder.
  • run npm run dev to start a local webserver.
  • The Backend uses a configured appwrite installation. If you want to host your own Backend have a look at the article about this project.



This project is licensed under the MIT License


Link to Website:

Screenshots of our Website

The Home Page

The Home Page

The News Site

The News Site

The Image Editor

The Image Editor

Additional Resources / Info

All Collaborators:


Top comments (2)

kellychen04 profile image

A very cool and fun project! BTW, your link to the demo is broken.

emilmerle profile image
Emil Merle

Thank you a lot!
The link should work now, thanks for pointing it out.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.