@a1knowhow/demo-maker 0.1.2 β†’ 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/README.md +20 -14
  2. package/docs/Gemfile +11 -0
  3. package/docs/Gemfile.lock +257 -0
  4. package/docs/_config.yml +43 -0
  5. package/docs/_includes/components/aux_nav.html +35 -0
  6. package/docs/_includes/head_custom.html +63 -0
  7. package/docs/_includes/header_custom.html +3 -0
  8. package/docs/_includes/icons/github.html +5 -0
  9. package/docs/_includes/icons/icons.html +18 -0
  10. package/docs/_includes/icons/llms.html +5 -0
  11. package/docs/_includes/icons/moon.html +6 -0
  12. package/docs/_includes/icons/npm.html +5 -0
  13. package/docs/_includes/icons/sun.html +14 -0
  14. package/docs/_includes/js/custom.js +83 -0
  15. package/docs/_sass/custom/custom.scss +48 -0
  16. package/docs/actions.md +8 -1
  17. package/docs/assets/css/just-the-docs-dark.scss +4 -0
  18. package/docs/cli.md +7 -0
  19. package/docs/getting-started.md +7 -0
  20. package/docs/imports-and-fragments.md +7 -0
  21. package/docs/index.md +100 -0
  22. package/docs/library-api.md +7 -0
  23. package/docs/locators.md +7 -0
  24. package/docs/recording.md +7 -0
  25. package/docs/repairing-scenarios.md +5 -0
  26. package/docs/scenario-schema.md +6 -1
  27. package/docs/url-capture.md +7 -0
  28. package/docs/variables.md +9 -2
  29. package/docs/video-and-pacing.md +7 -0
  30. package/llms.txt +5 -2
  31. package/package.json +14 -9
  32. package/docs/README.md +0 -35
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # demo-maker
2
2
 
3
- 🎬 **Demo videos as code** β€” configure once, re-run forever. YAML + Playwright β†’ polished, consistent product feature videos.
3
+ 🎬 **Open-source product demo video maker for websites.** Create consistent website demo videos from YAML configuration with Playwright β€” no manual clicking or re-recording.
4
4
 
5
5
  Turn versioned scenario configs into consistent product feature videos β€” reconfigure, re-run, no manual re-recording.
6
6
 
