diff --git a/README.md b/README.md
index 1f4bd9f5..033e8761 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ Installed 2 template(s)
 Once the templates are installed, a new TypeScript project can be instantiated using:
 
 ```bash
-spin new http-ts hello_world --accept-defaults
+spin new -t http-ts hello_world --accept-defaults
 ```
 
 To run the created template:
@@ -73,7 +73,6 @@ spin build
 spin up
 ```
 
-
 ## Building
 
 You need to build the SDK from source to use it.
@@ -90,7 +89,7 @@ You need to build the SDK from source to use it.
 
 #### Setup SDK
 ```bash
-npm install --prefix crates/spin-js-engine/src/js_sdk 
+npm install --prefix crates/spin-js-engine/src/js_sdk
 make
 ```
 
@@ -98,4 +97,8 @@ The build produces the `spinjs` utility, which is used to build wasm modules fro
 
 #### Build and run the examples
 
-There are some examples provided in the `example/` directory. Each example has a readme on building and running it.
+There are some examples provided in the [examples](./examples/) directory. Each example has a readme on building and running it.
+
+Ensure you have the [latest version of Spin](https://developer.fermyon.com/spin/install) and the [js2wasm plugin](#using-the-sdk) installed.
+
+__Note__: These examples track Spin's `main` branch, so you may need to ensure you are using the [canary](https://github.com/fermyon/spin/releases/tag/canary) Spin release.
diff --git a/examples/javascript/hello_world/README.md b/examples/javascript/hello_world/README.md
index 0ed00dfc..b28a564d 100644
--- a/examples/javascript/hello_world/README.md
+++ b/examples/javascript/hello_world/README.md
@@ -5,13 +5,14 @@ This is the simplest example of using the Javascript SDK.
 ### Building the example
 
 ```console
+npm install
 spin build
 ```
 
 ### Running the example
 
 ```console
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/javascript/hello_world/spin.toml b/examples/javascript/hello_world/spin.toml
index 8c0a0a86..1f35a5b5 100644
--- a/examples/javascript/hello_world/spin.toml
+++ b/examples/javascript/hello_world/spin.toml
@@ -1,13 +1,15 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
 name = "spin-http-js"
-trigger = { type = "http", base = "/" }
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-http-js.wasm"
+[component.hello.build]
 command = "npm install && npm run build"
diff --git a/examples/javascript/http-router/README.md b/examples/javascript/http-router/README.md
index c40ced83..64579a3a 100644
--- a/examples/javascript/http-router/README.md
+++ b/examples/javascript/http-router/README.md
@@ -12,4 +12,6 @@ The app exposes the following endpoints:
 
 ## Build and run the app locally
 
+First, install npm dependencies with `npm install`.
+
 To build and run the app locally, you can either use `spin build` and `spin up` or combine both commands and simply run `spin build --up`.
diff --git a/examples/javascript/http-router/spin.toml b/examples/javascript/http-router/spin.toml
index 2a3ddcef..c6572380 100644
--- a/examples/javascript/http-router/spin.toml
+++ b/examples/javascript/http-router/spin.toml
@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Thorsten Hans <thorsten.hans@gmail.com>"]
 description = "Sample to demonstrate the usage of the HTTP router"
 name = "http-router"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "http-router"
+[[trigger.http]]
+route = "/..."
+component = "http-router"
+
+[component.http-router]
 source = "target/http-router.wasm"
 exclude_files = ["**/node_modules"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.http-router.build]
 command = "npm run build"
diff --git a/examples/javascript/kv/README.md b/examples/javascript/kv/README.md
index 05a6dca0..0f396602 100644
--- a/examples/javascript/kv/README.md
+++ b/examples/javascript/kv/README.md
@@ -15,4 +15,6 @@ The app leverages the `default` key-value store as specified in `spin.toml`.
 
 ## Build and run the app locally
 
+First, install npm dependencies with `npm install`.
+
 To build and run the app locally, you can either use `spin build` and `spin up` or combine both commands and simply run `spin build --up`.
diff --git a/examples/javascript/kv/spin.toml b/examples/javascript/kv/spin.toml
index 62fb28a7..20e467ee 100644
--- a/examples/javascript/kv/spin.toml
+++ b/examples/javascript/kv/spin.toml
@@ -1,16 +1,18 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Thorsten Hans <thorsten.hans@gmail.com>"]
 description = "Demonstrates how to use key-value store APIs in JS"
 name = "kv"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "kv"
