Quick Start#

Installation#

Install from source (or from PyPI once published):

pip install sphinx-guidestar

For building documentation locally you will also need the theme:

pip install sphinx-guidestar[docs]

Minimal Sphinx example#

Add the extension to your Sphinx conf.py:
```
extensions = [
    'guidestar',
]
```
Place your wireframe HTML in docs/_static/my-app.html.
Use the directive in any RST file:
```
.. guidestar-demo:: _static/my-app.html
   :steps: #start-btn@1500:click, #panel@1000:toggle-class=open, #save-btn@2000:click
   :height: 400px
```
This will:
- Fetch my-app.html at page load
- Inject it into a container with play/pause/restart controls
- Step through the actions, highlighting each target element
- Pause if the user clicks anywhere inside the demo

Live example#

Minimal standalone HTML example#

No Sphinx needed — just include the JS and CSS files directly:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="guidestar-controls.css">
</head>
<body>
    <div data-guidestar
         data-guidestar-config='{
           "htmlSrc": "my-app.html",
           "steps": [
             {"target": "#btn", "action": "click", "delay": 1500, "caption": "Click the button"},
             {"target": "#panel", "action": "toggle-class", "value": "open", "delay": 1000, "caption": "Open the panel", "captionOptions": {"position": "bottom"}}
           ]
         }'>
    </div>
    <script src="guidestar-controller.js"></script>
</body>
</html>