@@ -42,7 +42,7 @@ The package ships TypeScript source and runs via `tsx`. Library imports (`import
42
42
  npx demo-maker run examples/smoke.yaml --headless --fast
43
43
  ```
44
44
 
45
- Step-by-step (install β†’ first MP4 β†’ record β†’ fragments): **[docs/getting-started.md](./docs/getting-started.md)**
45
+ Step-by-step (install β†’ first MP4 β†’ record β†’ fragments): **[Getting started](https://a1knowhow.github.io/demo-maker/getting-started.html)** Β· [docs on GitHub](./docs/getting-started.md)
46
46
 
47
47
  ## Example walkthrough
48
48
 
@@ -66,20 +66,22 @@ npx demo-maker run examples/demo2-github-actions.yaml
66
66
 
67
67
  ## Documentation
68
68
 
69
+ Site: **[https://a1knowhow.github.io/demo-maker/](https://a1knowhow.github.io/demo-maker/)**
69
70
 
70
- | Topic | Link |
71
- | ----------------------- | ------------------------------------------------------------ |
72
- | Index | [docs/README.md](./docs/README.md) |
73
- | Getting started | [docs/getting-started.md](./docs/getting-started.md) |
74
- | CLI | [docs/cli.md](./docs/cli.md) |
75
- | Actions | [docs/actions.md](./docs/actions.md) |
76
- | Locators | [docs/locators.md](./docs/locators.md) |
77
- | Video & pacing | [docs/video-and-pacing.md](./docs/video-and-pacing.md) |
78
- | Recording | [docs/recording.md](./docs/recording.md) |
79
- | Repair after UI changes | [docs/repairing-scenarios.md](./docs/repairing-scenarios.md) |
80
71
 
72
+ | Topic | Docs site | Source |
73
+ | ----------------------- | --------- | ------ |
74
+ | Index | [docs site](https://a1knowhow.github.io/demo-maker/) | [docs/index.md](./docs/index.md) |
75
+ | Getting started | [getting started](https://a1knowhow.github.io/demo-maker/getting-started.html) | [docs/getting-started.md](./docs/getting-started.md) |
76
+ | CLI | [CLI](https://a1knowhow.github.io/demo-maker/cli.html) | [docs/cli.md](./docs/cli.md) |
77
+ | Actions | [actions](https://a1knowhow.github.io/demo-maker/actions.html) | [docs/actions.md](./docs/actions.md) |
78
+ | Locators | [locators](https://a1knowhow.github.io/demo-maker/locators.html) | [docs/locators.md](./docs/locators.md) |
79
+ | Video & pacing | [video & pacing](https://a1knowhow.github.io/demo-maker/video-and-pacing.html) | [docs/video-and-pacing.md](./docs/video-and-pacing.md) |
80
+ | Recording | [recording](https://a1knowhow.github.io/demo-maker/recording.html) | [docs/recording.md](./docs/recording.md) |
81
+ | Repair after UI changes | [repairing](https://a1knowhow.github.io/demo-maker/repairing-scenarios.html) | [docs/repairing-scenarios.md](./docs/repairing-scenarios.md) |
81
82
 
82
- Typed schema: `[src/types.ts](./src/types.ts)`.
83
+
84
+ Typed schema: [`src/types.ts`](./src/types.ts).
83
85
 
84
86
  ## Commands
85
87
 
@@ -101,4 +103,8 @@ Report vulnerabilities privately β€” see [SECURITY.md](./SECURITY.md). Do not op
101
103
 
102
104
  ## License
103
105
 
104
- Apache License 2.0 β€” see [LICENSE](./LICENSE).
106
+ Apache License 2.0 β€” see [LICENSE](./LICENSE).
107
+
108
+ ## About A1KnowHow
109
+
110
+ demo-maker was created originally for building demo videos for [A1KnowHow](https://a1knowhow.com/) β€” AI workflows, document organisation, chat, search, and AI agents with skills and MCP tool integration.
package/docs/Gemfile ADDED
@@ -0,0 +1,11 @@
1
+ # Local docs preview only. Production GitHub Pages builds from /docs without this
2
+ # Gemfile (branch deploy + allowlisted plugins). Jekyll 4 here matches Ruby 3.4+/4.x;
3
+ # the live site still uses the github-pages / Jekyll 3 stack.
4
+ source "https://rubygems.org"
5
+
6
+ gem "jekyll", "~> 4.3"
7
+ gem "jekyll-remote-theme"
8
+ gem "jekyll-seo-tag"
9
+ gem "jekyll-include-cache"
10
+ gem "jekyll-sitemap"
11
+ gem "webrick"
package/docs/Gemfile.lock ADDED
@@ -0,0 +1,257 @@
1
+ GEM
2
+ remote: https://rubygems.org/
3
+ specs:
4
+ addressable (2.9.0)
5
+ public_suffix (>= 2.0.2, < 8.0)
6
+ base64 (0.3.0)
7
+ bigdecimal (4.1.2)
8
+ colorator (1.1.0)
9
+ concurrent-ruby (1.3.8)
10
+ csv (3.3.6)
11
+ em-websocket (0.5.3)
12
+ eventmachine (>= 0.12.9)
13
+ http_parser.rb (~> 0)
14
+ eventmachine (1.2.7)
15
+ ffi (1.17.4)
16
+ ffi (1.17.4-aarch64-linux-gnu)
17
+ ffi (1.17.4-aarch64-linux-musl)
18
+ ffi (1.17.4-arm-linux-gnu)
19
+ ffi (1.17.4-arm-linux-musl)
20
+ ffi (1.17.4-arm64-darwin)
21
+ ffi (1.17.4-x86-linux-gnu)
22
+ ffi (1.17.4-x86-linux-musl)
23
+ ffi (1.17.4-x86_64-darwin)
24
+ ffi (1.17.4-x86_64-linux-gnu)
25
+ ffi (1.17.4-x86_64-linux-musl)
26
+ forwardable-extended (2.6.0)
27
+ google-protobuf (4.36.1)
28
+ bigdecimal
29
+ rake (~> 13.3)
30
+ google-protobuf (4.36.1-aarch64-linux-gnu)
31
+ bigdecimal
32
+ rake (~> 13.3)
33
+ google-protobuf (4.36.1-aarch64-linux-musl)
34
+ bigdecimal
35
+ rake (~> 13.3)
36
+ google-protobuf (4.36.1-arm64-darwin)
37
+ bigdecimal
38
+ rake (~> 13.3)
39
+ google-protobuf (4.36.1-x86-linux-gnu)
40
+ bigdecimal
41
+ rake (~> 13.3)
42
+ google-protobuf (4.36.1-x86-linux-musl)
43
+ bigdecimal
44
+ rake (~> 13.3)
45
+ google-protobuf (4.36.1-x86_64-darwin)
46
+ bigdecimal
47
+ rake (~> 13.3)
48
+ google-protobuf (4.36.1-x86_64-linux-gnu)
49
+ bigdecimal
50
+ rake (~> 13.3)
51
+ google-protobuf (4.36.1-x86_64-linux-musl)
52
+ bigdecimal
53
+ rake (~> 13.3)
54
+ http_parser.rb (0.8.1)
55
+ i18n (1.15.2)
56
+ concurrent-ruby (~> 1.0)
57
+ jekyll (4.4.1)
58
+ addressable (~> 2.4)
59
+ base64 (~> 0.2)
60
+ colorator (~> 1.0)
61
+ csv (~> 3.0)
62
+ em-websocket (~> 0.5)
63
+ i18n (~> 1.0)
64
+ jekyll-sass-converter (>= 2.0, < 4.0)
65
+ jekyll-watch (~> 2.0)
66
+ json (~> 2.6)
67
+ kramdown (~> 2.3, >= 2.3.1)
68
+ kramdown-parser-gfm (~> 1.0)
69
+ liquid (~> 4.0)
70
+ mercenary (~> 0.3, >= 0.3.6)
71
+ pathutil (~> 0.9)
72
+ rouge (>= 3.0, < 5.0)
73
+ safe_yaml (~> 1.0)
74
+ terminal-table (>= 1.8, < 4.0)
75
+ webrick (~> 1.7)
76
+ jekyll-include-cache (0.2.2)
77
+ jekyll (>= 3.7, < 5.0)
78
+ jekyll-remote-theme (0.5.2)
79
+ addressable (~> 2.0)
80
+ jekyll (>= 3.5, < 5.0)
81
+ jekyll-sass-converter (>= 1.0, < 4.0, != 2.0.0)
82
+ openssl (>= 3.1.2)
83
+ rubyzip (>= 1.3.0, < 4.0)
84
+ jekyll-sass-converter (3.1.0)
85
+ sass-embedded (~> 1.75)
86
+ jekyll-seo-tag (2.9.0)
87
+ jekyll (>= 3.8, < 5.0)
88
+ jekyll-sitemap (1.4.0)
89
+ jekyll (>= 3.7, < 5.0)
90
+ jekyll-watch (2.2.1)
91
+ listen (~> 3.0)
92
+ json (2.21.2)
93
+ kramdown (2.5.2)
94
+ rexml (>= 3.4.4)
95
+ kramdown-parser-gfm (1.1.0)
96
+ kramdown (~> 2.0)
97
+ liquid (4.0.4)
98
+ listen (3.10.0)
99
+ logger
100
+ rb-fsevent (~> 0.10, >= 0.10.3)
101
+ rb-inotify (~> 0.9, >= 0.9.10)
102
+ logger (1.7.0)
103
+ mercenary (0.4.0)
104
+ openssl (4.0.2)
105
+ pathutil (0.16.2)
106
+ forwardable-extended (~> 2.6)
107
+ public_suffix (7.0.5)
108
+ rake (13.4.2)
109
+ rb-fsevent (0.11.2)
110
+ rb-inotify (0.11.1)
111
+ ffi (~> 1.0)
112
+ rexml (3.4.4)
113
+ rouge (4.7.0)
114
+ rubyzip (3.6.0)
115
+ safe_yaml (1.0.5)
116
+ sass-embedded (1.104.1)
117
+ google-protobuf (~> 4.31)
118
+ rake (>= 13)
119
+ sass-embedded (1.104.1-aarch64-linux-android)
120
+ google-protobuf (~> 4.31)
121
+ sass-embedded (1.104.1-aarch64-linux-gnu)
122
+ google-protobuf (~> 4.31)
123
+ sass-embedded (1.104.1-aarch64-linux-musl)
124
+ google-protobuf (~> 4.31)
125
+ sass-embedded (1.104.1-arm-linux-androideabi)
126
+ google-protobuf (~> 4.31)
127
+ sass-embedded (1.104.1-arm-linux-gnueabihf)
128
+ google-protobuf (~> 4.31)
129
+ sass-embedded (1.104.1-arm-linux-musleabihf)
130
+ google-protobuf (~> 4.31)
131
+ sass-embedded (1.104.1-arm64-darwin)
132
+ google-protobuf (~> 4.31)
133
+ sass-embedded (1.104.1-riscv64-linux-android)
134
+ google-protobuf (~> 4.31)
135
+ sass-embedded (1.104.1-riscv64-linux-gnu)
136
+ google-protobuf (~> 4.31)
137
+ sass-embedded (1.104.1-riscv64-linux-musl)
138
+ google-protobuf (~> 4.31)
139
+ sass-embedded (1.104.1-x86_64-darwin)
140
+ google-protobuf (~> 4.31)
141
+ sass-embedded (1.104.1-x86_64-linux-android)
142
+ google-protobuf (~> 4.31)
143
+ sass-embedded (1.104.1-x86_64-linux-gnu)
144
+ google-protobuf (~> 4.31)
145
+ sass-embedded (1.104.1-x86_64-linux-musl)
146
+ google-protobuf (~> 4.31)
147
+ terminal-table (3.0.2)
148
+ unicode-display_width (>= 1.1.1, < 3)
149
+ unicode-display_width (2.6.0)
150
+ webrick (1.9.2)
151
+
152
+ PLATFORMS
153
+ aarch64-linux-android
154
+ aarch64-linux-gnu
155
+ aarch64-linux-musl
156
+ arm-linux-androideabi
157
+ arm-linux-gnu
158
+ arm-linux-gnueabihf
159
+ arm-linux-musl
160
+ arm-linux-musleabihf
161
+ arm64-darwin
162
+ riscv64-linux-android
163
+ riscv64-linux-gnu
164
+ riscv64-linux-musl
165
+ ruby
166
+ x86-linux-gnu
167
+ x86-linux-musl
168
+ x86_64-darwin
169
+ x86_64-linux-android
170
+ x86_64-linux-gnu
171
+ x86_64-linux-musl
172
+
173
+ DEPENDENCIES
174
+ jekyll (~> 4.3)
175
+ jekyll-include-cache
176
+ jekyll-remote-theme
177
+ jekyll-seo-tag
178
+ jekyll-sitemap
179
+ webrick
180
+
181
+ CHECKSUMS
182
+ addressable (2.9.0) sha256=7fdf6ac3660f7f4e867a0838be3f6cf722ace541dd97767fa42bc6cfa980c7af
183
+ base64 (0.3.0) sha256=27337aeabad6ffae05c265c450490628ef3ebd4b67be58257393227588f5a97b
184
+ bigdecimal (4.1.2) sha256=53d217666027eab4280346fba98e7d5b66baaae1b9c3c1c0ffe89d48188a3fbd
185
+ colorator (1.1.0) sha256=e2f85daf57af47d740db2a32191d1bdfb0f6503a0dfbc8327d0c9154d5ddfc38
186
+ concurrent-ruby (1.3.8) sha256=b2f1be836e968ccc78ccfce277ea79c72a88633f22306782c16ff23fb415d1e1
187
+ csv (3.3.6) sha256=aba61e7e507a66f03d45cb1f3c4b6359861c3504038b422962875dce099e4456
188
+ em-websocket (0.5.3) sha256=f56a92bde4e6cb879256d58ee31f124181f68f8887bd14d53d5d9a292758c6a8
189
+ eventmachine (1.2.7) sha256=994016e42aa041477ba9cff45cbe50de2047f25dd418eba003e84f0d16560972
190
+ ffi (1.17.4) sha256=bcd1642e06f0d16fc9e09ac6d49c3a7298b9789bcb58127302f934e437d60acf
191
+ ffi (1.17.4-aarch64-linux-gnu) sha256=b208f06f91ffd8f5e1193da3cae3d2ccfc27fc36fba577baf698d26d91c080df
192
+ ffi (1.17.4-aarch64-linux-musl) sha256=9286b7a615f2676245283aef0a0a3b475ae3aae2bb5448baace630bb77b91f39
193
+ ffi (1.17.4-arm-linux-gnu) sha256=d6dbddf7cb77bf955411af5f187a65b8cd378cb003c15c05697f5feee1cb1564
194
+ ffi (1.17.4-arm-linux-musl) sha256=9d4838ded0465bef6e2426935f6bcc93134b6616785a84ffd2a3d82bc3cf6f95
195
+ ffi (1.17.4-arm64-darwin) sha256=19071aaf1419251b0a46852abf960e77330a3b334d13a4ab51d58b31a937001b
196
+ ffi (1.17.4-x86-linux-gnu) sha256=38e150df5f4ca555e25beca4090823ae09657bceded154e3c52f8631c1ed72cf
197
+ ffi (1.17.4-x86-linux-musl) sha256=fbeec0fc7c795bcf86f623bb18d31ea1820f7bd580e1703a3d3740d527437809
198
+ ffi (1.17.4-x86_64-darwin) sha256=aa70390523cf3235096cf64962b709b4cfbd5c082a2cb2ae714eb0fe2ccda496
199
+ ffi (1.17.4-x86_64-linux-gnu) sha256=9d3db14c2eae074b382fa9c083fe95aec6e0a1451da249eab096c34002bc752d
200
+ ffi (1.17.4-x86_64-linux-musl) sha256=3fdf9888483de005f8ef8d1cf2d3b20d86626af206cbf780f6a6a12439a9c49e
201
+ forwardable-extended (2.6.0) sha256=1bec948c469bbddfadeb3bd90eb8c85f6e627a412a3e852acfd7eaedbac3ec97
202
+ google-protobuf (4.36.1) sha256=893ac9d66b36b6ea50da5418f856bc7c2d2072099a578aeefc2d7757dcab6a77
203
+ google-protobuf (4.36.1-aarch64-linux-gnu) sha256=3883fa1b0e99221f68f4a8511bc4fb1888897dcb6cc8bf2805c92c16fc99b499
204
+ google-protobuf (4.36.1-aarch64-linux-musl) sha256=6da393554ecc96168ae6ddf663392bf8ce4e4fce7c18fda348882ce2e97d6a87
205
+ google-protobuf (4.36.1-arm64-darwin) sha256=4d82184f4582dfa123f9793cd7a73beca9b0d3f0d3717948c4120b6cc0d50f2d
206
+ google-protobuf (4.36.1-x86-linux-gnu) sha256=4ea208a8d1a2369728da03e256fc7b454c6781bac486cbfa57d0ed7a0e6352f0
207
+ google-protobuf (4.36.1-x86-linux-musl) sha256=ec302210ea53f136027f556904b0d13eaf7b4d17fd88b15ddd64b2f321c85dfd
208
+ google-protobuf (4.36.1-x86_64-darwin) sha256=e92bf3c90c0a9c410cbe430cf366190b1b9b5b2b784f6195a43a178c2ef7e338
209
+ google-protobuf (4.36.1-x86_64-linux-gnu) sha256=e735a3f3d6596b1010013c2030778bc030770e659106fe7e4ae0f07631b551cb
210
+ google-protobuf (4.36.1-x86_64-linux-musl) sha256=ae2712b7960e8b1f96d52fef8c2c0dc1cd230f2be13e48492dad0aa2a6a7cf03
211
+ http_parser.rb (0.8.1) sha256=9ae8df145b39aa5398b2f90090d651c67bd8e2ebfe4507c966579f641e11097a
212
+ i18n (1.15.2) sha256=00f9eb62412fe593b2a65a97daa75300d37abb8f7202ec748e94b6d46a9dd1b5
213
+ jekyll (4.4.1) sha256=4c1144d857a5b2b80d45b8cf5138289579a9f8136aadfa6dd684b31fe2bc18c1
214
+ jekyll-include-cache (0.2.2) sha256=fe31c75187c37b035fb3b62b689f1ca284f1871c3bb7f607a8bdf3cc439b0aa1
215
+ jekyll-remote-theme (0.5.2) sha256=d41ba7358b7baa7c8f8f4ee03112bbae8dba90235e97d88c25b90a032abb6f55
216
+ jekyll-sass-converter (3.1.0) sha256=83925d84f1d134410c11d0c6643b0093e82e3a3cf127e90757a85294a3862443
217
+ jekyll-seo-tag (2.9.0) sha256=0260015a8e1df9bf195cdfb0c675b7b2883fd8cbf12556e1c1cbe36a831c6852
218
+ jekyll-sitemap (1.4.0) sha256=0de08c5debc185ea5a8f980e1025c7cd3f8e0c35c8b6ef592f15c46235cf4218
219
+ jekyll-watch (2.2.1) sha256=bc44ed43f5e0a552836245a54dbff3ea7421ecc2856707e8a1ee203a8387a7e1
220
+ json (2.21.2) sha256=1f1d3b7cf2b3ba1a69beca0bb6db13d5438b80bff3cd54cdaaa620b9b07c1c6a
221
+ kramdown (2.5.2) sha256=1ba542204c66b6f9111ff00dcc26075b95b220b07f2905d8261740c82f7f02fa
222
+ kramdown-parser-gfm (1.1.0) sha256=fb39745516427d2988543bf01fc4cf0ab1149476382393e0e9c48592f6581729
223
+ liquid (4.0.4) sha256=4fcfebb1a045e47918388dbb7a0925e7c3893e58d2bd6c3b3c73ec17a2d8fdb3
224
+ listen (3.10.0) sha256=c6e182db62143aeccc2e1960033bebe7445309c7272061979bb098d03760c9d2
225
+ logger (1.7.0) sha256=196edec7cc44b66cfb40f9755ce11b392f21f7967696af15d274dde7edff0203
226
+ mercenary (0.4.0) sha256=b25a1e4a59adca88665e08e24acf0af30da5b5d859f7d8f38fba52c28f405138
227
+ openssl (4.0.2) sha256=1037ad2868ae58df9ad917891c0c0f9815a1172f6846d4bcdd508e4c2ee747c2
228
+ pathutil (0.16.2) sha256=e43b74365631cab4f6d5e4228f812927efc9cb2c71e62976edcb252ee948d589
229
+ public_suffix (7.0.5) sha256=1a8bb08f1bbea19228d3bed6e5ed908d1cb4f7c2726d18bd9cadf60bc676f623
230
+ rake (13.4.2) sha256=cb825b2bd5f1f8e91ca37bddb4b9aaf345551b4731da62949be002fa89283701
231
+ rb-fsevent (0.11.2) sha256=43900b972e7301d6570f64b850a5aa67833ee7d87b458ee92805d56b7318aefe
232
+ rb-inotify (0.11.1) sha256=a0a700441239b0ff18eb65e3866236cd78613d6b9f78fea1f9ac47a85e47be6e
233
+ rexml (3.4.4) sha256=19e0a2c3425dfbf2d4fc1189747bdb2f849b6c5e74180401b15734bc97b5d142
234
+ rouge (4.7.0) sha256=dba5896715c0325c362e895460a6d350803dbf6427454f49a47500f3193ea739
235
+ rubyzip (3.6.0) sha256=268994d44d62282d1cfd99bf10eae48d7267199158ad7ea3e1fee2da9458b695
236
+ safe_yaml (1.0.5) sha256=a6ac2d64b7eb027bdeeca1851fe7e7af0d668e133e8a88066a0c6f7087d9f848
237
+ sass-embedded (1.104.1) sha256=baebf97913ef0bb942d0a513655cc09c49f184170b8bcfa7b2bf8a4f27376183
238
+ sass-embedded (1.104.1-aarch64-linux-android) sha256=96d19b72a3cdf59700c225d70fdabc88eb2d629472296b5828cb4feaba97235a
239
+ sass-embedded (1.104.1-aarch64-linux-gnu) sha256=74462d649b6d6089dffa0696a0e5f9da68aae76693401396ef51c4b593f4511a
240
+ sass-embedded (1.104.1-aarch64-linux-musl) sha256=1b417b5a0399d532fb3b2eee514a430bc2f349d5d2d68c5f5699b95c64ce66a1
241
+ sass-embedded (1.104.1-arm-linux-androideabi) sha256=758a24665dd5b8cb5bd951cb74612734054481af6a2418c6f31384d28b7fed70
242
+ sass-embedded (1.104.1-arm-linux-gnueabihf) sha256=30b5b4bd2210daebc0263d77c236baeb946b5fee37d71e0dde6f2edda733742f
243
+ sass-embedded (1.104.1-arm-linux-musleabihf) sha256=e3465c79e2a74a6a7fa9de2b3c02fb8b3a1c0e7edf39c4c79cc285d6f4d088b7
244
+ sass-embedded (1.104.1-arm64-darwin) sha256=521c17268d62be96803661c1ad9551205aafa3553eb71bb56d4106d6872b3c30
245
+ sass-embedded (1.104.1-riscv64-linux-android) sha256=a28ab9ef7bfa998666c16bc12f95db8cd306a457ae11e6ce263fb88a777d5ede
246
+ sass-embedded (1.104.1-riscv64-linux-gnu) sha256=c672b56e36b125cc57234c543d50cc468f36f6dc858154341920953d19590b98
247
+ sass-embedded (1.104.1-riscv64-linux-musl) sha256=4bafa3ce08e5b107668e5b75f94fba58a1644d2ec09808d9a807306a43d8bf1d
248
+ sass-embedded (1.104.1-x86_64-darwin) sha256=aca394ec6d9911f8bb589cb39e6ef7cfdc9d3467c4f06866a2921a77ee060e0e
249
+ sass-embedded (1.104.1-x86_64-linux-android) sha256=a096345383293ffe20558059b1db779e4509f4b7270bad1fa9f517159fdda7b9
250
+ sass-embedded (1.104.1-x86_64-linux-gnu) sha256=a9223bd34c4f5616412f4affbc8c450e5c547f69940ce42c92d23fca9111ea87
251
+ sass-embedded (1.104.1-x86_64-linux-musl) sha256=bcb547d0a8aeace54c2d0a7252792763d2570cf0118060d6181ca18e7916f509
252
+ terminal-table (3.0.2) sha256=f951b6af5f3e00203fb290a669e0a85c5dd5b051b3b023392ccfd67ba5abae91
253
+ unicode-display_width (2.6.0) sha256=12279874bba6d5e4d2728cef814b19197dbb10d7a7837a869bab65da943b7f5a
254
+ webrick (1.9.2) sha256=beb4a15fc474defed24a3bda4ffd88a490d517c9e4e6118c3edce59e45864131
255
+
256
+ BUNDLED WITH
257
+ 4.0.16
package/docs/_config.yml ADDED
@@ -0,0 +1,43 @@
1
+ title: demo-maker
2
+ tagline: Open-source product demo video maker for websites
3
+ description: >-
4
+ Open-source product demo video maker for websites. Create consistent
5
+ website demo videos from YAML configuration with Playwright β€” no manual
6
+ clicking or re-recording.
7
+ url: https://a1knowhow.github.io
8
+ baseurl: /demo-maker
9
+
10
+ remote_theme: just-the-docs/just-the-docs@v0.10.1
11
+ plugins:
12
+ - jekyll-remote-theme
13
+ - jekyll-seo-tag
14
+ - jekyll-include-cache
15
+ - jekyll-sitemap
16
+
17
+ search_enabled: true
18
+ heading_anchors: true
19
+
20
+ # SSR fallback before JS; default for readers is system preference (see js/custom.js)
21
+ color_scheme: light
22
+
23
+ google_site_verification: PLeofoAxP71MoBgsJPpxHHO1wzdrD6oamkO-HtPqAhY
24
+
25
+ aux_links:
26
+ "GitHub": https://github.com/a1knowhow/demo-maker
27
+ "npm": https://www.npmjs.com/package/@a1knowhow/demo-maker
28
+ "llms.txt": https://raw.githubusercontent.com/a1knowhow/demo-maker/main/llms.txt
29
+ aux_links_new_tab: true
30
+
31
+ defaults:
32
+ - scope:
33
+ path: ""
34
+ values:
35
+ layout: default
36
+
37
+ exclude:
38
+ - Gemfile
39
+ - Gemfile.lock
40
+ - vendor/
41
+ - .bundle/
42
+ - .jekyll-cache/
43
+ - .sass-cache/
package/docs/_includes/components/aux_nav.html ADDED
@@ -0,0 +1,35 @@
1
+ <nav aria-label="Auxiliary" class="aux-nav">
2
+ <ul class="aux-nav-list">
3
+ {% for link in site.aux_links %}
4
+ {% if link.first == "GitHub" %}
5
+ {% assign tooltip = "Check GitHub repo" %}
6
+ {% assign icon_id = "svg-github" %}
7
+ {% elsif link.first == "npm" %}
8
+ {% assign tooltip = "View npm package" %}
9
+ {% assign icon_id = "svg-npm" %}
10
+ {% elsif link.first == "llms.txt" %}
11
+ {% assign tooltip = "Read llms.txt" %}
12
+ {% assign icon_id = "svg-llms" %}
13
+ {% else %}
14
+ {% assign tooltip = link.first %}
15
+ {% assign icon_id = nil %}
16
+ {% endif %}
17
+ <li class="aux-nav-list-item">
18
+ <a href="{{ link.last }}" class="site-button"
19
+ aria-label="{{ tooltip }}"
20
+ title="{{ tooltip }}"
21
+ {% if site.aux_links_new_tab %}
22
+ target="_blank" rel="noopener noreferrer"
23
+ {% endif %}
24
+ >
25
+ {% if icon_id %}
26
+ <svg viewBox="0 0 16 16" class="aux-nav-icon" aria-hidden="true"><use href="#{{ icon_id }}" xlink:href="#{{ icon_id }}"></use></svg>
27
+ <span class="sr-only">{{ tooltip }}</span>
28
+ {% else %}
29
+ {{ link.first }}
30
+ {% endif %}
31
+ </a>
32
+ </li>
33
+ {% endfor %}
34
+ </ul>
35
+ </nav>
package/docs/_includes/head_custom.html ADDED
@@ -0,0 +1,63 @@
1
+ {% assign seo_description = site.description | strip_newlines | strip %}
2
+ <link rel="alternate" type="text/plain" title="llms.txt" href="https://raw.githubusercontent.com/a1knowhow/demo-maker/main/llms.txt">
3
+ <script type="application/ld+json">
4
+ {
5
+ "@context": "https://schema.org",
6
+ "@type": "SoftwareApplication",
7
+ "name": "demo-maker",
8
+ "applicationCategory": "DeveloperApplication",
9
+ "operatingSystem": "cross-platform",
10
+ "description": {{ seo_description | jsonify }},
11
+ "url": {{ site.url | append: site.baseurl | append: "/" | jsonify }},
12
+ "downloadUrl": "https://www.npmjs.com/package/@a1knowhow/demo-maker",
13
+ "codeRepository": "https://github.com/a1knowhow/demo-maker",
14
+ "license": "https://www.apache.org/licenses/LICENSE-2.0",
15
+ "offers": {
16
+ "@type": "Offer",
17
+ "price": "0",
18
+ "priceCurrency": "USD"
19
+ }
20
+ }
21
+ </script>
22
+ {% if page.url == "/" %}
23
+ <script type="application/ld+json">
24
+ {
25
+ "@context": "https://schema.org",
26
+ "@type": "FAQPage",
27
+ "mainEntity": [
28
+ {
29
+ "@type": "Question",
30
+ "name": "What is a product demo video maker?",
31
+ "acceptedAnswer": {
32
+ "@type": "Answer",
33
+ "text": "A product demo video maker turns a real product walkthrough into a shareable video. demo-maker does that for websites: YAML steps drive a browser with Playwright and produce a consistent MP4 you can re-run after UI changes."
34
+ }
35
+ },
36
+ {
37
+ "@type": "Question",
38
+ "name": "How is demo-maker different from an AI presentation maker?",
39
+ "acceptedAnswer": {
40
+ "@type": "Answer",
41
+ "text": "AI presentation makers build slides or motion graphics from text. demo-maker films your actual website: configured clicks, navigations, and waits on the live UI β€” not a generated deck."
42
+ }
43
+ },
44
+ {
45
+ "@type": "Question",
46
+ "name": "How do I make a consistent website demo video without re-recording?",
47
+ "acceptedAnswer": {
48
+ "@type": "Answer",
49
+ "text": "Write the walkthrough once as YAML, enable video output, then run npx demo-maker run your-scenario.yaml. When the product UI changes, edit the affected steps and re-run to get the same consistent demo again."
50
+ }
51
+ },
52
+ {
53
+ "@type": "Question",
54
+ "name": "Is demo-maker open source?",
55
+ "acceptedAnswer": {
56
+ "@type": "Answer",
57
+ "text": "Yes. demo-maker is open source (Apache-2.0) on GitHub and published as @a1knowhow/demo-maker on npm. Agent-oriented overview: https://raw.githubusercontent.com/a1knowhow/demo-maker/main/llms.txt"
58
+ }
59
+ }
60
+ ]
61
+ }
62
+ </script>
63
+ {% endif %}
package/docs/_includes/header_custom.html ADDED
@@ -0,0 +1,3 @@
1
+ <button type="button" class="theme-toggle js-theme-toggle" aria-label="Switch to dark mode" title="Toggle theme">
2
+ <svg viewBox="0 0 24 24" class="theme-toggle-icon" aria-hidden="true"><use href="#svg-moon" xlink:href="#svg-moon"></use></svg>
3
+ </button>
package/docs/_includes/icons/github.html ADDED
@@ -0,0 +1,5 @@
1
+ <!-- GitHub Mark. https://github.com/logos -->
2
+ <symbol id="svg-github" viewBox="0 0 16 16">
3
+ <title>Check GitHub repo</title>
4
+ <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>
5
+ </symbol>
package/docs/_includes/icons/icons.html ADDED
@@ -0,0 +1,18 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
2
+ {% include icons/link.html %}
3
+ {% include icons/menu.html %}
4
+ {% include icons/expand.html %}
5
+ {% include icons/external_link.html %}
6
+ {% if site.search_enabled != false %}
7
+ {% include icons/document.html %}
8
+ {% include icons/search.html %}
9
+ {% endif %}
10
+ {% if site.enable_copy_code_button != false %}
11
+ {% include icons/code_copy.html %}
12
+ {% endif %}
13
+ {% include icons/moon.html %}
14
+ {% include icons/sun.html %}
15
+ {% include icons/github.html %}
16
+ {% include icons/npm.html %}
17
+ {% include icons/llms.html %}
18
+ </svg>
package/docs/_includes/icons/llms.html ADDED
@@ -0,0 +1,5 @@
1
+ <!-- File / text document mark for llms.txt -->
2
+ <symbol id="svg-llms" viewBox="0 0 16 16">
3
+ <title>Read llms.txt</title>
4
+ <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"/>
5
+ </symbol>
package/docs/_includes/icons/moon.html ADDED
@@ -0,0 +1,6 @@
1
+ <symbol id="svg-moon" viewBox="0 0 24 24">
2
+ <title>Dark mode</title>
3
+ <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">
4
+ <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
5
+ </svg>
6
+ </symbol>
package/docs/_includes/icons/npm.html ADDED
@@ -0,0 +1,5 @@
1
+ <!-- npm logo mark -->
2
+ <symbol id="svg-npm" viewBox="0 0 16 16">
3
+ <title>View npm package</title>
4
+ <path fill="currentColor" d="M0 0v16h16V0H0zm13 13h-2V5H8v8H3V3h10v10z"/>
5
+ </symbol>
package/docs/_includes/icons/sun.html ADDED
@@ -0,0 +1,14 @@
1
+ <symbol id="svg-sun" viewBox="0 0 24 24">
2
+ <title>Light mode</title>
3
+ <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">
4
+ <circle cx="12" cy="12" r="5"></circle>
5
+ <line x1="12" y1="1" x2="12" y2="3"></line>
6
+ <line x1="12" y1="21" x2="12" y2="23"></line>
7
+ <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
8
+ <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
9
+ <line x1="1" y1="12" x2="3" y2="12"></line>
10
+ <line x1="21" y1="12" x2="23" y2="12"></line>
11
+ <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
12
+ <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
13
+ </svg>
14
+ </symbol>
package/docs/_includes/js/custom.js ADDED
@@ -0,0 +1,83 @@
1
+ (function () {
2
+ var STORAGE_KEY = "jtd-theme";
3
+
4
+ function normalize(theme) {
5
+ return theme === "dark" ? "dark" : "light";
6
+ }
7
+
8
+ function systemTheme() {
9
+ if (
10
+ window.matchMedia &&
11
+ window.matchMedia("(prefers-color-scheme: dark)").matches
12
+ ) {
13
+ return "dark";
14
+ }
15
+ return "light";
16
+ }
17
+
18
+ function ariaFor(theme) {
19
+ return normalize(theme) === "dark"
20
+ ? "Switch to light mode"
21
+ : "Switch to dark mode";
22
+ }
23
+
24
+ /** Icon shows the mode you can switch *to* (moon β†’ dark, sun β†’ light). */
25
+ function iconFor(theme) {
26
+ return normalize(theme) === "dark" ? "#svg-sun" : "#svg-moon";
27
+ }
28
+
29
+ function updateButton(theme) {
30
+ var btn = document.querySelector(".js-theme-toggle");
31
+ if (!btn) return;
32
+ btn.setAttribute("aria-label", ariaFor(theme));
33
+ btn.setAttribute("title", "Toggle theme");
34
+ var use = btn.querySelector("use");
35
+ if (!use) return;
36
+ var href = iconFor(theme);
37
+ use.setAttribute("href", href);
38
+ use.setAttribute("xlink:href", href);
39
+ }
40
+
41
+ /** Apply theme visually; only persist when `persist` is true (user chose). */
42
+ function apply(theme, persist) {
43
+ if (typeof jtd === "undefined") return;
44
+ theme = normalize(theme);
45
+ jtd.setTheme(theme);
46
+ if (persist) {
47
+ localStorage.setItem(STORAGE_KEY, theme);
48
+ }
49
+ updateButton(theme);
50
+ }
51
+
52
+ function init() {
53
+ if (typeof jtd === "undefined") return;
54
+
55
+ var saved = localStorage.getItem(STORAGE_KEY);
56
+ var media =
57
+ window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
58
+
59
+ if (saved === "dark" || saved === "light") {
60
+ apply(saved, false);
61
+ } else {
62
+ apply(systemTheme(), false);
63
+ if (media && media.addEventListener) {
64
+ media.addEventListener("change", function () {
65
+ if (localStorage.getItem(STORAGE_KEY)) return;
66
+ apply(systemTheme(), false);
67
+ });
68
+ }
69
+ }
70
+
71
+ var btn = document.querySelector(".js-theme-toggle");
72
+ if (!btn) return;
73
+ jtd.addEvent(btn, "click", function () {
74
+ apply(normalize(jtd.getTheme()) === "dark" ? "light" : "dark", true);
75
+ });
76
+ }
77
+
78
+ if (document.readyState === "loading") {
79
+ document.addEventListener("DOMContentLoaded", init);
80
+ } else {
81
+ init();
82
+ }
83
+ })();
package/docs/_sass/custom/custom.scss ADDED
@@ -0,0 +1,48 @@
1
+ // Theme toggle β€” match search-icon weight/size in the header
2
+ .theme-toggle {
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ height: 100%;
7
+ margin: 0;
8
+ padding: 0 0.75rem;
9
+ color: $grey-dk-000;
10
+ background: transparent;
11
+ border: 0;
12
+ cursor: pointer;
13
+
14
+ &:hover {
15
+ color: $link-color;
16
+ }
17
+
18
+ .theme-toggle-icon {
19
+ width: #{$sp-4 * 1.2};
20
+ height: #{$sp-4 * 1.2};
21
+ }
22
+ }
23
+
24
+ .aux-nav .site-button {
25
+ display: inline-flex;
26
+ gap: 0.4rem;
27
+ align-items: center;
28
+ padding-left: 0.65rem;
29
+ padding-right: 0.65rem;
30
+ }
31
+
32
+ .aux-nav-icon {
33
+ width: #{$sp-4 * 1.1};
34
+ height: #{$sp-4 * 1.1};
35
+ flex-shrink: 0;
36
+ }
37
+
38
+ .sr-only {
39
+ position: absolute;
40
+ width: 1px;
41
+ height: 1px;
42
+ padding: 0;
43
+ margin: -1px;
44
+ overflow: hidden;
45
+ clip: rect(0, 0, 0, 0);
46
+ white-space: nowrap;
47
+ border: 0;
48
+ }
package/docs/actions.md CHANGED
@@ -1,6 +1,12 @@
1
+ ---
2
+ title: Actions
3
+ nav_order: 5
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Actions
2
8
 
3
- Purpose: Reference for every `action:` value in scenario steps. Schema: [`src/types.ts`](../src/types.ts).
9
+ Purpose: Reference for every `action:` value in scenario steps. Schema: [`src/types.ts`](https://github.com/a1knowhow/demo-maker/blob/main/src/types.ts).
4
10
 
5
11
  Any step may include optional `caption:` (overlay/log) and `timeout_ms:` (default 10000 unless overridden by `action_timeout_ms`).
6
12
 
@@ -158,3 +164,4 @@ Skipped in `--headless`. Prefer `wait` + `timeout_ms` for video pacing.
158
164
  - [Locators](./locators.md)
159
165
  - [Scenario schema](./scenario-schema.md)
160
166
  - [Video and pacing](./video-and-pacing.md)
167
+ {% endraw %}
package/docs/assets/css/just-the-docs-dark.scss ADDED
@@ -0,0 +1,4 @@
1
+ ---
2
+ render_with_liquid: true
3
+ ---
4
+ {% include css/just-the-docs.scss.liquid color_scheme="dark" %}
package/docs/cli.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: CLI
3
+ nav_order: 3
4
+ ---
5
+
6
+ {% raw %}
1
7
  # CLI
2
8
 
3
9
  Purpose: Commands and flags for the `demo-maker` binary.
@@ -71,3 +77,4 @@ demo-maker export-chapters output/videos # newest *.timing.json in dir
71
77
  - Node 20+
72
78
  - Playwright Chromium (`npx playwright install chromium`)
73
79
  - ffmpeg on `PATH` for `.mp4`, `cut_video` splice, background audio
80
+ {% endraw %}
package/docs/getting-started.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: Getting started
3
+ nav_order: 2
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Getting started
2
8
 
3
9
  Purpose: Step-by-step from install to a first recorded MP4.
@@ -218,3 +224,4 @@ Use `action: log` with `── Scene N: …` markers and/or step `caption:` for
218
224
  - Locator guide: [Locators](./locators.md)
219
225
  - After UI breaks demos: [Repairing scenarios](./repairing-scenarios.md)
220
226
  - All flags: [CLI](./cli.md)
227
+ {% endraw %}
package/docs/imports-and-fragments.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: Imports and fragments
3
+ nav_order: 8
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Imports and fragments
2
8
 
3
9
  Purpose: Compose reusable YAML without duplicating steps.
@@ -76,3 +82,4 @@ steps:
76
82
  ```
77
83
 
78
84
  See [Recording](./recording.md).
85
+ {% endraw %}
package/docs/index.md ADDED
@@ -0,0 +1,100 @@
1
+ ---
2
+ title: Home
3
+ nav_order: 1
4
+ ---
5
+
6
+ {% raw %}
7
+ # demo-maker
8
+
9
+ **demo-maker** is an open-source product demo video maker for websites. You describe the walkthrough in YAML; Playwright runs the clicks and records a consistent MP4. Edit the scenario when the UI changes and re-run β€” no manual clicking or re-recording. It is not an AI presentation or slide-deck maker.
10
+
11
+ Product UIs keep changing, so demo videos go stale. Re-recording by hand (or asking an agent to β€œjust make a video”) is slow, costly, and still needs a human check.
12
+
13
+ With `demo-maker` you configure the walkthrough as YAML steps, then re-run whenever the UI changes:
14
+
15
+ First create a scenario YAML file:
16
+ ```yaml
17
+ name: demo1-introduction
18
+ base_url: https://github.com
19
+ video:
20
+ enabled: true
21
+ dir: output/videos
22
+ filename: demo1-introduction.mp4
23
+ size: { width: 1920, height: 1080 }
24
+ steps:
25
+ - action: title_card
26
+ text: "From install to your first MP4"
27
+ - action: navigate
28
+ url: /a1knowhow/demo-maker/blob/main/docs/getting-started.md
29
+ caption: "Getting started"
30
+ - action: expect_visible
31
+ locator:
32
+ role: heading
33
+ name: Getting started
34
+ - ...
35
+ - action: title_card
36
+ text: "Try https://github.com/a1knowhow/demo-maker"
37
+ ```
38
+
39
+ [See full yaml](https://github.com/a1knowhow/demo-maker/blob/main/examples/demo1-introduction.yaml)
40
+
41
+
42
+ Then run it:
43
+
44
+ ```bash
45
+ npx demo-maker run examples/demo1-introduction.yaml
46
+ ```
47
+
48
+ And create demo video (and if UI changed, update the relevant step and re-create):
49
+ <video src="https://github.com/user-attachments/assets/4f1ded4a-5874-43f9-9d67-17843164ac61" controls width="720" style="border: 1px solid rgba(128, 128, 128, 0.35); border-radius: 4px;"></video>
50
+
51
+ **Read this first:** [Getting started](./getting-started.md) (install β†’ first run β†’ first MP4).
52
+
53
+ Typed schema source of truth: [`src/types.ts`](https://github.com/a1knowhow/demo-maker/blob/main/src/types.ts).
54
+
55
+ ## Topic map
56
+
57
+ | Doc | When to open it |
58
+ |-----|-----------------|
59
+ | [Getting started](./getting-started.md) | Zero β†’ first successful run and video |
60
+ | [CLI](./cli.md) | Commands and flags |
61
+ | [Scenario schema](./scenario-schema.md) | Top-level YAML fields |
62
+ | [Actions](./actions.md) | What each `action:` does |
63
+ | [Locators](./locators.md) | Targeting UI elements |
64
+ | [Variables](./variables.md) | `{{ }}` and filename template functions |
65
+ | [Imports and fragments](./imports-and-fragments.md) | Reusable YAML composition |
66
+ | [Recording](./recording.md) | Live record, continue-from, import |
67
+ | [Video and pacing](./video-and-pacing.md) | MP4, captions, title cards, cut_video |
68
+ | [Repairing scenarios](./repairing-scenarios.md) | Fix YAML after UI changes |
69
+ | [Library API](./library-api.md) | Use from TypeScript |
70
+ | [URL capture](./url-capture.md) | Capture IDs from page URLs into `{{ vars }}` |
71
+
72
+ ## Suggested reading order
73
+
74
+ - Prefer opening **one topic file** over the whole tree.
75
+ - For a new scenario: getting-started β†’ actions β†’ locators β†’ video-and-pacing.
76
+ - For a failing step: repairing-scenarios β†’ locators.
77
+ - For composition: imports-and-fragments.
78
+
79
+ ## FAQ
80
+
81
+ ### What is a product demo video maker?
82
+
83
+ A product demo video maker turns a real product walkthrough into a shareable video. **demo-maker** does that for websites: YAML steps drive a browser with Playwright and produce a consistent MP4 you can re-run after UI changes.
84
+
85
+ ### How is demo-maker different from an AI presentation maker?
86
+
87
+ AI presentation makers build slides or motion graphics from text. **demo-maker** films your actual website: configured clicks, navigations, and waits on the live UI β€” not a generated deck.
88
+
89
+ ### How do I make a consistent website demo video without re-recording?
90
+
91
+ Write the walkthrough once as YAML, enable `video:`, then run `npx demo-maker run your-scenario.yaml`. When the product UI changes, edit the affected steps and re-run to get the same consistent demo again.
92
+
93
+ ### Is demo-maker open source?
94
+
95
+ Yes. **demo-maker** is open source (Apache-2.0) on [GitHub](https://github.com/a1knowhow/demo-maker) and published as [`@a1knowhow/demo-maker`](https://www.npmjs.com/package/@a1knowhow/demo-maker) on npm. Agent-oriented overview: [`llms.txt`](https://raw.githubusercontent.com/a1knowhow/demo-maker/main/llms.txt).
96
+
97
+ ## About A1KnowHow
98
+
99
+ demo-maker was created originally for building demo videos for [A1KnowHow](https://a1knowhow.com/) β€” AI workflows, document organisation, chat, search, and AI agents with skills and MCP tool integration.
100
+ {% endraw %}
package/docs/library-api.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: Library API
3
+ nav_order: 12
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Library API
2
8
 
3
9
  Purpose: Use demo-maker from TypeScript instead of the CLI.
@@ -62,3 +68,4 @@ if (!result.success) {
62
68
  `RunScenarioOptions`: `logger`, `headless`, `cwd`, `storageStatePath`, `saveStorageStatePath`, `failFast`, `endStep`, `pauseAtEnd`, `debugDir`, `urlCaptureHooks`.
63
69
 
64
70
  Relative paths in YAML (`video.dir`, file uploads) resolve against `cwd` (default `process.cwd()`).
71
+ {% endraw %}
package/docs/locators.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: Locators
3
+ nav_order: 6
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Locators
2
8
 
3
9
  Purpose: How to target UI elements in YAML (`locator:`). Prefer accessibility over CSS.
@@ -117,3 +123,4 @@ Add unique `aria-label` on inputs, editors, and buttons. In loops, suffix with i
117
123
  When recording/importing, priority is roughly: `aria-label`/`label=` β†’ Playwright `getBy*` code β†’ internal selector parse β†’ fallback `text` or `(recorded)`.
118
124
 
119
125
  See [Recording](./recording.md) and [Repairing scenarios](./repairing-scenarios.md).
126
+ {% endraw %}
package/docs/recording.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: Recording
3
+ nav_order: 9
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Recording
2
8
 
3
9
  Purpose: Capture browser actions into YAML (or import from JSON).
@@ -57,3 +63,4 @@ demo-maker import recording.json -o scenario.yaml --base-url http://localhost:30
57
63
  ## Repair loop
58
64
 
59
65
  See [Repairing scenarios](./repairing-scenarios.md) for detect β†’ isolate β†’ continue-from β†’ transplant locators β†’ verify.
66
+ {% endraw %}
package/docs/repairing-scenarios.md CHANGED
@@ -1,3 +1,8 @@
1
+ ---
2
+ title: Repairing scenarios
3
+ nav_order: 11
4
+ ---
5
+
1
6
  # Repairing scenarios
2
7
 
3
8
  Purpose: YAML is valid but fails at runtime after UI changes. This is a **runtime** smoke loop, not schema validation.
package/docs/scenario-schema.md CHANGED
@@ -1,6 +1,11 @@
1
+ ---
2
+ title: Scenario schema
3
+ nav_order: 4
4
+ ---
5
+
1
6
  # Scenario schema
2
7
 
3
- Purpose: Top-level YAML fields for an entry scenario. Typed definitions: [`src/types.ts`](../src/types.ts).
8
+ Purpose: Top-level YAML fields for an entry scenario. Typed definitions: [`src/types.ts`](https://github.com/a1knowhow/demo-maker/blob/main/src/types.ts).
4
9
 
5
10
  **Metadata rule:** Only the **entry** file (the path you pass to `npx demo-maker run`) supplies `name`, `base_url`, `video`, pacing, `auth`, etc. Imported files contribute **steps only**.
6
11
 
package/docs/url-capture.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: URL capture
3
+ nav_order: 13
4
+ ---
5
+
6
+ {% raw %}
1
7
  # URL capture
2
8
 
3
9
  Purpose: Store path segments from the browser URL as `{{ variables }}` during a run.
@@ -73,3 +79,4 @@ await runScenario(scenario, context, {
73
79
  - [Variables](./variables.md)
74
80
  - [CLI](./cli.md)
75
81
  - [Library API](./library-api.md)
82
+ {% endraw %}
package/docs/variables.md CHANGED
@@ -1,10 +1,16 @@
1
+ ---
2
+ title: Variables
3
+ nav_order: 7
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Variables and templates
2
8
 
3
9
  Purpose: Runtime substitution in scenario strings.
4
10
 
5
- ## `{{ placeholders }}`
11
+ ## Placeholders
6
12
 
7
- In `value:`, `url:`, string locator fields, and captions, use:
13
+ In `value:`, `url:`, string locator fields, and captions, use `{{ name }}` syntax:
8
14
 
9
15
  ```yaml
10
16
  value: "{{ auth.email }}"
@@ -46,3 +52,4 @@ video:
46
52
  Produces e.g. `demo-2026-04-01-1432.mp4`.
47
53
 
48
54
  Implemented in `src/templates.ts`.
55
+ {% endraw %}
package/docs/video-and-pacing.md CHANGED
@@ -1,3 +1,9 @@
1
+ ---
2
+ title: Video and pacing
3
+ nav_order: 10
4
+ ---
5
+
6
+ {% raw %}
1
7
  # Video and pacing
2
8
 
3
9
  Purpose: Recording quality, overlays, ffmpeg post-processing, and timing.
@@ -107,3 +113,4 @@ On a large external display, omit `viewport` for native 1080p rendering.
107
113
  - [Actions](./actions.md) (`title_card`, `cut_video`, `wait`)
108
114
  - [Variables](./variables.md) (filename templates)
109
115
  - [Getting started](./getting-started.md)
116
+ {% endraw %}
package/llms.txt CHANGED
@@ -1,9 +1,11 @@
1
1
  # demo-maker
2
2
 
3
- > Demo videos as code β€” YAML + Playwright β†’ polished, consistent product feature videos. Configure once, re-run forever.
3
+ > Open-source product demo video maker for websites. Create consistent website demo videos from YAML configuration with Playwright β€” no manual clicking or re-recording. Not an AI presentation or slide-deck maker.
4
4
 
5
5
  Open-source CLI (`@a1knowhow/demo-maker`). Requires Node.js 20+, Playwright Chromium, and ffmpeg. Apache-2.0.
6
6
 
7
+ Category synonyms: product demo video, website demo as code, YAML + Playwright β†’ MP4, consistent re-runnable demos.
8
+
7
9
  Prefer markdown docs linked below over scraping HTML. Schema lives in source TypeScript.
8
10
 
9
11
  ## Docs
@@ -20,7 +22,8 @@ Prefer markdown docs linked below over scraping HTML. Schema lives in source Typ
20
22
 
21
23
  ## Optional
22
24
 
23
- - [Docs index](https://raw.githubusercontent.com/a1knowhow/demo-maker/main/docs/README.md)
25
+ - [Docs index](https://raw.githubusercontent.com/a1knowhow/demo-maker/main/docs/index.md)
26
+ - [Docs site](https://a1knowhow.github.io/demo-maker/)
24
27
  - [Imports & fragments](https://raw.githubusercontent.com/a1knowhow/demo-maker/main/docs/imports-and-fragments.md)
25
28
  - [Variables](https://raw.githubusercontent.com/a1knowhow/demo-maker/main/docs/variables.md)
26
29
  - [URL capture](https://raw.githubusercontent.com/a1knowhow/demo-maker/main/docs/url-capture.md)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@a1knowhow/demo-maker",
3
- "version": "0.1.2",
4
- "description": "Demo videos as code β€” configure once, re-run forever. YAML + Playwright β†’ polished, consistent product feature videos.",
3
+ "version": "0.1.3",
4
+ "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.",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "bin": {
@@ -24,11 +24,14 @@
24
24
  "automation",
25
25
  "cli",
26
26
  "demo",
27
+ "demo-as-code",
27
28
  "ffmpeg",
28
29
  "playwright",
29
30
  "product-demo",
31
+ "product-demo-video",
30
32
  "screen-recording",
31
33
  "video",
34
+ "website-demo",
32
35
  "yaml"
33
36
  ],
34
37
  "engines": {
@@ -38,7 +41,7 @@
38
41
  "type": "git",
39
42
  "url": "git+https://github.com/a1knowhow/demo-maker.git"
40
43
  },
41
- "homepage": "https://github.com/a1knowhow/demo-maker#readme",
44
+ "homepage": "https://a1knowhow.github.io/demo-maker/",
42
45
  "bugs": {
43
46
  "url": "https://github.com/a1knowhow/demo-maker/issues"
44
47
  },
@@ -51,16 +54,18 @@
51
54
  "test:watch": "vitest",
52
55
  "typecheck": "tsc -p tsconfig.json --noEmit",
53
56
  "pack:check": "npm pack --dry-run",
54
- "prepublishOnly": "npm test && npm run typecheck"
57
+ "prepublishOnly": "npm test && npm run typecheck",
58
+ "docs:install": "cd docs && bundle config set --local path vendor/bundle && bundle install",
59
+ "docs:serve": "cd docs && bundle exec jekyll serve --baseurl /demo-maker --livereload"
55
60
  },
56
61
  "dependencies": {
57
- "playwright": "^1.62.1",
58
- "tsx": "^4.23.13",
59
- "yaml": "^2.9.0"
62
+ "playwright": "^1.64.1",
63
+ "tsx": "^4.23.15",
64
+ "yaml": "^2.9.1"
60
65
  },
61
66
  "devDependencies": {
62
- "@types/node": "^22.13.10",
67
+ "@types/node": "^26.6.5",
63
68
  "typescript": "^7.0.2",
64
- "vitest": "^5.0.0"
69
+ "vitest": "^5.0.5"
65
70
  }
66
71
  }
package/docs/README.md DELETED
@@ -1,35 +0,0 @@
1
- # Documentation
2
-
3
- Purpose: Index for humans and AI agents working with `@a1knowhow/demo-maker`.
4
-
5
- **Read this first:** [Getting started](./getting-started.md) (install β†’ first run β†’ first MP4).
6
-
7
- Typed schema source of truth: [`src/types.ts`](../src/types.ts).
8
-
9
- ## Topic map
10
-
11
- | Doc | When to open it |
12
- |-----|-----------------|
13
- | [Getting started](./getting-started.md) | Zero β†’ first successful run and video |
14
- | [CLI](./cli.md) | Commands and flags |
15
- | [Scenario schema](./scenario-schema.md) | Top-level YAML fields |
16
- | [Actions](./actions.md) | What each `action:` does |
17
- | [Locators](./locators.md) | Targeting UI elements |
18
- | [Variables](./variables.md) | `{{ }}` and filename template functions |
19
- | [Imports and fragments](./imports-and-fragments.md) | Reusable YAML composition |
20
- | [Recording](./recording.md) | Live record, continue-from, import |
21
- | [Video and pacing](./video-and-pacing.md) | MP4, captions, title cards, cut_video |
22
- | [Repairing scenarios](./repairing-scenarios.md) | Fix YAML after UI changes |
23
- | [Library API](./library-api.md) | Use from TypeScript |
24
- | [URL capture](./url-capture.md) | Capture IDs from page URLs into `{{ vars }}` |
25
-
26
- ## Agent loading tips
27
-
28
- - Prefer opening **one topic file** over the whole tree.
29
- - For a new scenario: getting-started β†’ actions β†’ locators β†’ video-and-pacing.
30
- - For a failing step: repairing-scenarios β†’ locators.
31
- - For composition: imports-and-fragments.
32
-
33
- ## Similar tools (brief)
34
-
35
- Demo-maker is in the β€œdemo as code” family: declarative steps β†’ Playwright β†’ video. Close peers include [demo-machine](https://github.com/45ck/demo-machine), [Clipwise](https://github.com/kwakseongjae/clipwise), and [SceneForge](https://github.com/jhandel/sceneforge). Strengths here: composable imports, locator abstraction, storage-state auth, captions/chapters, and a repair loop (`record --continue-from`).