+[[trigger.http]]
+route = "/..."
+component = "kv"
+
+[component.kv]
 source = "target/kv.wasm"
 key_value_stores = ["default"]
 exclude_files = ["**/node_modules"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.kv.build]
 command = "npm run build"
diff --git a/examples/javascript/outbound-http/README.md b/examples/javascript/outbound-http/README.md
index accca7a6..924b5d0b 100644
--- a/examples/javascript/outbound-http/README.md
+++ b/examples/javascript/outbound-http/README.md
@@ -5,12 +5,14 @@ This example showcases utilizing fetch to request data from an API and use it in
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/javascript/outbound-http/package.json b/examples/javascript/outbound-http/package.json
index 4b307487..525ab4d1 100644
--- a/examples/javascript/outbound-http/package.json
+++ b/examples/javascript/outbound-http/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-outbound-http.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/examples/javascript/outbound-http/spin.toml b/examples/javascript/outbound-http/spin.toml
index df4d1dec..734231ee 100644
--- a/examples/javascript/outbound-http/spin.toml
+++ b/examples/javascript/outbound-http/spin.toml
@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-outbound-http"
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://some-random-api.ml"]
-files = ["src/index.html"]
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-outbound-http.wasm"
+allowed_http_hosts = ["random-data-api.fermyon.app"]
+files = ["src/index.js"]
+[component.hello.build]
 command = "npm run build"
