Paulblish has let me write little web tools straight into markdown for a while: you can put some HTML and JavaScript in an html embed code block and it turns it into real html/js on the page.
That's how my air fryer converter and currency converter work. Text boxes and buttons already looked fine, but anything fancier, like a dial, a toggle or a bar chart, meant writing a pile of CSS for every single tool.
Now Paulblish ships a set of css tool widgets.
Plain form elements are styled with no classes at all, and everything else needs one class at most: knob turns a slider into a dial, segmented turns radio buttons into a button bar, switch turns a checkbox into a toggle, and bars, gauge and stats show off the results. A tiny helper script keeps the dials and live readouts in sync, so my own script only has to do the maths.
Every style has zero specificity, so a tool that wants to look different just adds its own <style>.
And it all works in any markdown file in Paulblish now, not just tools, which is how this post can show them off:
<input type="range" class="knob" min="40" max="220" value="96">
<label><input type="checkbox" class="switch"> Accent the first beat</label>
<dl class="bars"><dt>Wind</dt><dd style="--value: 57">57%</dd></dl>
Here are three I made for this post. A metronome for drum practice (turn your sound on, then drag the knob or click it and use the arrow keys). A race time predictor for my running. And a live look at what's powering the GB grid right now, from the same NESO API as my terminal tool.
Every widget, with the HTML to write for it, is on the tool widgets page. The metronome above is about 20 lines of HTML and not a single line of CSS, so the only code I have to write is the bit that goes beep.
The change is on GitHub and, as always, fork away if you want it for your own site. 🎛️