Webstrates A research prototype enabling collaborative editing of websites through DOM manipulations.

Creating the “Hello, World!” of Webstrates is very simple, so let’s do it!

Start by pointing your web browser at http://localhost:7007/. If Webstrates has been installed correctly, you should now get redirected to en empty page at /frontpage.

To turn the frontpage into a “Hello, world!” example, go to your browser’s Developer Tools.

How to find your browser's Developer Tools

  • Apple Safari: Click Safari in the top-left corner, then choose Preferences..., go to the Advanced tab, check Show Develop menu in menu bar and close the popup window. Now go to the newly added Develop menu and choose Show Web Inspector.
  • Google Chrome: Right-click on the webpage and choose Inspect.
  • Mozilla Firefox: Click the Wrench icon in the Hamburger menu in the top-right corner, then choose Toggle Tools.
  • Microsoft Edge: Click the More icon (...) in the top-right corner, then choose Developer Tools.

In the DOM inspector, now right-click the <body> element and choose Edit as HTML. Modify the line to read:

<body><h1>Hello, world!</h1></body>

And click outside the text editing box. The text will now show up in the browser view and will be persisted on the server. You will notice that if multiple browsers windows were pointed at /frontpage when the change was made, the change would also be reflected immediately in the other browser windows, too.