

<!DOCTYPE html>

<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="stylesheet" href="/demo-maker/assets/css/just-the-docs-default.css">

  <link rel="stylesheet" href="/demo-maker/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">

  <style id="jtd-nav-activation">
  
    .site-nav ul li a {
      background-image: none;
    }

  </style>

  

  
    <script src="/demo-maker/assets/js/vendor/lunr.min.js"></script>
  

  <script src="/demo-maker/assets/js/just-the-docs.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  



  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>demo-maker | Open-source product demo video maker for websites</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="demo-maker" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Open-source product demo video maker for websites. Create consistent website demo videos from YAML configuration with Playwright — no manual clicking or re-recording." />
<meta property="og:description" content="Open-source product demo video maker for websites. Create consistent website demo videos from YAML configuration with Playwright — no manual clicking or re-recording." />
<link rel="canonical" href="https://a1knowhow.github.io/demo-maker/assets/css/just-the-docs-head-nav.css" />
<meta property="og:url" content="https://a1knowhow.github.io/demo-maker/assets/css/just-the-docs-head-nav.css" />
<meta property="og:site_name" content="demo-maker" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="demo-maker" />
<meta name="google-site-verification" content="PLeofoAxP71MoBgsJPpxHHO1wzdrD6oamkO-HtPqAhY" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"Open-source product demo video maker for websites. Create consistent website demo videos from YAML configuration with Playwright — no manual clicking or re-recording.","headline":"demo-maker","url":"https://a1knowhow.github.io/demo-maker/assets/css/just-the-docs-head-nav.css"}</script>
<!-- End Jekyll SEO tag -->


  
<link rel="alternate" type="text/plain" title="llms.txt" href="https://raw.githubusercontent.com/a1knowhow/demo-maker/main/llms.txt">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "demo-maker",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "cross-platform",
  "description": "Open-source product demo video maker for websites. Create consistent website demo videos from YAML configuration with Playwright — no manual clicking or re-recording.",
  "url": "https://a1knowhow.github.io/demo-maker/",
  "downloadUrl": "https://www.npmjs.com/package/@a1knowhow/demo-maker",
  "codeRepository": "https://github.com/a1knowhow/demo-maker",
  "license": "https://www.apache.org/licenses/LICENSE-2.0",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
}
</script>



</head>

<body>
  <a class="skip-to-main" href="#main-content">Skip to main content</a>
  <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="svg-link" viewBox="0 0 24 24">
  <title>Link</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
  </svg>
</symbol>

  <symbol id="svg-menu" viewBox="0 0 24 24">
  <title>Menu</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
    <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</symbol>

  <symbol id="svg-arrow-right" viewBox="0 0 24 24">
  <title>Expand</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
    <polyline points="9 18 15 12 9 6"></polyline>
  </svg>
</symbol>

  <!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
  <title id="svg-external-link-title">(external link)</title>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
</symbol>

  
    <symbol id="svg-doc" viewBox="0 0 24 24">
  <title>Document</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
  </svg>
</symbol>

    <symbol id="svg-search" viewBox="0 0 24 24">
  <title>Search</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</symbol>

  
  
    <!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
<symbol id="svg-copy" viewBox="0 0 16 16">
  <title>Copy</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
  </svg>
</symbol>
<symbol id="svg-copied" viewBox="0 0 16 16">
  <title>Copied</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
    <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
  </svg>
</symbol>

  
  <symbol id="svg-moon" viewBox="0 0 24 24">
  <title>Dark mode</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
  </svg>
</symbol>

  <symbol id="svg-sun" viewBox="0 0 24 24">
  <title>Light mode</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun">
    <circle cx="12" cy="12" r="5"></circle>
    <line x1="12" y1="1" x2="12" y2="3"></line>
    <line x1="12" y1="21" x2="12" y2="23"></line>
    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
    <line x1="1" y1="12" x2="3" y2="12"></line>
    <line x1="21" y1="12" x2="23" y2="12"></line>
    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
  </svg>
</symbol>

  <!-- GitHub Mark. https://github.com/logos -->
<symbol id="svg-github" viewBox="0 0 16 16">
  <title>Check GitHub repo</title>
  <path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</symbol>

  <!-- npm logo mark -->
<symbol id="svg-npm" viewBox="0 0 16 16">
  <title>View npm package</title>
  <path fill="currentColor" d="M0 0v16h16V0H0zm13 13h-2V5H8v8H3V3h10v10z"/>
</symbol>

  <!-- File / text document mark for llms.txt -->
<symbol id="svg-llms" viewBox="0 0 16 16">
  <title>Read llms.txt</title>
  <path fill="currentColor" d="M3.5 1A1.5 1.5 0 0 0 2 2.5v11A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V5.707a1.5 1.5 0 0 0-.44-1.06L10.353.939A1.5 1.5 0 0 0 9.293.5H3.5zM3 2.5a.5.5 0 0 1 .5-.5H9v3a1 1 0 0 0 1 1h3v7.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-11zm7 .207L12.793 5H10V2.707zM5 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z"/>
