diff --git a/README.md b/README.md
index 03875eb1..84caec1d 100644
--- a/README.md
+++ b/README.md
@@ -138,19 +138,26 @@ content of `index.html`:
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Svg Document</title>
+    <script type="module" src="http://localhost:12345/all-in-one.bundle.js" id="typst"></script>
   </head>
   <body>
-    <script type="module" src="http://localhost:12345/all-in-one.bundle.js" id="typst"></script>
+    <textarea id="input" style="width: 100%"></textarea>
+    <div id="content"></div>
     <script>
+      const input = document.getElementById('input');
+      input.value = 'Hello, Typst!';
       document.getElementById('typst').addEventListener('load', function () {
-        $typst.svg({ mainContent: 'Hello, World!' }).then(svg => {
-          console.log(`rendered! SvgElement { len: ${svg.length} }`);
-          // append svg text
-          document.getElementById('content').innerHTML = svg;
-        });
+        const compile = function (mainContent) {
+          $typst.svg({ mainContent }).then(svg => {
+            console.log(`rendered! SvgElement { len: ${svg.length} }`);
+            // append svg text
+            document.getElementById('content').innerHTML = svg;
+          });
+        };
+        input.oninput = () => compile(input.value);
+        compile(input.value);
       });
     </script>
-    <div id="content"></div>
   </body>
 </html>
 ```
@@ -166,14 +173,18 @@ You can also load the all-in-one bundle file and wasm modules from [jsdelivr](ht
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Svg Document</title>
-  </head>
-  <body>
     <script
       type="module"
       src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"
       id="typst"
     ></script>
+  </head>
+  <body>
+    <textarea id="input" style="width: 100%"></textarea>
+    <div id="content"></div>
     <script>
+      const input = document.getElementById('input');
+      input.value = 'Hello, Typst!';
       document.getElementById('typst').addEventListener('load', function () {
         $typst.setCompilerInitOptions({
           getModule: () =>
@@ -183,14 +194,18 @@ You can also load the all-in-one bundle file and wasm modules from [jsdelivr](ht
           getModule: () =>
             'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
         });
-        $typst.svg({ mainContent: 'Hello, World!' }).then(svg => {
-          console.log(`rendered! SvgElement { len: ${svg.length} }`);
-          // append svg text
-          document.getElementById('content').innerHTML = svg;
-        });
+
+        const compile = function (mainContent) {
+          $typst.svg({ mainContent }).then(svg => {
+            console.log(`rendered! SvgElement { len: ${svg.length} }`);
+            // append svg text
+            document.getElementById('content').innerHTML = svg;
+          });
+        };
+        input.oninput = () => compile(input.value);
+        compile(input.value);
       });
     </script>
-    <div id="content"></div>
   </body>
 </html>
 ```
diff --git a/github-pages/index.html b/github-pages/index.html
index c622c5d2..3609c55c 100644
--- a/github-pages/index.html
+++ b/github-pages/index.html
@@ -28,6 +28,9 @@
         <li style="padding: 10px 40px">
           <a href="/typst.ts/">Typst.ts</a>
         </li>
+        <li style="padding: 10px 40px">
+          <a href="/typst.ts/preview.html">Preview Demo</a>
+        </li>
         <li style="padding: 10px 40px">
           <a href="/typst.ts/">Packages</a>
         </li>
diff --git a/github-pages/preview.html b/github-pages/preview.html
new file mode 100644
index 00000000..e7ce4567
--- /dev/null
+++ b/github-pages/preview.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svg Document</title>
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"
+      id="typst"
+    ></script>
+  </head>
+  <body>
+    <textarea id="input" style="width: 100%"></textarea>
+    <div id="content"></div>
+    <script>
+      const input = document.getElementById('input');
+      input.value = 'Hello, Typst!';
+      document.getElementById('typst').addEventListener('load', function () {
+        $typst.setCompilerInitOptions({
+          getModule: () =>
+            'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-web-compiler/pkg/typst_ts_web_compiler_bg.wasm',
+        });
+        $typst.setRendererInitOptions({
+          getModule: () =>
+            'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
+        });
+
+        const compile = function (mainContent) {
+          $typst.svg({ mainContent }).then(svg => {
+            console.log(`rendered! SvgElement { len: ${svg.length} }`);
+            // append svg text
+            document.getElementById('content').innerHTML = svg;
+          });
+        };
+        input.oninput = () => compile(input.value);
+        compile(input.value);
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/typst.ts/examples/cdn.html b/packages/typst.ts/examples/cdn.html
index a555a8c4..e7ce4567 100644
--- a/packages/typst.ts/examples/cdn.html
+++ b/packages/typst.ts/examples/cdn.html
@@ -4,14 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Svg Document</title>
-  </head>
-  <body>
     <script
       type="module"
       src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst.ts/dist/esm/contrib/all-in-one-lite.bundle.js"
       id="typst"
     ></script>
+  </head>
+  <body>
+    <textarea id="input" style="width: 100%"></textarea>
+    <div id="content"></div>
     <script>
+      const input = document.getElementById('input');
+      input.value = 'Hello, Typst!';
       document.getElementById('typst').addEventListener('load', function () {
         $typst.setCompilerInitOptions({
           getModule: () =>
@@ -21,13 +25,17 @@
           getModule: () =>
             'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
         });
-        $typst.svg({ mainContent: 'Hello, World!' }).then(svg => {
-          console.log(`rendered! SvgElement { len: ${svg.length} }`);
-          // append svg text
-          document.getElementById('content').innerHTML = svg;
-        });
+
+        const compile = function (mainContent) {
+          $typst.svg({ mainContent }).then(svg => {
+            console.log(`rendered! SvgElement { len: ${svg.length} }`);
+            // append svg text
+            document.getElementById('content').innerHTML = svg;
+          });
+        };
+        input.oninput = () => compile(input.value);
+        compile(input.value);
       });
     </script>
-    <div id="content"></div>
   </body>
 </html>
