View template source in NetNewsWire with JavaScript

Posted
6 April 2025

This weekend I sat down to do a little more on my NetNewsWire theme and got side tracked delving into what is possible in a 2025 NetNewsWire theme. I’ve applied some of what I learned into an updated version of the Template variables theme.

Side loading theme assets

I was hoping it might be possible to do something similar today to load a (suitably licensed) web font from a theme package.

Much older versions of NetNewsWire loaded the selected theme CSS into the web view with a <link>. My theme for this era of the app Ollicle Reflex used JavaScript to get that path, then used it to fetch additional resources from the theme package including more JavaScript and images.

View source in NetNewsWire

To determine if there were any paths rendered in the view I needed to see how the web view was put together. It is not inspectable with dev tools, so I turned to JavaScript.

The JavaScript is not complicated:

Object.assign(document.getElementById("fullSource"), {
	value: document.documentElement.innerHTML
});

This grabs the source of the web view page and sticks it into a <textarea> added to the theme template.html for the purpose.

Looking at the result quickly answered my question and conveniently exposed the CSS NetNewsWire loads in addition to the selected theme.

Will the old reflex hack work?

No. Turns out modern NetNewsWire does not link theme styles like the old version did. It loads the contents of the file inline into a <style> instead. At least on MacOS – I’m yet to delve into what happens on iOS.

Loading additional assets into a NetNewsWire theme would be possible using full urls from the web, but doing so seems like a bad idea:

Excuse for a theme update

I’ve baked this function into version 3 of the Template variables theme.

While I was at it:

What next?

I have plenty to play with from here: