<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
               <script src="../node_modules/lit/polyfill-support.js"></script>
               <script type="module" src="../dist/index.js"></script>
            

               ti-editor {
                  margin: 20px;
               }
            

               <ti-preview>
                  <figure>
                     <figcaption>index.html</figcaption>
                     <pre>
                        &lt;h1&gt;Hello World!&lt;/h1&gt;
                        &lt;p&gt;We have to go deeper.&lt;/p&gt;
                     </pre>
                  </figure>
               
                  <figure>
                     <figcaption>styles.css</figcaption>
                     <pre>
                        h1 {
                           font-family: 'Comic Sans MS';
                        }
               
                        p {
                           font-style: italic;
                           color: hotpink;
                        }
                     </pre>
                  </figure>
               </ti-preview>