https://www.docz.site/ , https://swanky-docs.github.io/swanky-docs.org/, maybe these tool with pixel can cover a lot of what we need.

Change #1110817 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/extensions/Popups@master] [POC] Create Special:PopupsUITest page as Storybook alternative

https://gerrit.wikimedia.org/r/1110817

Restating the requirements: Most issues we've come across in Popups recently have been related to Storybook.js not being integrated with the skins and MediaWiki in a way that reflects how page previews look in production. We've found that changes in the skin or elsewhere can affect popups in unexpected ways, so in order to bring more visibility into this, my recommendation is to create a Special Page as an alternative to Storybook.js. This solution would be similar to how Extension:VueTest works, but integrated into the Popups repo. Although that extension is being decommissioned T357475, it seems that the downsides listed in that task are actually upsides in this scenario.

In order to create this special page, we would need to expose the capability of rendering page previews on a page programmatically. Storybook.js did this by imported the required rendering classes from src and compiling them through webpack. This would have to be done differently in a ResourceLoader context (perhaps conditionally exposing necessary render functions, or compiling a separate popups UI test bundle?).

The patch above simply exposes a private function in order to render multiple popups on a page.

Hopefully the screenshot below gives an idea of what a Storybook style special page for popups could look like:

For completion, pls note that Extension:VueTest has been archived in the meantime too. https://www.mediawiki.org/wiki/Extension:VueTest