Particle Studios

Constellation Browser

Browse a special web only accessible via the Playdate!

Constellation Browser Download
Download Constellation 1.4.1
Requires Playdate 2.7.4

For installation instructions, read Sideloading Playdate games

Web development tools

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.

Where can I host my website?

Anywhere that lets you host at the very least static JSON files! Since this runs on the HTTP/HTTPS protocol, options are virtually infinite.

If you are asking what is everyone else using, websites currently available on Constellation Browser are known to be using Github Pages or Vercel.

Testing your website

Local websites, via the Playdate Simulator

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

  1. Run a server that serves your files on localhost at port 80. For instance, on a Mac you could open the root folder of your webiste with the Terminal, and then type in: 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!

Local or remote websites, on your Playdate

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 is a set of numbers.
  4. Edit navigator.favorites.json - If it's not there, 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. Find your newly added link, and select it.

Local or remote websites, on the Playdate Simulator

You can send serial messages to the app via the console in the Playdate Simulator.

In order to do so:

  1. On the Playdate Simulator, open the Constellation Browser and wait for the homepage to finish loading.
  2. Open the Console by either:
    • Pressing ⌘⇧D on Mac - Probably Ctrl+Shift+D on Windows.
    • Pressing the Console button at the bottom of the Simulator window.
    • Going to the menu Window > Console
  3. At the bottom, type !msg MY_URL where MY_URL is the full URL you want to visit
  4. Optionally, once you are there, you may also add this page to your favorites if it makes it easier to revisit the page later

Particle formatting

Particle formatting is a way to structure your website’s index.json page, as well as other pages you can link to.

Example: (view on a separate tab)

{
	"format": "particle",
	"title": "Sample website",
	"content": [
		{
			"type": "paragraph",
			"text": "*Welcome to the interwebs!*",
			"style": {
				"text-align": "center",
				"margin-bottom": 30
			}
		},
		{
			"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 G G G 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:

Notice: The maximum document size is 1 MB. Avoid using too many large, busy images within the same document to stay below this limit.

Content types

Language characters support

The main font character set supports the following languages in the specified variations:

Avoid using an unsupported variation, as some characters might not render!