diff --git a/docs/custom_theme/main.html b/docs/custom_theme/main.html
index fbbfd659ab..b87addcdd5 100644
--- a/docs/custom_theme/main.html
+++ b/docs/custom_theme/main.html
@@ -30,4 +30,23 @@
 
 </style>
 
+<script lang="js">
+window.onload = async (event) => {
+  const demos = document.querySelectorAll(".textual-web-demo");
+
+  if (demos.length){
+    await fetch("https://textual-web-demos.fly.dev/health-check/", {
+      method: 'GET',
+      mode: 'no-cors'
+    });
+    demos.forEach((element)=>{
+      const app = element.dataset.app;
+      const iframe_html = `<div class="textual-web-demo"><iframe width="100%" onload="this.parentElement.classList.add('-loaded');" src="https://textual-web.io/textualize/${app}?delay=y&fontsize=12&ping=https://textual-web-demos.fly.dev/health-check/"></iframe></div>`;
+      element.outerHTML = iframe_html;
+    });
+  }
+}
+
+</script>
+
 {% endblock %}
diff --git a/docs/guide/widgets.md b/docs/guide/widgets.md
index f568f09b2a..d699546063 100644
--- a/docs/guide/widgets.md
+++ b/docs/guide/widgets.md
@@ -535,6 +535,10 @@ Here's a sketch of what the app should ultimately look like:
 
 There are three types of built-in widget in the sketch, namely ([Input](../widgets/input.md), [Label](../widgets/label.md), and [Switch](../widgets/switch.md)). Rather than manage these as a single collection of widgets, we can arrange them in to logical groups with compound widgets. This will make our app easier to work with.
 
+??? textualize "Try in Textual-web"
+
+    <div class="textual-web-demo" data-app="byte03"></div>
+
 ###  Identifying components
 
 We will divide this UI into three compound widgets:
diff --git a/docs/how-to/design-a-layout.md b/docs/how-to/design-a-layout.md
index b9f17c51c7..80c82c9d7e 100644
--- a/docs/how-to/design-a-layout.md
+++ b/docs/how-to/design-a-layout.md
@@ -27,6 +27,11 @@ Here's our sketch:
 It's rough, but it's all we need.
 
 
+??? textualize "Try in Textual-web"
+
+    <div class="textual-web-demo" data-app="layout06"></div>
+
+
 ## Tip 2. Work outside in
 
 Like a sculpture with a block of marble, it is best to work from the outside towards the center.
diff --git a/docs/images/icons/textualize-logo.svg b/docs/images/icons/textualize-logo.svg
new file mode 100644
index 0000000000..b22765adb8
--- /dev/null
+++ b/docs/images/icons/textualize-logo.svg
@@ -0,0 +1,3 @@
+<svg width="2933" height="2261" viewBox="0 0 2933 2261" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2927.81 0H1677.1L1312.35 205.173H306.689L0.359375 434.921L204.029 893.177H735.972L644.784 2261H1060.36L1441.72 1974.97L2073.92 688.003H2334.4L2717.9 472.286L2927.81 0ZM1245.82 410.347L1276.32 277.656H330.85L153.929 410.347H1245.82ZM1229.16 482.83H100.972L251.134 820.694H813.449L722.26 2188.52H837.043L1229.16 482.83ZM1350.7 277.656L911.417 2188.52H1023.87L1662.19 615.52H2301.36L2451.52 277.656H1350.7ZM1460.19 205.173H2497.79L2733.69 72.4829H1696.09L1460.19 205.173Z" fill="white"/>
+</svg>
diff --git a/docs/index.md b/docs/index.md
index 0c03a8cfd9..1c06781407 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -24,7 +24,7 @@ Welcome to the [Textual](https://github.com/Textualize/textual) framework docume
 Textual is a *Rapid Application Development* framework for Python, built by [Textualize.io](https://www.textualize.io).
 
 
-Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal *or* a web browser (with [textual-web](https://github.com/Textualize/textual-web))!
+Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal *or* a [web browser](https://github.com/Textualize/textual-web)!
 
 
 
diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css
index ee10d06544..171dd9f8b9 100644
--- a/docs/stylesheets/custom.css
+++ b/docs/stylesheets/custom.css
@@ -72,3 +72,45 @@ td code {
   opacity: 0.85;
 
 }
+
+.textual-web-demo iframe {
+  border: none;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  margin: 0;
+}
+
+
+.textual-web-demo {
+  display: flex;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  transition: 0.3s opacity;
+}
+
+.textual-web-demo.-loaded {
+  opacity: 1.0;
+  transition: 0.3s opacity;
+}
+
+:root {
+  --md-admonition-icon--textualize: url('/images/icons/textualize-logo.svg')
+}
+.md-typeset .admonition.textualize,
+.md-typeset details.textualize {
+  border-color: rgb(43, 155, 70);
+}
+.md-typeset .textualize > .admonition-title,
+.md-typeset .textualize > summary {
+  background-color: rgba(43, 155, 70, 0.1);
+}
+.md-typeset .textualize > .admonition-title::before,
+.md-typeset .textualize > summary::before {
+  background-color: rgb(43, 155, 70);
+  -webkit-mask-image: var(--md-admonition-icon--textualize);
+          mask-image: var(--md-admonition-icon--textualize);
+}
diff --git a/docs/tutorial.md b/docs/tutorial.md
index 6c875aa059..e9311dfe88 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -31,6 +31,18 @@ Here's what the finished app will look like:
 ```{.textual path="docs/examples/tutorial/stopwatch.py" title="stopwatch.py" press="tab,enter,tab,enter,tab,enter,tab,enter"}
 ```
 
+### Try it out!
+
+The following is *not* a screenshot, but a fully interactive Textual app running in your browser.
+
+
+!!! textualize "Try in Textual-web"
+
+    <div class="textual-web-demo" data-app="tutorial"></div>
+
+See [textual-web](https://github.com/Textualize/textual-web) if you are interested in publishing your apps on the web.
+
+
 ### Get the code
 
 If you want to try the finished Stopwatch app and follow along with the code, first make sure you have [Textual installed](getting_started.md) then check out the [Textual](https://github.com/Textualize/textual) repository:
diff --git a/mkdocs-common.yml b/mkdocs-common.yml
index 50c574073d..a69cfc5cf4 100644
--- a/mkdocs-common.yml
+++ b/mkdocs-common.yml
@@ -34,6 +34,7 @@ markdown_extensions:
       alternate_style: true
   - pymdownx.snippets
   - markdown.extensions.attr_list
+  - pymdownx.details
 
 theme:
   name: material