Skip to content
Download
For your own page

Embed QuickRun

One line loads the components, a second one is the button. No build step, no dependency, always the current version — and a click ends in QuickRun’s own window, where the plan waits to be confirmed.

Load it once

<script type="module" src="https://quickrun.org/components.js"></script>

The components

Everything here is real: the elements run on this page and talk to the QuickRun on your machine.

<quickrun-btn>

The button. A click opens QuickRun’s window with the plan for your repository.

loading components.js…

<quickrun-btn repo="fgilde/WebDataStudio">Run this</quickrun-btn>

<quickrun-btn run-cfg="…">

With a config named: collection, a path inside the repository, or an https address. Never a command — QuickRun reads the file itself and shows it before anything starts.

loading components.js…

<quickrun-btn repo="passbolt/passbolt_api" run-cfg="collection" icon="right">Run the demo</quickrun-btn>

<quickrun-badge>

The README badge as an element. The default is the link to quickrun.org; mode="run" hands over directly, and the link underneath still works.

loading components.js…

<quickrun-badge repo="fgilde/QuickRun" mode="run"></quickrun-badge>

<quickrun-status>

One line: is QuickRun here, and which version.

loading components.js…

<quickrun-status></quickrun-status>

<quickrun-gate>

Two slots, and the ping decides which one a reader sees — so the rest of the page can be written for one case instead of hedged for both.

loading components.js…

<quickrun-gate>
  <p slot="running">QuickRun is here — one click and it runs.</p>
  <p slot="missing">No QuickRun yet? One download.</p>
</quickrun-gate>

<quickrun-get>

The download, named for the machine reading the page. Always our download page, never a file directly.

loading components.js…

<quickrun-get only-when-missing></quickrun-get>

<quickrun-config>

What would run, in plain text: the repository’s own quickrun.yml, or the one QuickRun keeps for it. Both are public, so a page can show it instead of asking for trust.

loading components.js…

<quickrun-config repo="passbolt/passbolt_api" run-cfg="collection"></quickrun-config>

Build it and style it

Set the attributes and the colours, watch the preview, copy the code.

The button

Look

Preview

loading components.js…

And the same thing as a line of text:

HTML

<script type="module" src="https://quickrun.org/components.js"></script>

<quickrun-btn>Run this</quickrun-btn>

Events

Press the button in the preview — what happens appears here.

Button, badge or link?

A README on GitHubthe badge, an image in a link

GitHub runs no scripts and strips unknown link schemes. Stays the default.

Your own page<quickrun-btn>

A click opens the window directly, and the page can react to the events.

A link in text, a chatquickrun.org/run?repo=…

Works anywhere a link works.

Every attribute, every event and the security rules are in the documentation: Web components