workbenchdev / workbenchdev/Workbench

Add a browser/PWA version

Open
#894 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
844
Forks
91
Avg merge
7h 12m
Merged PRs (30d)
1

Description

Many other prototyping tools for UI frameworks have the option to run in the browser to make it easier to share examples or work without setting up a local development environment, even if the target primarily native platforms:

It would be great if it were possible to create a similar web-based playground for Workbench, whether for docs or examples, or just for experimental. There are two ways of achieving this with different complexities:

  • Using Broadway. This way, an instance of Workbench can run on a server somewhere, and be exposed via the HTML/Canvas GTK renderer. This works well for simple examples, but more advanced usecases (OpenGL, embedding, Webviews, Videos etc.) don't work.
  • Using Greenfield. This is a full Wayland compositor that runs in your browser, and can already run the Flatpak version of Workbench out of the box. It can either run apps with Wayland clients attaching natively on the browser site (through WebAssembly), or on the server side (with the raw Flatpak version). From my testing, this works extremely well; even the GTK inspector, video playback, webviews, and OpenGL all work. Also runs in Chrome, Firefox and Safari/GNOME Web without problems.

Here is Workbench, rendering a WebKit webview, running in the browser with the second method:

Screenshot of Workbench running in Chrome

Which was as simple as setting up a new app in Greenfield's example-applications.json:

"/workbench": {
    "name": "Workbench",
    "executable": "flatpak",
    "args": ["run", "re.sonny.Workbench"],
    "env": {}
  },

Ofc, this would require a server (not just a CDN) to actually host the app similarly to how Broadway would require a server. A better way would be to compile Workbench using the Greenfield SDK, which would mean that it could run natively in the browser using Wasm, but I'm fairly certain that this would require some porting work. The Greenfield talk from FOSDEM 2024 contains a lot of interesting info on how this works internally.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the two proposed approaches, Broadway and Greenfield, and read the Greenfield SDK material and its example-applications.json entry. Determine the scope and hosting requirements for a browser-based Workbench playground; done would mean an agreed implementation path rather than only a server-side experiment.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, wasm
Domain
desktop-dev, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.