Scrubjay
Scrubjay is a drag-and-drop bookmarking, game-making, and wandering tool, made to collect web ephemera.
Scrubjay allows you to drag any web element into a page and then manipulate those elements casually and immediately- playing, overlapping, making research patterns or decorating lines of thought. It looks at arrangement and decoration as a space for personal agency in computation, and believes in physical, joyful interactions while browsing.
Scrubjay is usable for research, collection, game-building, website construction or simply to hold things, in the same way that you hold a pebble in your palm on the long walk home.
----
Scrubjay is hand-coded in HTML, CSS, and Javascript. With a minimal backend (no frameworks, no libraries) and entirely running on local storage, Scrubjay is unconnected to any database and sends your information exactly nowhere.
Scrubjay is in active development, and is not chasing seamless UI. You will likely run into bugs or weird edge cases! Feel free to let me know, but I'm not currently accepting code contributions.
Please note: Scrubjay is not mobile friendly. Don't even bother trying it, it will not work!
----
Getting started:
Every Scrubjay object can be clicked on, dragged around, or resized.
Double clicking an object brings up its information panel. Here you can adjust some default CSS values with sliders, or add your own custom CSS. You can also edit the HTML of the object directly.
To add a new object to your collection, just drag something onto the page from another browser window. This can be text, formatted HTML, an image, an iframe, etc. You can also click “new object” in the settings menu, or copy and paste onto the page also works with some fiddliness.
From the settings menu, you can add a New Door. This door will let you nest objects inside of it. Click a door to edit its properties, and double click to enter. In the door properties you can set CSS that will apply to all nested objects and doors.
In the settings menu are also the Scrubjay settings. Here, you can change the default image URL of your doors and apply default background and font options. You can also “freeze all objects” to test what your project will look like on export.
Exporting and sharing:
When you are ready to share your collection, select “Export HTML” from the settings. This will make a stand-alone HTML page that you can host anywhere you’d like, including itch or neocities!
If you would like to keep working, reimport that page with “Import HTML” to pick up where you left off.
More reading:
Under the “Powerful Settings” dropdown, you can access the global CSS and HTML variables and edit them live, as well as delete all objects to reset the page. You can also inject your own Javascript functions here! Consider adding them to an object by editing its onclick or onmouseover value?
If you would like to expand your collection’s functionality, consider downloading the Scrubjay project files (below) and working locally on your own computer. This will allow you to add your own media to the “files” folder, which you can then drag onto the page as normal. This way, you can include your own pdfs, videos, audio files, html pages, and more. Just remember to upload them with your exported collection!
Like what you made? Share it in the comments!
Download
Click download now to get access to the following files:
Comments
Log in with itch.io to leave a comment.
awesome tool - i'm already having a ton of fun playing with it! <3
this is genius, beautiful in its simplicity n straight-forwardness. Excited to sink my teeth into the code ^^
Ooh, this looks really cool!
really fun to make stuff in this!!
BEEN WAITING FOR THIS FOR YEARS NOW; THANK U GOAT <3
I CANNOT WAIT TO USE THIS. THANK YOU 🙏🙏👏
Incredible.