Documentation /

Take a tour of Beaker

Welcome! Take a quick tour to get familiar with Beaker.

1. Browsing with Beaker

Beaker is an experimental peer-to-peer browser. Just like other browsers, you can browse http:// and https:// websites:

dat://

Beaker also supports a peer-to-peer protocol called Dat, which means you can browse dat:// websites like dat://beakerbrowser.com.

dat:// websites work just like any other webpage. They’re a collection of HTML, CSS, and JavaScript files that come together to form a webpage. Just like with http:// websites, you can click links, download images, and use developer tools to interact with the page.

Core concept: peers and seeding

dat:// is a peer-to-peer protocol, which means that visitors to a dat:// site connect directly to one another, downloading and sharing files. Participants on the network are called peers, and when a peer contributes bandwidth to re-upload a site’s files, it’s called seeding.

You can see the peer count for a dat:// site in the URL bar:

When you you visit a dat:// site with Beaker, you temporarily seed its files. If you want to contribute resources to that site for longer, you can use the seeding menu in the URL bar:

If you visit an https:// website that also supports dat://, you’ll see this indicator in Beaker’s URL bar:

2. View Source

dat:// websites are unique because you can inspect all the files that make up a website. To explore a dat:// website’s files, click “View Source” in the site’s dropdown menu:

This is Beaker’s View Source tool. You can view any dat:// site and its files with View Source:

View Source automatically renders README files:

And of course, you can inspect individual files with View Source too:

3. One-click publishing

One of the most compelling reasons for supporting dat:// in Beaker is that it makes it possible to share a website from the browser with one click!

To create a website with Beaker, click “Create New” in the main dropdown menu:

Then choose whether to create an empty project, use our basic website template, or to import an existing project:

We’ll choose the basic website template. Beaker will automatically create a new dat:// website, populate it with a simple template, then open the website in View Source:

We can open the website with the link on the top right:

Just like that, we made a website! To share the website with friends, we can send them the website’s URL. Anyone with the URL will be able to view the website in Beaker.

4. Beaker’s built-in editor

Since dat:// makes it possible to publish files directly from Beaker, wouldn’t it be great if you could also edit files in Beaker? You can!

Let’s open our website in View Source, then open its index.html:

If we click the edit button, we’ll be able to update the HTML directly from View Source!

Using your own editor

Prefer to use Sublime, Vim, Atom, or Code to edit your projects? You can click the “Set local directory button” to sync the website’s files to a directory on your computer. Any changes you make to the files in the directory will be published to the website.

5. “Forking” or copying a website

You can edit websites you’ve created, but you can’t edit other people’s websites. Beaker provides a built-in tool to make an editable copy of any dat:// website. If you’re familiar with GitHub, it’s kind of like “forking” a project.

Making an editable copy is especially useful when you want to customize a p2p app. For example, let’s say you use dat://fritter.hashbase.io as your social media client, but you don’t like round buttons. You could make an editable copy, then customize the CSS to change the button styles, all without losing your user data or friends list!

6. Live reloading

Beaker has a built-in live-reloading tool for all dat:// pages. Turn on live reloading, and Beaker will automatically reload the page.

Live reloading works for projects you’re working on locally and for remote projects on the peer-to-peer network!

Ready to get started?