Hi everyone! New here, I hope a project isn’t a bad way to introduce myself.
TL;DR: scav lets you steal and rewire UI from websites and export a portable HTML file.
I ran into malleability as a concept earlier this year, right when I started this side project. It was great to find out there’s a whole field of people already building around something I’d been circling on my own. I still feel like there is a lot of reading I need to do, which I’ll get around to at some point 
Scavenger is a substrate for portable web tools. The idea underneath it is that the browser already is a malleable substrate, we just stopped treating it like one. The original concepts (Engelbart, Ted Nelson) are still lying there beneath infinite layers of abstraction.
My goal with scav is to remove that abstraction and give you tools to use what’s already there. I also wanted to do it in the simplest way possible, which ended up being four single file, no deps, local first tools. The project is hard to explain in words, so I’d appreciate if you checked out this gif to get a grasp on the concept.
Harvest is the main feature, which lets you lift a live component off any page (not scraped, not screenshotted, the actual computed styles and cascade, rewritten straight from the runtime) as HTML to your clipboard. The tool runs from a bookmarklet command palette that has many other tools, all based on runtime DOM manipulation.
Then you can bring those components into Patchbay (a self contained infinite canvas) and wire them together with nodes, adding logic to turn them into something new. Since all state lives in the DOM as attributes, exporting it is just serializing what’s already there, so the result is a portable quine: the HTML holds both your project and the engine to make it run.
So the loop for using those tools together is:
- See UI you like on any page
- Open the bookmarklet and run Harvest
- Point and click what you want to steal
- Paste from clipboard into the Patchbay
- Wire it into something new
- Export the result as portable HTML
For example, steal Google’s searchbar and wire it to rewrite a Wikipedia card
Those two tools work with static data: Harvesting extracts the component as you see it, keeping the style alive but no connection to anything external. Quests is what brings live data into the flow. It’s a small Node TUI that can scrape either values or full components (by running the harvest on an interval) and serve them locally.
The Patchbay has input and output nodes that bring that data in or send values to the local server. If you bring in components, your wires are kept even on refresh, since updates apply by diff-morphing, which means you can have a media feed that runs logic on “whatever is newest”.
With Compiler you can write your own nodes and components for the Patchbay. For example, you could make a chart component that reads price live from an Amazon product and draws it as a line, updating itself every time a new value comes in from Quests.
An interesting consequence of the architecture is that everything is fractal. You can harvest a Patchbay you made and bring it into a new one, with its node chains alive and working. I’m currently building a library of components for audio chains, with sampling and effects built on the WebAudio API, and portability just comes as a side effect of everything else.
The README sums up everything as quick as possible, with linked in-depth docs too:
Feel free to drop any questions!
