qunitjs / qunitjs/qunit

Add interactive demo

Open
#1,752 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Category: Docs help welcome Type: Enhancement
Dominant language
JavaScript
Stars
4k
Forks
773
PR merge metrics
No merged PRs in 30d

Description

I currently use one of two approaches.

  1. Existing demo with console hackery:
  • https://qunitjs.com/
  • Open "Browser Result" frame as its own tab (e.g. right-click view iframe, or cmd-click "QUnit Example" title link)
  • Open browser console
  • Page code sample (this fragily depends on being able to run additional tests on an HTML page, even after it has already completed the run, which kinda works but not really and is not actually documented or supported, and causes confusing errors in case of genuine failures).
  1. CodePen / JSFiddle etc.

We either create a basic "Demo" page ourselves with an editable JS area and see a live demo (with the current example as starting default boilerplate), or we could embed a forkable demo that we host with something like CodePen.

Another option might be to do what MDN did (or used to do, they recently changed frontends and have not yet implemented it on the new side, ref https://github.com/mdn/yari/issues/1428). The way MDN worked is that they render a locally owned iframe and source code preview, without third-party code or embeds. Much like the demo we have on our home page today. And then have a button to instantly create a new CodePen draft with the contents of the demo pre-filled. That seems like a pretty good trade-off. Especially because it means the demo will still render fast and independent of third parties, and it also means we don't have to keep a remote resource up-to-date during releases. Instead, the contents are transferred at runtime via a POST request if the user pressed the button.

MDN's old code for this, at:
https://github.com/mdn/kuma/blob/e145cf3c708326d7da57883b32dda9ab70cd1408/kuma/javascript/src/live-examples.js#L94-L105

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the current demo on qunitjs.com and the linked MDN live-examples.js implementation before choosing an approach. Define whether the result will use a locally hosted editable demo, a CodePen integration, or both. Done means users can edit the example, see a live result, and optionally share or export it without console workarounds.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.