diff --git a/examples/docs/container.html b/examples/docs/container.html
index 1e6a202..223ba1a 100644
--- a/examples/docs/container.html
+++ b/examples/docs/container.html
@@ -26,9 +26,26 @@
          overflow: auto;
     }
 </style>
+<script type="module">
+ import playgroundElements from 'https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm'
+ </script>
 </head>
 <body>
-    <div class="o-container-query-enabled">
+    
+    <playground-ide editable-file-system line-numbers resizable>
+        <script type="sample/html" filename="index.html">
+          <!doctype html>
+          <body>
+            Hello
+            <script type="module" src="./index.js">&lt;/script>
+          </body>
+        </script>
+      
+        <script type="sample/ts" filename="index.ts">
+          document.body.appendChild(document.createTextNode("World!"))
+        </script>
+      </playground-ide>
+   <!--  <div class="o-container-query-enabled">
         <section  class="o-container one ">
             one - enable relative resize?
             <ul  class="o-orbit">
@@ -40,29 +57,7 @@
             </ul>
         </section>
     </div>
-    <section  class="o-container two">
-        two
-        <ul  class="o-orbit">
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-        </ul>
-    </section>
-    <section  class="o-container three">
-        three
-        <ul  class="o-orbit">
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-            <li class="o-orbiter"></li>
-        </ul>
-    </section>
-    <section  class="o-container four" resizable>
-        four
-    </section>
+    -->
     
 </body>
 </html>
\ No newline at end of file