</symbol>

</svg>

  
    <div class="side-bar">
  <div class="site-header" role="banner">
    <a href="/demo-maker/" class="site-title lh-tight">
  demo-maker

</a>
    <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
    </button>
  </div>

  <nav aria-label="Main" id="site-nav" class="site-nav">
  
  
    <ul class="nav-list"><li class="nav-list-item"><a href="/demo-maker/" class="nav-list-link">Home</a></li><li class="nav-list-item"><a href="/demo-maker/getting-started.html" class="nav-list-link">Getting started</a></li><li class="nav-list-item"><a href="/demo-maker/cli.html" class="nav-list-link">CLI</a></li><li class="nav-list-item"><a href="/demo-maker/scenario-schema.html" class="nav-list-link">Scenario schema</a></li><li class="nav-list-item"><a href="/demo-maker/actions.html" class="nav-list-link">Actions</a></li><li class="nav-list-item"><a href="/demo-maker/locators.html" class="nav-list-link">Locators</a></li><li class="nav-list-item"><a href="/demo-maker/variables.html" class="nav-list-link">Variables</a></li><li class="nav-list-item"><a href="/demo-maker/imports-and-fragments.html" class="nav-list-link">Imports and fragments</a></li><li class="nav-list-item"><a href="/demo-maker/recording.html" class="nav-list-link">Recording</a></li><li class="nav-list-item"><a href="/demo-maker/video-and-pacing.html" class="nav-list-link">Video and pacing</a></li><li class="nav-list-item"><a href="/demo-maker/repairing-scenarios.html" class="nav-list-link">Repairing scenarios</a></li><li class="nav-list-item"><a href="/demo-maker/library-api.html" class="nav-list-link">Library API</a></li><li class="nav-list-item"><a href="/demo-maker/url-capture.html" class="nav-list-link">URL capture</a></li></ul>
  
</nav>




  
  
    <footer class="site-footer">
      This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
    </footer>
  
</div>

  
  <div class="main" id="top">
    <div id="main-header" class="main-header">
  
    

<div class="search" role="search">
  <div class="search-input-wrap">
    <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search demo-maker" aria-label="Search demo-maker" autocomplete="off">
    <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
  </div>
  <div id="search-results" class="search-results"></div>
</div>

  
  <button type="button" class="theme-toggle js-theme-toggle" aria-label="Switch to dark mode" title="Toggle theme">
  <svg viewBox="0 0 24 24" class="theme-toggle-icon" aria-hidden="true"><use href="#svg-moon" xlink:href="#svg-moon"></use></svg>
</button>

  
    <nav aria-label="Auxiliary" class="aux-nav">
  <ul class="aux-nav-list">
    
      
      <li class="aux-nav-list-item">
        <a href="https://github.com/a1knowhow/demo-maker" class="site-button"
          aria-label="Check GitHub repo"
          title="Check GitHub repo"
          
          target="_blank" rel="noopener noreferrer"
          
        >
          
            <svg viewBox="0 0 16 16" class="aux-nav-icon" aria-hidden="true"><use href="#svg-github" xlink:href="#svg-github"></use></svg>
            <span class="sr-only">Check GitHub repo</span>
          
        </a>
      </li>
    
      
      <li class="aux-nav-list-item">
        <a href="https://www.npmjs.com/package/@a1knowhow/demo-maker" class="site-button"
          aria-label="View npm package"
          title="View npm package"
          
          target="_blank" rel="noopener noreferrer"
          
        >
          
            <svg viewBox="0 0 16 16" class="aux-nav-icon" aria-hidden="true"><use href="#svg-npm" xlink:href="#svg-npm"></use></svg>
            <span class="sr-only">View npm package</span>
          
        </a>
      </li>
    
      
      <li class="aux-nav-list-item">
        <a href="https://raw.githubusercontent.com/a1knowhow/demo-maker/main/llms.txt" class="site-button"
          aria-label="Read llms.txt"
          title="Read llms.txt"
          
          target="_blank" rel="noopener noreferrer"
          
        >
          
            <svg viewBox="0 0 16 16" class="aux-nav-icon" aria-hidden="true"><use href="#svg-llms" xlink:href="#svg-llms"></use></svg>
            <span class="sr-only">Read llms.txt</span>
          
        </a>
      </li>
    
  </ul>
</nav>

  
</div>

    <div class="main-content-wrap">
      
      <div id="main-content" class="main-content">
        <main>
          
            

          

          
            
          
        </main>
        


      </div>
    </div>
    
      

<div class="search-overlay"></div>

    
  </div>

  
</body>
</html>

