Skip to content
GJSify

Minimalist Browser

A bare-bones browser shell — URL bar, back / forward / reload buttons, an <iframe> filling the rest. The same TS source compiles for the browser (where the iframe is a real iframe) and for GJS (where it’s an IFrameBridge wrapping a full WebKit.WebView).

Live demo

Section titled “Live demo”

What it exercises

Section titled “What it exercises”
PillarWhat it needs
@gjsify/iframeHTMLIFrameElement + IFrameBridge → WebKit.WebView
@gjsify/dom-elementsHTMLInputElement for the URL bar, click handling
@gjsify/event-bridgeGTK click events on the toolbar buttons
Adwaita widgets (GJS)Adw.HeaderBar + Gtk.Entry for the chrome

Run it on GJS

Section titled “Run it on GJS”
gjsify showcase minimalist-browser

Opens a GTK4 window. The chrome is an Adw.HeaderBar with native GTK buttons; the content area below is the IFrameBridge widget. Type a URL, hit Enter — WebKit loads it (full browser-grade web compat: cookies, JavaScript, CSS, the lot).

Run it in the browser

Section titled “Run it in the browser”
import { mount } from '@gjsify/example-dom-minimalist-browser/browser';
mount(document.getElementById('app')!);

The same <input> + button handlers, the same <iframe> element. The browser embed is fully self-contained.

Source

Section titled “Source”

showcases/dom/minimalist-browser/

  • src/browser-demo.ts — shared BrowserCore (history stack, postMessage wiring, built-in page:<name> library) — runs unchanged in both targets
  • src/gjs/gjs.ts — Adw.Application + Adw.ApplicationWindow host driving IFrameBridge
  • src/browser/browser.ts — mount(container) module: DOM shell + real <iframe>
  • src/browser/browser-main.ts — standalone fullscreen browser entry (calls mount(document.body))

The IFrameBridge story

Section titled “The IFrameBridge story”

Unlike Canvas2DBridge / WebGLBridge / VideoBridge, which are pure-JS polyfills wrapping native GTK widgets, IFrameBridge IS WebKit.WebView. That’s the entire point — we don’t reimplement HTML rendering; for embedded web content the right tool is a real browser engine.

The bridge exposes the standard HTMLIFrameElement API surface (src, srcdoc, contentWindow.postMessage, navigation events) so that code shaped like browser code works without a special “you’re in GJS” branch. The WebKit.WebView is the engine; the iframe element is the contract.

See Bridge widgets pattern for when to reach for this — pretty much any time you embed third-party web content or a sandboxed report inside a GJS app.

Section titled “Related”