Base Utilities

<demo> { children } </demo>

The demo tag wraps the entirety of your demo, but can also be used to group subparts too:

const { demo } = require("demokit");
const part1 = <demo>{ /*...*/ }</demo>;
const part2 = require("./part2");

module.exports =
<demo>
    { ... }
</demo>

---

<wait />

The wait tag pauses the actions of the video for delay milliseconds. This can be useful for making actions feel more human.

const { using } = require("demokit");

// Wait a second before clicking...
<wait delay = { 1000 }/>
<click selector = "button" />

---

<wait.visible />

Attributes

• selector - The selector to look for.
• window (optional) - The window to look in.
• timeout (optional) - A timeout in milliseconds after which to give up.

Similar to <wait>, but waits until document.querySelector({ selector }) becomes visible on the page. If you omit window, it waits for the selector on the main page, otherwise it will wait for it within the given window. You can also optionally pass a timeout.

const { wait } = require("demokit");

<wait.visible selector = "button[type=submit]"/>

---

<using> { children } </using>

The using tag incorporates the attributes passed to it into its child tags. This is useful, if for example, you will be doing many operations on the same window and don't want to specify the window in every tag:

const { using } = require("demokit");

// Each of the children normally take a window attribute.
<using window = "duckduckgo">
    <click selector = "input[type=text]" />
    <type>How do I use <paste>JSX</paste>?</type>
    <click selector = "input[type=submit]" />
</using>

---

<group> { children } </group>

Execute all children in parallel and proceed after they are all complete.

const { group } = require("demokit");

// Each of the children normally take a window attribute.
<group animate = { true }>
    <window.style id = "documentation-code-editor" x = { 337 } />
    <window.style id = "documentation-browser" x = { 832 } />
</group>