add runtimes and more updates

app.ts

@@ -0,0 +1,13 @@
+import { createApp, createRouter, eventHandler } from "h3";
+
+export const app = createApp();
+
+const router = createRouter();
+app.use(router);
+
+router.get(
+  "/",
+  eventHandler((event) => {
+    return { message: "⚡️ Tadaa!" };
+  }),
+);

docs/content/1.getting-started/1.index.md

@@ -1,10 +1,64 @@
 ---
-title: Introduction
-description: Welcome to H3 Docs
+title: Quick start
+description:
 ---
 
-H3 (pronounced as /eɪtʃθriː/, like h-3) is a minimal h(ttp) framework built for high performance and portability.
+Getting started with H3 is super simple and requires no dependencies or template! In this example we will create a Hello World application using h3 router.
 
-👉 [Online Playground](https://stackblitz.com/github/unjs/h3/tree/main/playground)
+First create an `app.ts` file:
 
-👉 [Online Examples Playground](https://stackblitz.com/github/unjs/h3/tree/main/examples)
+```ts [app.ts]
+import { createApp, createRouter, eventHandler } from "h3";
+
+export const app = createApp();
+
+const router = createRouter();
+app.use(router);
+
+router.get(
+  "/",
+  eventHandler((event) => {
+    return { message: "⚡️ Tadaa!" };
+  }),
+);
+```
+
+Now run the development server using [unjs/listhen](https://listhen.unjs.io):
+
+```bash [terminal]
+npx --yes listhen -w --open ./app.ts
+```
+
+And tadaa! We have a web server running locally.
+
+## What happend?
+
+Okay, let's now break down our hello world example:
+
+We first created an H3 app instance using `createApp()`. `app` is a tiny server capable of matching requests, generating response and handling lifecycle hooks (such as errors):
+
+```ts
+export const app = createApp();
+```
+
+Then we create an H3 router instance that can match route patterns and http methods using [unjs/radix3](https://radix3.unjs.io) and register it for app as main handler:
+
+```ts
+const router = createRouter();
+
+app.use(router);
+```
+
+Now it it time to add our first endpoint. In H3, request handlers can be defined using `defineEventHandler` or `eventHandler` helpers (they are aliases). Using wrappers, h3 can supercharge your code with better typehints and future compatibility.
+
+```ts
+eventHandler((event) => {});
+```
+
+What is beatiful in h3 is that all you have to do to make a reponse, is to simply return it! Responses can be simple string, JSON objects, data buffers, streams or standard [Web Response](https://developer.mozilla.org/en-US/docs/Web/API/Response/Response).
+
+```ts
+return { message: "⚡️ Tadaa!" };
+```
+
+Finally, we use [unjs/listhen](https://listhen.unjs.io) CLI using npx to auto install it. Listhen will automatically setup and start our webserver with zero configuration and adds on-the-fly TypeScript support to your experience!

docs/content/1.getting-started/2.installation.md

@@ -1,54 +1,26 @@
 ---
 title: Installation
-description: Get started
+description:
 ---
 
-```bash
-# Using npm
-npm install h3
-
-# Using yarn
-yarn add h3
+You can install `h3` dependency from [npm registry](https://www.npmjs.com/package/h3) to your project:
 
-# Using pnpm
-pnpm add h3
+::code-group
 
-# Using bun
-bun add h3
+```bash [npm]
+npm install h3
 ```
 
-## Nightly Channel
-
-If you are directly using `h3` as a dependency:
-
-```json
-{
-  "dependencies": {
-    "h3": "npm:h3-nightly@latest"
-  }
-}
+```bash [bun]
+bun i h3
 ```
 
-If you are using a framework ([Nuxt](https://nuxt.com/) or [Nitro](https://nitro.unjs.io/)) that is using `h3`:
-
-pnpm and yarn:
-
-```json
-{
-  "resolutions": {
-    "h3": "npm:h3-nightly@latest"
-  }
-}
+```bash [pnpm]
+pnpm add h3
 ```
 
-npm:
-
-```json
-{
-  "overrides": {
-    "h3": "npm:h3-nightly@latest"
-  }
-}
+```bash [yarn]
+yarn add h3
 ```
 
-**Note:** Make sure to recreate lockfile and `node_modules` after reinstall to avoid hoisting issues.
+::