Particle Studios

Constellation Browser

Browse a different web from your Playdate!

Constellation Browser Download
Download v1.1.0

To learn how to install, read Sideloading Playdate games

Web Developer documentation

Constellation Browser does not open HTML pages, instead it opens JSON files using a special format named "particle".

It is possible to run your own webserver to host your own Particle websites.

No direct URL input is possible from within the browser. For users to visit it, you will have to request to get it listed at:

  1. The browser’s Directory: send an e-mail to pablo@particlegs.com to get it listed there, with the website title and URL.
  2. Another, already listed website’s referral links or directories, if they have any.

Requirements for a webserver

  1. Support http:// or https:// protocols.
  2. Serve an index.json at the root, using Particle formatting as shown in the next section.

Testing your website locally

You can use the Constellation Browser to test your website locally on port 80. In order to do that:

  1. Run a server that at least serves your files statically on localhost at port 80. For instance, on Mac you could go to the root folder of your website via the Terminal and type: python3 -m http.server 80
  2. On the Playdate Simulator, open the Constellation Browser and you’ll land at the homepage. If you aren’t there, select "homepage" from the Playdate Menu within the app.
  3. Scroll down to "Making your own website", and select the option once it becomes focused. Then press the "A" button.
  4. Scroll down to the link to 127.0.0.1:80, and press the "A" button.
  5. ???
  6. Happy testing!

Testing a remote website

It is possible to add custom URLs to favorites to test your servers hosted on a staging or production server. In order to do so:

  1. Connect your Playdate to your computer.
  2. Enter Data Disk Mode.
  3. Open the Data folder, then locate the folder named user.XXXXX.com.particle.browser - XXXXX will be a set of numbers.
  4. Edit favorites.json - If it's not there, you can create it.
  5. Add your item to favorites. The file should look something like this: 
    [
	"https://browser.particlestudios.eu/",
	"http://127.0.0.1/"
]
  6. Exit Data Disk Mode.
  7. Open Constellation Browser on your Playdate, push the Menu button, and select Favorites
  8. Select your custom defined address.

Particle formatting

Particle formatting is a way to structure your website’s index.json file.

A basic structure is the following:

{
	"format": "particle",
	"title": "Sample website",
	"content": [
		{
			"type": "paragraph",
			"text": "*Welcome to the interwebs!*",
			"style": {
				"text-align": "center"
			}
		},
		{
			"type": "paragraph",
			"text": "Hello world!\nWe support line breaks *and some basic styling!*"
		},
		{
			"type": "button",
			"label": "Go to the pond folder",
			"action": "/pond/"
		},
		{
			"type": "button",
			"label": "Go to the duck file",
			"action": "/pond/duck"
		},
		{
			"type": "paragraph",
			"text": "The browser also supports inline images. Behold, a heart!"
		},
		{
			"type": "image",
			"width": 7,
			"height": 7,
			"pixels": "011011 1111111 1111111 1111111 011111 00111 0001",
			"style": {
				"scale": 3
			}
		},
		{
			"type": "list",
			"items": [
				"*Reason 1 ducks are awesome:* They cuack.",
				"*Reason 2 ducks are awesome:* They waddle."
			]
		}
	]
}

See the currently used index.json shown when opening the browser

The top-level properties are:

Content types