<link rel="stylesheet" type="text/css" href="https://lively-kernel.org/lively4/lively4-petrinet/src/components/demo/../index-style.css" data-href="../index-style.css"></link>
# Demo Components
<lively-script><script>import ComponentCreator from "src/client/morphic/component-creator.js" var container = lively.query(this, "lively-container") if(!container) throw new Error("Not inside lively container?"); ComponentCreator.createUI(container)</script> </lively-script>
- lively-ball 
  <span></span>
  [open](open://lively-ball)
  <span></span>
  [html](lively-ball.html)
  <span></span>
  [js](lively-ball.js)
  <span></span>  
  
  ![](https://lively-kernel.org/lively4/lively4-petrinet/src/components/demo/lively-ball.png)
- lively-bouncing-ball 
  <span></span>
  [open](open://lively-bouncing-ball)
  <span></span>
  [html](lively-bouncing-ball.html)
  <span></span>
  [js](lively-bouncing-ball.js)
  <span></span>  
  
  ![](https://lively-kernel.org/lively4/lively4-petrinet/src/components/demo/lively-bouncing-ball.png)
- lively-continuous-editor 
  <span></span>
  [open](open://lively-continuous-editor)
  <span></span>
  [html](lively-continuous-editor.html)
  <span></span>
  [js](lively-continuous-editor.js)
  <span></span>  
  
  ![](https://lively-kernel.org/lively4/lively4-petrinet/src/components/demo/lively-continuous-editor.png)
- lively-digital-clock 
  <span></span>
  [open](open://lively-digital-clock)
  <span></span>
  [html](lively-digital-clock.html)
  <span></span>
  [js](lively-digital-clock.js)
  <span></span>  
  
  ![](https://lively-kernel.org/lively4/lively4-petrinet/src/components/demo/lively-digital-clock.png)
- lively-math 
  <span></span>
  [open](open://lively-math)
  <span></span>
  [html](lively-math.html)
  <span></span>
  [js](lively-math.js)
  <span></span>
- lively-module-graph 
  <span></span>
  [open](open://lively-module-graph)
  <span></span>
  [html](lively-module-graph.html)
  <span></span>
  [js](lively-module-graph.js)
  <span></span>  
  
  ![](https://lively-kernel.org/lively4/lively4-petrinet/src/components/demo/lively-module-graph.png)
- lively-soapbubble 
  <span></span>
  [open](open://lively-soapbubble)
  <span></span>
  [html](lively-soapbubble.html)
  <span></span>
  [js](lively-soapbubble.js)
  <span></span>  
  
  ![](https://lively-kernel.org/lively4/lively4-petrinet/src/components/demo/lively-soapbubble.png)
- lively-whyline 
  <span></span>
  [open](open://lively-whyline)
  <span></span>
  [html](lively-whyline.html)
  <span></span>
  [js](lively-whyline.js)
  <span></span>
- proweb18-jsx-intro-complex 
  <span></span>
  [open](open://proweb18-jsx-intro-complex)
  <span></span>
  [html](proweb18-jsx-intro-complex.html)
  <span></span>
  [js](proweb18-jsx-intro-complex.js)
  <span></span>
- proweb18-jsx-intro 
  <span></span>
  [open](open://proweb18-jsx-intro)
  <span></span>
  [html](proweb18-jsx-intro.html)
  <span></span>
  [js](proweb18-jsx-intro.js)
  <span></span>

## *META*
<lively-script><script>var context = lively.query(this, "lively-markdown").shadowRoot ComponentCreator.updateComponentsUI(container, context)</script> </lively-script>