Wren

Gallery

Unedited captures of Wren 0.6.25 on Windows 11, at 175% display scaling: the browser's own render of its window, all taken in one pass by wrentool shots. The demonstration pages are in examples/site.

Click a capture to open it large. In the viewer, the left and right arrow keys go through the captures and Esc closes it.

The browser

  • Wren's start page, with the tabs drawn in the window's title bar
    The start page. Tabs live in the title bar, next to the window buttons.
  • Three tabs open in the title bar: webassembly.org, sacha.house and about:demos
    Tabs in the title bar, with favicons and loading indicators; the window keeps Snap Layouts on its maximize button.
  • about:demos, the index of every demo and test page that comes with the browser
    about:demos: every demo and test page, by theme.
  • The frame statistics panel open over a page of rotated cards
    Frame statistics: phases, GPU steps, compositor, display, memory, build.
  • about:config: every preference with its description, default and bounds
    about:config: every setting, searchable, with its description.
  • Find in page on a CV: the first of nine matches highlighted
    Find in page (Ctrl+F) with a match count.
  • A word selected in a paragraph and the selection's context menu
    Text selection and its context menu.
  • The browser in its Daylight palette, showing a light page
    The Daylight palette of the interface.

JavaScript and web components

  • A page of plain HTML and JavaScript: a click counter, a list built with createElement, facts about the realm
    Plain HTML and JavaScript, run by Wren's own engine, compiled to WebAssembly; JS in the status bar.
  • The shadow DOM demo: encapsulated styles, slots, parts and a tabs custom element
    Shadow DOM: declarative roots that render without JavaScript, :host, ::slotted(), ::part(), a tabs custom element.

Engine demos

  • Filters, backdrop-filter, mix-blend-mode and clip-path on the effects demo page
    filter, backdrop-filter, mix-blend-mode, clip-path, drawn on the GPU.
  • Rotated text, nested rounded clips, a rotated scroller and form, group opacity, animated cards
    2D transforms, rounded clips, group opacity, 500 animated cards.
  • A CSS Grid demo: auto-fill gallery, dense packing, alignment
    CSS Grid: auto-fill, dense packing, alignment, subgrid.
  • Linear, radial, conic and repeating gradients in several colour spaces
    Gradients computed per pixel, in several colour spaces.
  • Masks, background-clip text, fieldset legends and colour glyphs
    Masks, background-clip: text, legends, colour glyphs.
  • A text test page: font fallback, colour emoji, ligatures, OpenType features, many scripts
    DirectWrite text: fallback, emoji, ligatures, OpenType features, bidi.
  • A page whose behaviour is a WebAssembly module
    A page written in WebAssembly: an Odin module, no JavaScript at all.

Real sites

  • sacha.house: a dark monospace site with a fire-gradient ASCII logo and emoji
    sacha.house: Tailwind CSS, background-clip: text, a fieldset legend, COLRv1 emoji.
  • webassembly.org in its dark theme
    webassembly.org: dark stylesheet from prefers-color-scheme, SVG icons, an AVIF image.
  • odin-lang.org in Wren, with its scripts running
    odin-lang.org over HTTPS, its scripts running.