Start Creating Vanilla JS WebR Apps With Less Inertia

WebR has a template for React, but I’m not a fan of it or Vue (a fact longtime readers are likely tired of hearing right about now). It’s my opinion and experience that Lit webcomponents come closer to “bare metal” webcomponents, which means the “lock-in” with Lit is way less of a potential headache than all the baggage that comes with the other frameworks.

I leaned into exposition for most of my WebR Experiments, but that very likely made it hard to reproduce or even use those repos without some pain. So, I decided to reduce the pain, remove the inertia and make a template (GH) you can use almost immediately from the command line.

The only “inertia” is that you need npm installed. Subsequently, cd into the parent directory of the new project you want to make and:

npx create-webr-vite-lit my-webr-project
cd my-webr-project
npm install
npx vite --port=4000

then, hit `http://localhost:4000/` (change the port if you’re already using it for something else).

You can check it out on this demo site.

Batteries Included

• Vite (for fast building)
• WebR (duh)
  • r.js which has all the setup code for WebR + some helpers (more coming here, too)
• Pyodide (initiall disabled)
  • py.js which does not get used but is available if you want to use pyodide
• Lit (webcomponents) — it ships with 3:
  • one for my usual “loading…” status message (which gets a facelift)
  • one generic webcomponent for Observable Plots
  • one simple “button” webcomponent to trigger simple actions
  • more are coming! The goal is to wrap all the inputs and outputs provided by Bonsai (below). PR’s welcome!
• A lightweight CSS framework called Bonsai that I added dark-mode support for. The post-create default page is the Bonsai grid & CSS reference. The webcomponents show how to make all the Bonsai styles available to the components (there’s a default full separation of all things from the webcomponents).
• An example justfile since I’ve grown quite fond of Just

The default/demo “app” demonstrates how all the components work.

FIN

This setup should have you up and running with your own apps in no time.

I tested light/dark mode switching in Chrome and Safari (macOS/iOS) and the dark/light switching works as intended. Arc doesn’t respond to it, so I’ll be debugging that.

Drop issues in GH if I need to tweak the dark mode, or if you run into snags.