11 files changed, 31 insertions, 31 deletions
diff --git a/examples/blog/src/pages/posts/introducing-astro.md b/examples/blog/src/pages/posts/introducing-astro.md
index 3f30087a1..293b3b8f9 100644
--- a/examples/blog/src/pages/posts/introducing-astro.md
+++ b/examples/blog/src/pages/posts/introducing-astro.md
@@ -54,7 +54,7 @@ Of course, sometimes client-side JavaScript is inevitable. Image carousels, shop
 
 In other full-stack web frameworks this level of per-component optimization would be impossible without loading the entire page in JavaScript, delaying interactivity. In Astro, this kind of [partial hydration](https://addyosmani.com/blog/rehydration/) is built into the tool itself.
 
-You can even [automatically defer components](https://codepen.io/jonneal/full/ZELvMvw) to only load once they become visible on the page with the `:visible` modifier.
+You can even [automatically defer components](https://codepen.io/jonneal/full/ZELvMvw) to only load once they become visible on the page with the `client:visible` directive.
 
 This new approach to web architecture is called [islands architecture](https://jasonformat.com/islands-architecture/). We didn't coin the term, but Astro may have perfected the technique. We are confident that an HTML-first, JavaScript-only-as-needed approach is the best solution for the majority of content-based websites.
 
diff --git a/examples/docs/src/layouts/Main.astro b/examples/docs/src/layouts/Main.astro
index a92ffaff4..dbfc90791 100644
--- a/examples/docs/src/layouts/Main.astro
+++ b/examples/docs/src/layouts/Main.astro
@@ -212,7 +212,7 @@ const githubEditUrl = `https://github.com/USER/REPO/blob/main/${currentFile}`
           <div />
 
           <div>
-            <ThemeToggle:idle />
+            <ThemeToggle client:idle />
           </div>
         </div>
       </nav>
@@ -232,7 +232,7 @@ const githubEditUrl = `https://github.com/USER/REPO/blob/main/${currentFile}`
         </article>
       </div>
       <aside class="sidebar" id="sidebar-content">
-        <DocSidebar:idle headers={headers} editHref={editHref} />
+        <DocSidebar client:idle headers={headers} editHref={editHref} />
       </aside>
     </main>
   </body>
diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro
index a2f15764e..826a9d5f9 100644
--- a/examples/framework-multiple/src/pages/index.astro
+++ b/examples/framework-multiple/src/pages/index.astro
@@ -35,22 +35,22 @@ import SvelteCounter from '../components/SvelteCounter.svelte';
   <body>
       <main>
 
-        <react.Counter:visible>
+        <react.Counter client:visible>
             <h1>Hello React!</h1>
             <p>What's up?</p>
-        </react.Counter:visible>
+        </react.Counter>
 
-        <PreactCounter:visible>
+        <PreactCounter client:visible>
           <h1>Hello Preact!</h1>
-        </PreactCounter:visible>
+        </PreactCounter>
 
-        <VueCounter:visible>
+        <VueCounter client:visible>
             <h1>Hello Vue!</h1>
-        </VueCounter:visible>
+        </VueCounter>
 
-        <SvelteCounter:visible>
+        <SvelteCounter client:visible>
             <h1>Hello Svelte!</h1>
-        </SvelteCounter:visible>
+        </SvelteCounter>
 
         <A />
         
diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro
index 8cdccf783..c370d7298 100644
--- a/examples/framework-preact/src/pages/index.astro
+++ b/examples/framework-preact/src/pages/index.astro
@@ -33,9 +33,9 @@ import Counter from '../components/Counter.jsx'
   </head>
   <body>
     <main>
-      <Counter:visible>
+      <Counter client:visible>
         <h1>Hello Preact!</h1>
-      </Counter:visible>
+      </Counter>
     </main>
   </body>
 </html>
diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro
index 69b9c6d44..a62427dd9 100644
--- a/examples/framework-react/src/pages/index.astro
+++ b/examples/framework-react/src/pages/index.astro
@@ -33,9 +33,9 @@ import Counter from '../components/Counter.jsx'
   </head>
   <body>
     <main>
-      <Counter:visible>
+      <Counter client:visible>
         <h1>Hello React!</h1>
-      </Counter:visible>
+      </Counter>
     </main>
   </body>
 </html>
diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro
index b89e12b4a..15d93bbaa 100644
--- a/examples/framework-svelte/src/pages/index.astro
+++ b/examples/framework-svelte/src/pages/index.astro
@@ -33,9 +33,9 @@ import Counter from '../components/Counter.svelte'
   </head>
   <body>
     <main>
-      <Counter:visible>
+      <Counter client:visible>
         <h1>Hello Svelte!</h1>
-      </Counter:visible>
+      </Counter>
     </main>
   </body>
 </html>
diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro
index 1ce7919bd..2dcc11da6 100644
--- a/examples/framework-vue/src/pages/index.astro
+++ b/examples/framework-vue/src/pages/index.astro
@@ -33,9 +33,9 @@ import Counter from '../components/Counter.vue'
   </head>
   <body>
     <main>
-      <Counter:visible>
+      <Counter client:visible>
         <h1>Hello Vue!</h1>
-      </Counter:visible>
+      </Counter>
     </main>
   </body>
 </html>
diff --git a/examples/snowpack/src/pages/news.astro b/examples/snowpack/src/pages/news.astro
index bae3e5ad7..f51631d28 100644
--- a/examples/snowpack/src/pages/news.astro
+++ b/examples/snowpack/src/pages/news.astro
@@ -48,7 +48,7 @@ const description = 'Snowpack community news and companies that use Snowpack.';
           working on!</div>
       </article>
 
-      {news.reverse().map((item: any) => <Card:idle item={item} />)}
+      {news.reverse().map((item: any) => <Card client:idle item={item} />)}
     </div>
 
     <div class="content">
diff --git a/examples/snowpack/src/pages/plugins.astro b/examples/snowpack/src/pages/plugins.astro
index ddd7632e8..ce70f4cac 100644
--- a/examples/snowpack/src/pages/plugins.astro
+++ b/examples/snowpack/src/pages/plugins.astro
@@ -68,7 +68,7 @@ let description = 'Snowpack plugins allow for configuration-minimal tooling inte
 
     <div style="margin-top:4rem;"></div>
 
-    <PluginSearchPage:load />
+    <PluginSearchPage client:load />
   </MainLayout>
 </body>
 
diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro
index 6e402fb1c..b6843f3a5 100644
--- a/examples/with-markdown/src/pages/index.astro
+++ b/examples/with-markdown/src/pages/index.astro
@@ -32,10 +32,10 @@ const items = ['A', 'B', 'C'];
 
     ## Embed framework components
 
-    <ReactCounter:visible />
-    <PreactCounter:visible />
-    <VueCounter:visible />
-    <SvelteCounter:visible />
+    <ReactCounter client:visible />
+    <PreactCounter client:visible />
+    <VueCounter client:visible />
+    <SvelteCounter client:visible />
 
     ## Use Expressions
 
@@ -43,11 +43,11 @@ const items = ['A', 'B', 'C'];
 
     ## Oh yeah...
 
-    <ReactCounter:visible>
+    <ReactCounter client:visible>
       🤯 It's also _recursive_!
 
       ### Markdown can be embedded in any child component
-    </ReactCounter:visible>
+    </ReactCounter>
 
     ## Code
 
diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro
index a40897232..a3f0c7c8c 100644
--- a/examples/with-nanostores/src/pages/index.astro
+++ b/examples/with-nanostores/src/pages/index.astro
@@ -37,10 +37,10 @@ import AdminsPreact from '../components/AdminsPreact.jsx';
                 <a href="https://github.com/nanostores/nanostores">nanostores</a></h1>
             </div>
         </header>
-        <AdminsReact:load />
-        <AdminsSvelte:load />
-        <AdminsVue:load />
-        <AdminsPreact:load />
+        <AdminsReact client:load />
+        <AdminsSvelte client:load />
+        <AdminsVue client:load />
+        <AdminsPreact client:load />
     </main>
 </body>
 </html>