\ No newline at end of file
diff --git a/examples/javascript/outbound-http/src/index.js b/examples/javascript/outbound-http/src/index.js
index f6aa646e..71d0e26e 100644
--- a/examples/javascript/outbound-http/src/index.js
+++ b/examples/javascript/outbound-http/src/index.js
@@ -2,13 +2,13 @@ const encoder = new TextEncoder("utf-8")
 const decoder = new TextDecoder("utf-8")
 
 export async function handleRequest(request) {
-    const dogFact = await fetch("https://some-random-api.ml/facts/dog")
+    const physicsFact = await fetch("https://random-data-api.fermyon.app/physics/json")
 
-    const dogFactBody = decoder.decode(await dogFact.arrayBuffer() || new Uint8Array())
+    const physicsFactBody = decoder.decode(await physicsFact.arrayBuffer() || new Uint8Array())
 
     const env = JSON.stringify(process.env)
 
-    const body = `Here's a dog fact: ${dogFactBody}\n`
+    const body = `Here's a physics fact: ${physicsFactBody}\n`
 
     return {
         status: 200,
diff --git a/examples/javascript/planetscale/README.md b/examples/javascript/planetscale/README.md
index 883ab506..641217bf 100644
--- a/examples/javascript/planetscale/README.md
+++ b/examples/javascript/planetscale/README.md
@@ -28,13 +28,13 @@ const config = {
 
 ```
 npm install
-npm run build
+spin build
 ```
 
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/javascript/planetscale/package.json b/examples/javascript/planetscale/package.json
index 18a55efb..3f66773f 100644
--- a/examples/javascript/planetscale/package.json
+++ b/examples/javascript/planetscale/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-planetscale.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -15,7 +15,7 @@
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {
-    "@planetscale/database": "^1.4.0",
-    "@fermyon/spin-sdk": "^0.6.0"
+    "@fermyon/spin-sdk": "^0.6.0",
+    "@planetscale/database": "^1.4.0"
   }
 }
diff --git a/examples/javascript/planetscale/spin.toml b/examples/javascript/planetscale/spin.toml
index b69f657c..1c31acbb 100644
--- a/examples/javascript/planetscale/spin.toml
+++ b/examples/javascript/planetscale/spin.toml
@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-planetscale"
 version = "1.0.0"
 
-[[component]]
-id = "planetscale"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://aws.connect.psdb.cloud"]
-files = ["src/index.html"]
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "planetscale"
+
+[component.planetscale]
+source = "target/spin-planetscale.wasm"
+allowed_http_hosts = ["aws.connect.psdb.cloud"]
+files = ["src/index.js"]
+[component.planetscale.build]
 command = "npm run build"
\ No newline at end of file
diff --git a/examples/javascript/simple_ssr/README.md b/examples/javascript/simple_ssr/README.md
index 8e005f3d..26cf5630 100644
--- a/examples/javascript/simple_ssr/README.md
+++ b/examples/javascript/simple_ssr/README.md
@@ -3,15 +3,16 @@
 This example demonstrates server side rendering with react.
 
 ### Building the example
+
 ```
 npm install
-npm run build
+spin build
 ```
 
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/javascript/simple_ssr/package.json b/examples/javascript/simple_ssr/package.json
index f78bd1ba..e8ca9319 100644
--- a/examples/javascript/simple_ssr/package.json
+++ b/examples/javascript/simple_ssr/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "private": true,
   "scripts": {
-    "build": "npm run build:client && npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npm run build:client && npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-simple-ssr.wasm dist/spin.js",
     "build:client": "esbuild src/client/index.js --bundle --outfile=dist/static/bundle.js --loader:.js=jsx",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/examples/javascript/simple_ssr/spin.toml b/examples/javascript/simple_ssr/spin.toml
index abf63c7f..2ba98046 100644
--- a/examples/javascript/simple_ssr/spin.toml
+++ b/examples/javascript/simple_ssr/spin.toml
@@ -1,23 +1,24 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-simple-ssr"
 version = "1.0.0"
 
+[[trigger.http]]
+route = "/hello"
+component = "SSR"
+
+[[trigger.http]]
+route = "/static/..."
+component = "fileserver"
 
-[[component]]
-id = "SSR"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://some-random-api.ml"]
+[component.SSR]
+source = "target/spin-simple-ssr.wasm"
 files = [{source = "src/public", destination = "/"} ]
-[component.trigger]
-route = "/hello"
-[component.build]
+[component.SSR.build]
 command = "npm run build"
 
-[[component]]
+[component.fileserver]
 source = "modules/spin_static_fs.wasm"
-id = "fileserver"
 files = [{ source = "dist/static", destination = "/" }, ]
-[component.trigger]
-route = "/static/..."
\ No newline at end of file
diff --git a/examples/javascript/sqlite/README.md b/examples/javascript/sqlite/README.md
index 286dc3e0..43faee50 100644
--- a/examples/javascript/sqlite/README.md
+++ b/examples/javascript/sqlite/README.md
@@ -7,5 +7,6 @@ This is a simple showcase of the SQLite feature in the Spin JS SDK.
 Run the following:
 
 ```bash
-spin build -u --sqlite @migration.sql
+npm install
+spin build --up --sqlite @migration.sql
 ```
\ No newline at end of file
diff --git a/examples/javascript/sqlite/spin.toml b/examples/javascript/sqlite/spin.toml
index f0a4587f..40002783 100644
--- a/examples/javascript/sqlite/spin.toml
+++ b/examples/javascript/sqlite/spin.toml
@@ -1,16 +1,18 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Ryan Levick <ryan.levick@fermyon.com>"]
 description = ""
 name = "sqlite"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "sqlite"
+[[trigger.http]]
+route = "/..."
+component = "sqlite"
+
+[component.sqlite]
 source = "target/sqlite.wasm"
 exclude_files = ["**/node_modules"]
 sqlite_databases = ["default"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.sqlite.build]
 command = "npm run build"
diff --git a/examples/typescript/hello_world/README.md b/examples/typescript/hello_world/README.md
index ad1b832b..7f7eb86e 100644
--- a/examples/typescript/hello_world/README.md
+++ b/examples/typescript/hello_world/README.md
@@ -5,12 +5,14 @@ This is the simplest example of using the Javascript SDK.
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/typescript/hello_world/package.json b/examples/typescript/hello_world/package.json
index 887a21e7..8f02f5f3 100644
--- a/examples/typescript/hello_world/package.json
+++ b/examples/typescript/hello_world/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-ts.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/examples/typescript/hello_world/spin.toml b/examples/typescript/hello_world/spin.toml
index bea1fdeb..bb448c83 100644
--- a/examples/typescript/hello_world/spin.toml
+++ b/examples/typescript/hello_world/spin.toml
@@ -1,13 +1,15 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-http-ts"
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-http-ts.wasm"
+[component.hello.build]
 command = "npm run build"
diff --git a/examples/typescript/http-router/README.md b/examples/typescript/http-router/README.md
index 8623a728..75675f62 100644
--- a/examples/typescript/http-router/README.md
+++ b/examples/typescript/http-router/README.md
@@ -12,4 +12,6 @@ The app exposes the following endpoints:
 
 ## Build and run the app locally
 
+First, install npm dependencies with `npm install`.
+
 To build and run the app locally, you can either use `spin build` and `spin up` or combine both commands and simply run `spin build --up`.
diff --git a/examples/typescript/http-router/package.json b/examples/typescript/http-router/package.json
index ca02095b..d59e7369 100644
--- a/examples/typescript/http-router/package.json
+++ b/examples/typescript/http-router/package.json
@@ -1,7 +1,7 @@
 {
   "name": "http-router",
   "version": "1.0.0",
-  "description": "Sample to demonstrate the usage of theHTTP router",
+  "description": "Sample to demonstrate the usage of the HTTP router",
   "main": "index.js",
   "scripts": {
     "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/http-router.wasm dist/spin.js",
diff --git a/examples/typescript/http-router/spin.toml b/examples/typescript/http-router/spin.toml
index 7dfd9f61..c6572380 100644
--- a/examples/typescript/http-router/spin.toml
+++ b/examples/typescript/http-router/spin.toml
@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Thorsten Hans <thorsten.hans@gmail.com>"]
-description = "Sample to demonstrate the usage of theHTTP router"
+description = "Sample to demonstrate the usage of the HTTP router"
 name = "http-router"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "http-router"
+[[trigger.http]]
+route = "/..."
+component = "http-router"
+
+[component.http-router]
 source = "target/http-router.wasm"
 exclude_files = ["**/node_modules"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.http-router.build]
 command = "npm run build"
diff --git a/examples/typescript/outbound_http/README.md b/examples/typescript/outbound_http/README.md
index ad1b832b..924b5d0b 100644
--- a/examples/typescript/outbound_http/README.md
+++ b/examples/typescript/outbound_http/README.md
@@ -1,16 +1,18 @@
-## Hello World 
+## Outbound HTTP example
 
-This is the simplest example of using the Javascript SDK.
+This example showcases utilizing fetch to request data from an API and use it in the script.
 
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/typescript/outbound_http/package.json b/examples/typescript/outbound_http/package.json
index 5f025fe3..b244ea2f 100644
--- a/examples/typescript/outbound_http/package.json
+++ b/examples/typescript/outbound_http/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-outbound-http.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/examples/typescript/outbound_http/spin.toml b/examples/typescript/outbound_http/spin.toml
index cec75033..222e5c2e 100644
--- a/examples/typescript/outbound_http/spin.toml
+++ b/examples/typescript/outbound_http/spin.toml
@@ -1,19 +1,21 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-outbound-http"
 version = "1.0.0"
 
 [variables]
 object = { default = "teapot" }
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://some-random-api.ml"]
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.config]
+component = "hello"
+
+[component.hello]
+source = "target/spin-outbound-http.wasm"
+allowed_http_hosts = ["random-data-api.fermyon.app"]
+[component.hello.variables]
 message = "I'm a {{object}}"
-[component.build]
+[component.hello.build]
 command = "npm run build"
diff --git a/examples/typescript/outbound_http/src/index.ts b/examples/typescript/outbound_http/src/index.ts
index 4e6fae19..887dba6f 100644
--- a/examples/typescript/outbound_http/src/index.ts
+++ b/examples/typescript/outbound_http/src/index.ts
@@ -5,13 +5,13 @@ const decoder = new TextDecoder()
 
 export const handleRequest: HandleRequest = async function (request: HttpRequest): Promise<HttpResponse> {
 
-    const dogFact = await fetch("https://some-random-api.ml/facts/dog")
+    const physicsFact = await fetch("https://random-data-api.fermyon.app/physics/json")
 
-    const dogFactBody = await dogFact.text()
+    const physicsFactBody = await physicsFact.text()
 
     const env = JSON.stringify(process.env)
 
-    const body = `${Config.get("message")}\nenv: ${env}\nHere's a dog fact: ${dogFactBody}\n`
+    const body = `${Config.get("message")}\nenv: ${env}\nHere's a physics fact: ${physicsFactBody}\n`
 
     return {
         status: 200,
diff --git a/examples/typescript/outbound_mysql/README.md b/examples/typescript/outbound_mysql/README.md
index 4dd782f7..32fdf7de 100644
--- a/examples/typescript/outbound_mysql/README.md
+++ b/examples/typescript/outbound_mysql/README.md
@@ -5,8 +5,10 @@ This is the example of using the Javascript SDK to access mysql.
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
diff --git a/examples/typescript/outbound_mysql/package.json b/examples/typescript/outbound_mysql/package.json
index d4e4c773..b96b4677 100644
--- a/examples/typescript/outbound_mysql/package.json
+++ b/examples/typescript/outbound_mysql/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && ../../../target/release/spinjs -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-outbound-mysql.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/examples/typescript/outbound_mysql/spin.toml b/examples/typescript/outbound_mysql/spin.toml
index bea1fdeb..dedb412c 100644
--- a/examples/typescript/outbound_mysql/spin.toml
+++ b/examples/typescript/outbound_mysql/spin.toml
@@ -1,13 +1,16 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-outbound-mysql"
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-outbound-mysql.wasm"
+allowed_outbound_hosts = ["mysql://127.0.0.1:3306"]
+[component.hello.build]
 command = "npm run build"
diff --git a/examples/typescript/outbound_pg/README.md b/examples/typescript/outbound_pg/README.md
index 17120587..0cdf4497 100644
--- a/examples/typescript/outbound_pg/README.md
+++ b/examples/typescript/outbound_pg/README.md
@@ -5,12 +5,14 @@ This is an example of using postgresql using the JavaScript SDK.
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/typescript/outbound_pg/package.json b/examples/typescript/outbound_pg/package.json
index d4e4c773..1a7aa61e 100644
--- a/examples/typescript/outbound_pg/package.json
+++ b/examples/typescript/outbound_pg/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && ../../../target/release/spinjs -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-outbound-pg.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/examples/typescript/outbound_pg/spin.toml b/examples/typescript/outbound_pg/spin.toml
index bea1fdeb..0ddf5e69 100644
--- a/examples/typescript/outbound_pg/spin.toml
+++ b/examples/typescript/outbound_pg/spin.toml
@@ -1,13 +1,16 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-outbound-pg"
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-outbound-pg.wasm"
+allowed_outbound_hosts = ["localhost:5432"]
+[component.hello.build]
 command = "npm run build"
diff --git a/examples/typescript/outbound_pg/src/index.ts b/examples/typescript/outbound_pg/src/index.ts
index e82dcc6b..4f2e2033 100644
--- a/examples/typescript/outbound_pg/src/index.ts
+++ b/examples/typescript/outbound_pg/src/index.ts
@@ -5,7 +5,7 @@ const encoder = new TextEncoder()
 const DB_URL = "host=localhost user=postgres dbname=spin_dev"
 
 /*
- Run the following commands to setup the mysql instance:
+ Run the following commands to setup the postgres instance:
  create database spin_dev;
  \c spin_dev;
  create table test(id int, val int);
diff --git a/examples/typescript/outbound_redis/README.md b/examples/typescript/outbound_redis/README.md
index 1e865137..af86fb14 100644
--- a/examples/typescript/outbound_redis/README.md
+++ b/examples/typescript/outbound_redis/README.md
@@ -5,12 +5,14 @@ This is an example of using redis with the Javascript SDK.
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/typescript/outbound_redis/package.json b/examples/typescript/outbound_redis/package.json
index 40a7ae6e..a6c9e9ed 100644
--- a/examples/typescript/outbound_redis/package.json
+++ b/examples/typescript/outbound_redis/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-outbound-redis.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/examples/typescript/outbound_redis/spin.toml b/examples/typescript/outbound_redis/spin.toml
index 76e20c5c..a1647aa2 100644
--- a/examples/typescript/outbound_redis/spin.toml
+++ b/examples/typescript/outbound_redis/spin.toml
@@ -1,13 +1,16 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
 name = "outbound-redis"
-trigger = { type = "http", base = "/" }
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-outbound-redis.wasm"
+allowed_outbound_hosts = ["redis://localhost:6379"]
+[component.hello.build]
 command = "npm run build"
diff --git a/examples/typescript/planetscale/README.md b/examples/typescript/planetscale/README.md
index 6b443038..280ff500 100644
--- a/examples/typescript/planetscale/README.md
+++ b/examples/typescript/planetscale/README.md
@@ -1,16 +1,40 @@
-## Hello World 
+## Planetscale integration
 
-This is the simplest example of using the Javascript SDK.
+This example showcases connecting and querying planetscaleDB
+
+### Setup the example
+
+- Create an account on planetscale
+- Create a database
+- In the database's **Settings > Beta features** section, enroll the database into **PlanetScale serverless driver for JavaScript** beta.
+
+Copy the **host**, **username** and **password** from the overview page using the **Connect** button and select “@planetscale/database” from the “Connect with” dropdown. Add these credentials into the code at `src/index.ts`.
+
+```
+.
+.
+.
+const config = {
+   host: '<host>',
+   username: '<username>',
+   password: '<password>'
+}
+.
+.
+.
+```
 
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
-Use e.g. `curl -v http://127.0.0.1:3000/hello` to test that it's working.
\ No newline at end of file
+Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.
\ No newline at end of file
diff --git a/examples/typescript/planetscale/package.json b/examples/typescript/planetscale/package.json
index 4075f21b..4e499e3c 100644
--- a/examples/typescript/planetscale/package.json
+++ b/examples/typescript/planetscale/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-planetscale.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
diff --git a/examples/typescript/planetscale/spin.toml b/examples/typescript/planetscale/spin.toml
index 708a7f88..fad1b339 100644
--- a/examples/typescript/planetscale/spin.toml
+++ b/examples/typescript/planetscale/spin.toml
@@ -1,14 +1,16 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <engineering@fermyon.com>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-planetscale"
 version = "1.0.0"
 
-[[component]]
-id = "planetscale"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://aws.connect.psdb.cloud"]
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "planetscale"
+
+[component.planetscale]
+source = "target/spin-planetscale.wasm"
+allowed_http_hosts = ["aws.connect.psdb.cloud"]
+[component.planetscale.build]
 command = "npm run build"
diff --git a/examples/typescript/spin_kv/spin.toml b/examples/typescript/spin_kv/spin.toml
index d7117698..4947147b 100644
--- a/examples/typescript/spin_kv/spin.toml
+++ b/examples/typescript/spin_kv/spin.toml
@@ -1,16 +1,18 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["karthik2804 <karthik.ganeshram@fermyon.com>"]
 description = ""
 name = "spin-kv-ts"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "spin-kv"
+[[trigger.http]]
+route = "/..."
+component = "spin-kv"
+
+[component.spin-kv]
 source = "target/spin-kv.wasm"
 exclude_files = ["**/node_modules"]
 key_value_stores = ["default"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.spin-kv.build]
 command = "npm run build"
diff --git a/templates/README.md b/templates/README.md
index f9c7ed00..82f9e9b0 100644
--- a/templates/README.md
+++ b/templates/README.md
@@ -1,18 +1,3 @@
 ## Starter templates for JS and TS
 
-### Requirements
-
-It is assumed that the spinjs binary is available in path (Possibly later moved into spin plugins and therefore not required to be in the path).
-
-## Building the templates
-
-```
-npm install
-spin build
-```
-
-## Running the templates
-
-```
-spin up --follow-all
-```
\ No newline at end of file
+See [Installing the templates](../README.md#installing-the-templates) for details on how to install and run these templates.
\ No newline at end of file
diff --git a/templates/http-js/content/spin.toml b/templates/http-js/content/spin.toml
index 9ab6de97..520ec284 100644
--- a/templates/http-js/content/spin.toml
+++ b/templates/http-js/content/spin.toml
@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["{{authors}}"]
 description = "{{project-description}}"
 name = "{{project-name}}"
-trigger = { type = "http", base = "{{http-base}}" }
 version = "0.1.0"
 
-[[component]]
-id = "{{project-name | kebab_case}}"
+[[trigger.http]]
+route = "{{http-path}}"
+component = "{{project-name | kebab_case}}"
+
+[component.{{project-name | kebab_case}}]
 source = "target/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
-[component.trigger]
-route = "{{http-path}}"
-[component.build]
+[component.{{project-name | kebab_case}}.build]
 command = "npm run build"
diff --git a/templates/http-js/metadata/snippets/component.txt b/templates/http-js/metadata/snippets/component.txt
index 49735bd7..cb1c4a96 100644
--- a/templates/http-js/metadata/snippets/component.txt
+++ b/templates/http-js/metadata/snippets/component.txt
@@ -1,9 +1,10 @@
-[[component]]
-id = "{{project-name | kebab_case}}"
-source = "{{ output-path }}/target/{{project-name | kebab_case}}.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "{{http-path}}"
-[component.build]
+component = "{{project-name | kebab_case}}"
+
+[component.{{project-name | kebab_case}}]
+source = "{{ output-path }}/target/{{project-name | kebab_case}}.wasm"
+[component.{{project-name | kebab_case}}.build]
 command = "npm run build"
 workdir = "{{ output-path }}"
 
diff --git a/templates/http-js/metadata/spin-template.toml b/templates/http-js/metadata/spin-template.toml
index 0e4c06ff..98704633 100644
--- a/templates/http-js/metadata/spin-template.toml
+++ b/templates/http-js/metadata/spin-template.toml
@@ -4,11 +4,9 @@ description = "HTTP request handler using Javascript"
 
 [add_component]
 skip_files = ["spin.toml"]
-skip_parameters = ["http-base"]
 [add_component.snippets]
 component = "component.txt"
 
 [parameters]
 project-description = { type = "string",  prompt = "Description", default = "" }
-http-base = { type = "string", prompt = "HTTP base", default = "/", pattern = "^/\\S*$" }
 http-path = { type = "string", prompt = "HTTP path", default = "/...", pattern = "^/\\S*$" }
diff --git a/templates/http-ts/content/spin.toml b/templates/http-ts/content/spin.toml
index 9ab6de97..520ec284 100644
--- a/templates/http-ts/content/spin.toml
+++ b/templates/http-ts/content/spin.toml
@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["{{authors}}"]
 description = "{{project-description}}"
 name = "{{project-name}}"
-trigger = { type = "http", base = "{{http-base}}" }
 version = "0.1.0"
 
-[[component]]
-id = "{{project-name | kebab_case}}"
+[[trigger.http]]
+route = "{{http-path}}"
+component = "{{project-name | kebab_case}}"
+
+[component.{{project-name | kebab_case}}]
 source = "target/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
-[component.trigger]
-route = "{{http-path}}"
-[component.build]
+[component.{{project-name | kebab_case}}.build]
 command = "npm run build"
diff --git a/templates/http-ts/metadata/snippets/component.txt b/templates/http-ts/metadata/snippets/component.txt
index 49735bd7..cb1c4a96 100644
--- a/templates/http-ts/metadata/snippets/component.txt
+++ b/templates/http-ts/metadata/snippets/component.txt
@@ -1,9 +1,10 @@
-[[component]]
-id = "{{project-name | kebab_case}}"
-source = "{{ output-path }}/target/{{project-name | kebab_case}}.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "{{http-path}}"
-[component.build]
+component = "{{project-name | kebab_case}}"
+
+[component.{{project-name | kebab_case}}]
+source = "{{ output-path }}/target/{{project-name | kebab_case}}.wasm"
+[component.{{project-name | kebab_case}}.build]
 command = "npm run build"
 workdir = "{{ output-path }}"
 
diff --git a/templates/http-ts/metadata/spin-template.toml b/templates/http-ts/metadata/spin-template.toml
index 1b3da6f8..70ec2269 100644
--- a/templates/http-ts/metadata/spin-template.toml
+++ b/templates/http-ts/metadata/spin-template.toml
@@ -4,11 +4,9 @@ description = "HTTP request handler using Typescript"
 
 [add_component]
 skip_files = ["spin.toml"]
-skip_parameters = ["http-base"]
 [add_component.snippets]
 component = "component.txt"
 
 [parameters]
 project-description = { type = "string",  prompt = "Description", default = "" }
-http-base = { type = "string", prompt = "HTTP base", default = "/", pattern = "^/\\S*$" }
 http-path = { type = "string", prompt = "HTTP path", default = "/...", pattern = "^/\\S*$" }
diff --git a/test/test-app/spin.toml b/test/test-app/spin.toml
index 114d6768..e7754dc2 100644
--- a/test/test-app/spin.toml
+++ b/test/test-app/spin.toml
@@ -1,17 +1,19 @@
-spin_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["karthik Ganeshram <karthik.ganeshram@fermyon.com>"]
 description = "App that exercises the functionality of the SDK"
 name = "test-app"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "test-app"
+[[trigger.http]]
+route = "/..."
+component = "test-app"
+
+[component.test-app]
 source = "target/spin-http-js.wasm"
 files = [{ source = "src/", destination = "/" }, ]
 allowed_http_hosts = ["http://localhost:3000"]
 sqlite_databases = ["default"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.test-app.build]
 command = "npm run build"