Patchies - Web Components API

Patchies.app provides an embeddable web component written in Vue.js.

Here's how to embed the patchies web component:

<!-- script tag to embed patchies -->
<script src="https://patchies.app/0.0.1.js" async defer></script>
 
<!-- displays an unlocked empty patch -->
<x-patchies />
 
<!-- specifies the sandbox url -->
<!-- a sandbox is just a static JSON file -->
<x-patchies url="./cat.json" />
 
<!-- loads a sandbox from another domain requires CORS -->
<x-patchies url="https://foo.bar/cat.json" />
 
<!-- loads a sandbox from the patchies server -->
<!-- enables live collaboration, saves and forks -->
<x-patchies url="https://patchies.poom.dev/s/cool-kitten" />

When fetching a sandbox from Patchies Server, the JSON contains the serverMeta block with that server's metadata. This tells patchies to enable server features such as multiplayer.

{
	"serverMeta": {
		"id": 1126,
		"name": "Little Kittens",
		"baseUrl": "https://patchies.poom.dev",
		"slug": "cool-kitten",
		"author": "Poom Mano",
	},
	...
}

Sandbox's Lock Modes

The lock-mode attribute sets the lock modes of the sandbox. Defaults to unlocked if unspecified:

<!-- always keep the sandbox locked -->
<!-- can only interact with existing objects -->
<!-- cannot create new ones -->
<x-patchies lock-mode="always-locked" />
 
<!-- starts off locked but allows unlocking. -->
<!-- unlock button is visible. -->
<x-patchies lock-mode="can-unlock" />
 
<!-- can add new objects to the sandbox. -->
<!-- lock button is visible. -->
<x-patchies lock-mode="unlocked" />

When a sandbox is locked, it acts like a typical simulation where you can't see or edit the underlying code. You can only interact with what's there.

When a sandbox is unlocked, you can add more objects to the sandbox, drag cables together and play with it. You can see how the patch is implemented.

Sandbox editor

This allows you to create new sandboxes, as well as customize the rules, objects and behaviors of existing sandboxes.

<!-- opens the sandbox editor. -->
<!-- you can save the new sandbox to a JSON file. -->
<x-patchies sandbox-editor />
 
<!-- opens the cat sandbox in the sandbox editor. -->
<x-patchies url="./cat.json" sandbox-editor />
 
<!-- uses the remote server as a CMS. -->
<x-patchies url="https://patchies.poom.dev" sandbox-editor />

#patchies

Back to Home