tree: 48c73ac759351114899f48c28e02ed321322daff [path history] [tgz]
  1. demo.css
  2. index.html
  3. readme.md
  4. sketch-app-shell.demo.html
  5. sketch-charts.demo.html
  6. sketch-chat-input.demo.html
  7. sketch-container-status.demo.html
  8. sketch-diff-view.demo.html
  9. sketch-network-status.demo.html
  10. sketch-timeline-message.demo.html
  11. sketch-timeline.demo.html
  12. sketch-tool-calls.demo.html
  13. sketch-view-mode-select.demo.html
loop/webui/src/web-components/demo/readme.md

Stand-alone demo pages for sketch web components

These are handy for iterating on specific component UI issues in isolation from the rest of the sketch application, and without having to start a full backend to serve the full frontend app UI.

How to use this demo directory to iterate on component development

From the loop/webui directory:

  1. In one shell, run npm run watch to build the web components and watch for changes
  2. In another shell, run npm run demo to start a local web server to serve the demo pages
  3. open http://localhost:8000/src/web-components/demo/ in your browser
  4. make edits to the .ts code or to the demo.html files and see how it affects the demo pages in real time

Alternately, use the webui: watch demo task in VSCode, which runs all of the above for you.