diff --git a/docs/shuttle.md b/docs/shuttle.md
new file mode 100644
index 0000000..0518f32
--- /dev/null
+++ b/docs/shuttle.md
@@ -0,0 +1,43 @@
+---
+title: Hosting on Shuttle
+---
+
+import CodeBlock from '@site/src/components/code_block.js';
+
+# Hosting on Shuttle
+
+<img width="300" src="https://raw.githubusercontent.com/shuttle-hq/shuttle/master/assets/logo-rectangle-transparent.png"/>
+
+> [**Shuttle**](https://www.shuttle.rs) is a Rust-native cloud development platform that lets you deploy your Rust apps for free.
+
+Shuttle has out-of-the-box support for Actix Web. Follow these steps to host your web service on Shuttle:
+
+1. Add Shuttle dependencies to `Cargo.toml`:
+
+<CodeBlock example="shuttle" file="manifest" section="shuttle-deps" language="toml" />
+
+2. Add the `#[shuttle_runtime::main]` annotation and update the `main` function as follows:
+
+<CodeBlock example="shuttle" section="shuttle-hello-world" />
+
+3. Install `cargo-shuttle`:
+
+```sh
+cargo install cargo-shuttle
+```
+
+4. Create your project on the Shuttle platform:
+
+```sh
+cargo shuttle project start
+```
+
+5. Deploy! 🚀
+
+```sh
+cargo shuttle deploy
+```
+
+You can run `cargo shuttle run` to test your application locally.
+
+Check out some complete Actix Web examples [here](https://github.com/shuttle-hq/shuttle-examples/tree/main/actix-web).
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
index 389cba0..eba3610 100644
--- a/examples/Cargo.toml
+++ b/examples/Cargo.toml
@@ -19,6 +19,7 @@ members = [
   "responder-trait",
   "responses",
   "server",
+  "shuttle",
   "static-files",
   "testing",
   "url-dispatch",
diff --git a/examples/shuttle/Cargo.toml b/examples/shuttle/Cargo.toml
new file mode 100644
index 0000000..2d1d43e
--- /dev/null
+++ b/examples/shuttle/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "shuttle"
+version = "1.0.0"
+edition = "2021"
+
+# <shuttle-deps>
+[dependencies]
+actix-web = "4"
+shuttle-actix-web = "0.30"
+shuttle-runtime = "0.30"
+tokio = "1"
+# </shuttle-deps>
diff --git a/examples/shuttle/src/main.rs b/examples/shuttle/src/main.rs
new file mode 100644
index 0000000..b99d0d4
--- /dev/null
+++ b/examples/shuttle/src/main.rs
@@ -0,0 +1,19 @@
+#[get("/")]
+async fn hello_world() -> impl actix_web::Responder {
+    "hello world"
+}
+
+// <shuttle-hello-world>
+use actix_web::{get, web::ServiceConfig};
+use shuttle_actix_web::ShuttleActixWeb;
+
+#[shuttle_runtime::main]
+async fn main() -> ShuttleActixWeb<impl FnOnce(&mut ServiceConfig) + Send + Clone + 'static> {
+    let config = move |cfg: &mut ServiceConfig| {
+        // set up your service here, e.g.:
+        cfg.service(hello_world);
+    };
+
+    Ok(config.into())
+}
+// </shuttle-hello-world>
diff --git a/sidebars.js b/sidebars.js
index 3e4fbdb..c101ab9 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -18,7 +18,7 @@ module.exports = {
       'static-files',
     ],
     Protocols: ['websockets', 'http2'],
-    Patterns: ['autoreload', 'databases'],
+    Patterns: ['autoreload', 'databases', 'shuttle'],
     Diagrams: ['http_server_init', 'conn_lifecycle'],
     Actix: [
       'actix/sec-0-quick-start',
diff --git a/src/components/code_block.js b/src/components/code_block.js
index 32eacf6..06ff908 100644
--- a/src/components/code_block.js
+++ b/src/components/code_block.js
@@ -1,27 +1,37 @@
 import React, { useState, useEffect } from 'react';
 import RenderCodeBlock from '@theme/CodeBlock';
 
-const CodeBlock = ({ example, file, section }) => {
-    const [code, setCode] = useState("");
+const CodeBlock = ({ example, file, section, language }) => {
+  const [code, setCode] = useState('');
 
-    useEffect(() => {
-        let isMounted = true; 
-        import(`!!raw-loader!@site/examples/${example}/src/${file || "main.rs"}`)
-            .then(source => {
-                source = source
-                    .default
-                    .match(new RegExp(`\/\/ <${section}>\n([\\s\\S]*)\/\/ <\/${section}>`))[1];
-                if (isMounted) setCode(source)
-            })
-            .catch(err => console.log(err));
-        return () => {
-            isMounted = false;
-        }
-    }, [])
+  useEffect(() => {
+    let isMounted = true;
 
-    return (
-        <RenderCodeBlock className="language-rust">{code}</RenderCodeBlock>
-    )
-}
+    const path =
+      file === 'manifest' ? 'Cargo.toml' : `src/${file ?? 'main.rs'}`;
+
+    import(`!!raw-loader!@site/examples/${example}/${path}`)
+      .then((source) => {
+        source = source.default.match(
+          new RegExp(
+            `(?:\/\/|#) <${section}>\n([\\s\\S]*)(?:\/\/|#) <\/${section}>`
+          )
+        )[1];
+
+        if (isMounted) setCode(source);
+      })
+      .catch((err) => console.log(err));
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  return (
+    <RenderCodeBlock className={`language-${language ?? 'rust'}`}>
+      {code}
+    </RenderCodeBlock>
+  );
+};
 
 export default CodeBlock;
diff --git a/vars.js b/vars.js
index 7183b0f..6ef5fe4 100644
--- a/vars.js
+++ b/vars.js
@@ -1,4 +1,5 @@
 module.exports = {
   rustVersion: '1.59',
   actixWebMajorVersion: '4',
+  tokioMajorVersion: '1',
 };