[BETA] Pixel Art to Hopscotch JSON

hey all ^-^

so i was bored and threw together a proof of concept pixel art editor in a few hours which lets you create pixel art on the web and can output .hopscotch json files from that pixel art. note that this is incredibly rushed and i just put it together as a proof of concept :)

what can this tool do?

basically it allows you to create pixel art in a 32*32 grid in black and white, and then export that to a pen hopscotch project. why so restrictive? because im lazy and i just want to get something out there, ill update with colors sometime soon :)

an example would look something like this:

why is it dots and not actual squares? because im lazy and i rushed everything, but since this is all made with custom blocks, you can change it to be whatever you like!


website of actual tool (the one you’ll probably want)
github repo (the code right now is really messy, ill probably rewrite it or refactor it soon)
demo project

how do you use it?

instructions :D

NOTE: this tool is not tested on mobile, use a computer for best results

  1. create a project, it doesnt matter what you put in it but note that it will be erased afterwards. make sure to save it and it’s your most recently opened/edited project.

  2. next, you’ll need to import the json file. you can do this through itunes. i wont cover this here but @MR.GAM3R made a good guide on his website, follow steps 1-8. (thanks mr.gamer ^^)

  3. now you need to make the pixel art. go to the tool and make your pixel art. click any square to color it black, click it again to color it white. once you are done, click convert and you’ll get json in the output text area. copy that.

  4. find where you saved your json files (i’d recommend making a backup first, you dont wanna mess up your projects) and open the project you made at the beginning. this should be the most recently modified one. open it (you can do this by right clicking the file and opening it with notepad). now delete everything and paste in the json generated by the tool. be sure to save it.

  5. now you need to put the updated files back into hopscotch. again, follow @MR.GAM3R’s guide (follow steps 21-25)

  6. done! restart and open up hopscotch and you should see your project.

you should have gone from something like this:

to a project like this:

finishing thoughts or something idk

thanks for reading through this long post <3

i doubt anyone would actually use this version of the tool but as the tool progresses it should become actually useful. i mean, this was literally thrown together in a few hours. also if anyone actually know how hopscotch json works, id love to be taught it, since most of the time making this was trying to figure out what was going on in the json file, its so confusing :)

also plan on updating this with more colors, clones to speed it up and square pixels, and one day maybe even a variable canvas size, but thats too much work for my lazy self haha.

also also programming in vanilla web js is so annoying :(


i really hope im using these tags right sorry if im not heh @pomtl @omtl
also sorrynot sorry for only using lower case


wow this is really cool! i’ll definitely give it a try later when i have some time

(first time i’ve ever gotten first post)


thanks :))

and congrats on first post i guess :D


Amazing! The best think to do when you are lazy is to actually code a useful application :slight_smile:


Another addition for the Shortcut eh?


Yes definitely bro


Cool! I’ll def check it out :slight_smile:


haha yeah ikr

also thanks :))

1 Like

wait can you actually integrate this kind of stuff into a shortcut? i have no idea how they work lol


It depends on how well the tool works. I can use any javascript in Shortcuts because it supports HTML and contents of webpages.


This looks amazing! :smile:


@Awesome_E idk how you’d go about getting the output but cool :)



“Get Contents of Web Page”


oh huh the shortcuts thing is a lot more extensive than i thought

1 Like

It might seem limiting, but then you realize it can do anything with a JSON file, Regular Expressions, and JavaScript (through HTML), and you can make some pretty cool things! I took Mr.Gam3r’s MIDI Hack for Hopscotch and integrated that, and more people use it now :slight_smile:


i should probably look more into this, sounds pretty powerful tbh


Nice! It works perfectly!

Also, am I allowed to edit the code somewhat to make it more powerful?

(And it can be done without a computer. You just need the Apple ‘Files’ app and the Apple ‘Shortcuts’ app.) :smile:


thanks!! and yeah ofc, do whatever you want its open source :)

and idk anything about the new files and shortcuts stuff so heh

1 Like

Wow nice :+1:


How would I edit what was inside the ‘Ability ID’ of the custom blocks? I’ve gone through the code and I think I understand a bit of it, but I’m wondering how you set what was inside those Ability IDs.

I want to change the type of pixels, to make it into smooth square ones with clones, instead of the dots.