The simplest stop-gap solution to rerender on width changes (after all remaining hard references have been removed): Replace the following: const render = (inputValue) => { // Get the updated code const plotCode = config.plot(inputValue); with const render = () => { // Get the updated code const plotCode = config.plot(form.value); Then replace form.on("input", function () { render(this.value); }); with form.on("input", render); Finally, add: window.addEventListener("resize", render); invalidation.then(() => window.removeEventListener("resize", render));

Thanks for all of the guidance and suggestions on this! I'll definitely add this to the list and triage as possible.

Thanks again for these suggestions -- we aren't going to implement them before releasing, but will keep it in the backlog!

should we fix the urls (e.g. https://observablehq.com/@observablehq/plot-cheatsheets-marks?collection=@observablehq/plot-cheatsheets)?

Makes sense -- these re-route to the desired URL, but that could be confusing. I'll fix them.