diff --git a/README.md b/README.md
index 569360e4..606adbfd 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
 # Hono
 
-Hono [炎] - Tiny web framework for Cloudflare Workers and others.
+Hono [炎] - Ultrafast web framework for Cloudflare Workers.
 
 ```js
-const { Hono } = require('hono')
+import { Hono } from 'hono'
 const app = new Hono()
 
 app.get('/', (c) => c.text('Hono!!'))
@@ -11,7 +11,7 @@ app.get('/', (c) => c.text('Hono!!'))
 app.fire()
 ```
 
-Hono[炎] - _**means flame🔥 in Japanese**_ - is small, simple, and ultrafast web flamework for a Service Workers API based serverless such as **Cloudflare Workers** and **Fastly Compute@Edge**. Hono does not depend on any npm packages. However, Hono has a router, context object, and middleware including the builtins. It's easy to make a web application.
+Hono[炎] - _**means flame🔥 in Japanese**_ - is small, simple, and ultrafast web flamework for a Service Workers API based serverless such as **Cloudflare Workers** and **Fastly Compute@Edge**. Hono does not depend on any npm packages. But, Hono has a router, context object, and middleware including the builtins. Easy to make a web application.
 
 ## Features
 
@@ -130,7 +130,7 @@ app.get('/fetch-url', async () => {
 ### Builtin Middleware
 
 ```js
-const { Hono, Middleware } = require('hono')
+import { Hono, Middleware } from 'hono'
 
 ...
 
@@ -323,7 +323,7 @@ npm i hono
 Only 4 lines!!
 
 ```js
-const { Hono } = require('hono')
+import { Hono } from 'hono'
 const app = new Hono()
 
 app.get('/', (c) => c.text('Hello! Hono!'))
diff --git a/example/basic/index.js b/example/basic/index.js
index ced4b702..0ace338b 100644
--- a/example/basic/index.js
+++ b/example/basic/index.js
@@ -1,6 +1,7 @@
-const { Hono, Middleware } = require('../../dist/index')
+import { Hono, Middleware } from '../../dist'
 // or install from npm:
-// const { Hono, Middleware } = require('hono')
+// import { Hono, Middleware } from 'hono'
+
 const app = new Hono()
 
 // Mount Builtin Middleware
@@ -41,7 +42,7 @@ app.get('/', (c) => c.text('Hono!!'))
 app.get('/hello', () => new Response('This is /hello'))
 app.get('/entry/:id', (c) => {
   const id = c.req.params('id')
-  return new Response(`Your ID is ${id}`)
+  return c.text(`Your ID is ${id}`)
 })
 app.get('/auth/*', async (ctx) => ctx.text('You are authorized'))
 
diff --git a/example/compute-at-edge/index.js b/example/compute-at-edge/index.js
index 5e013764..401d5f25 100644
--- a/example/compute-at-edge/index.js
+++ b/example/compute-at-edge/index.js
@@ -1,4 +1,5 @@
-const { Hono } = require('hono')
+import { Hono } from 'hono'
+
 const app = new Hono()
 
 app.use('*', async (c, next) => {
@@ -6,12 +7,10 @@ app.use('*', async (c, next) => {
   next()
 })
 
-app.get('/', () => {
-  return new Response('Hono!! Compute@Edge!!')
-})
+app.get('/', (c) => c.text('Hono!! Compute@Edge!!'))
 
 app.get('/hello/:name', (c) => {
-  return new Response(`Hello ${c.req.params('name')}!!!!!`)
+  return c.text(`Hello ${c.req.params('name')}!!!!!`)
 })
 
 app.fire()
diff --git a/example/jsx-ssr/src/Footer.jsx b/example/jsx-ssr/src/Footer.jsx
new file mode 100644
index 00000000..c9ee45af
--- /dev/null
+++ b/example/jsx-ssr/src/Footer.jsx
@@ -0,0 +1,7 @@
+export const Footer = () => {
+  return (
+    <footer>
+      <address><a href="https://github.com/yusukebe/hono">Hono</a></address>
+    </footer>
+  )
+}
\ No newline at end of file
diff --git a/example/jsx-ssr/src/Header.jsx b/example/jsx-ssr/src/Header.jsx
new file mode 100644
index 00000000..1f71c27b
--- /dev/null
+++ b/example/jsx-ssr/src/Header.jsx
@@ -0,0 +1,7 @@
+export const Header = () => {
+  return (
+    <header>
+      <h1><a href="/">Hono Example</a></h1>
+    </header>
+  )
+}
diff --git a/example/jsx-ssr/src/Post.jsx b/example/jsx-ssr/src/Post.jsx
new file mode 100644
index 00000000..d2b81933
--- /dev/null
+++ b/example/jsx-ssr/src/Post.jsx
@@ -0,0 +1,15 @@
+import { Header } from './Header'
+import { Footer } from './Footer'
+
+export const Post = (props) => {
+  return (
+    <div>
+      <Header />
+      <main>
+        <h2>{props.post.title}</h2>
+        <p>{props.post.body}</p>
+      </main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/example/jsx-ssr/src/Top.jsx b/example/jsx-ssr/src/Top.jsx
new file mode 100644
index 00000000..2189f4d0
--- /dev/null
+++ b/example/jsx-ssr/src/Top.jsx
@@ -0,0 +1,20 @@
+import { Header } from './Header'
+import { Footer } from './Footer'
+
+export const Top = (props) => {
+  return (
+    <div>
+      <Header />
+      <main>
+        <h2>Posts</h2>
+        {props.posts}
+        <ul>
+          {props.posts.map((post) => {
+            return <li><a href={`/post/${post.id}`}>{post.title}</a></li>
+          })}
+        </ul>
+      </main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/example/jsx-ssr/src/app.jsx b/example/jsx-ssr/src/app.jsx
deleted file mode 100644
index 06ef8739..00000000
--- a/example/jsx-ssr/src/app.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component } from 'nano-jsx'
-import { Link } from './Link'
-
-export class App extends Component {
-  render() {
-    return (
-      <div>
-        <header>
-          <h1>Hello! Hono!</h1>
-        </header>
-        <main>
-          <ul>
-            <Link title='Hono GitHub Repositry' url='https://github.com/yusukebe/hono'></Link>
-            <Link title='Hono npm Registry' url='https://www.npmjs.com/package/hono'></Link>
-          </ul>
-        </main>
-      </div>
-    )
-  }
-}
diff --git a/example/jsx-ssr/src/index.js b/example/jsx-ssr/src/index.js
index 815caa7e..3646bdf1 100644
--- a/example/jsx-ssr/src/index.js
+++ b/example/jsx-ssr/src/index.js
@@ -1,10 +1,11 @@
 import { Hono } from '../../../dist/index'
-
 import Nano from 'nano-jsx'
-import { App } from './App'
+import { Post } from './Post'
+import { Top } from './Top'
 
 const app = new Hono()
 
+// View
 const makeHTML = (body) => {
   return `
 <!DOCTYPE html>
@@ -16,8 +17,43 @@ const makeHTML = (body) => {
 `
 }
 
+// Model
+const posts = [
+  { id: '1', title: 'Good Morning', body: 'Let us eat breakfast' },
+  { id: '2', title: 'Good Afternoon', body: 'Let us eat Lunch' },
+  { id: '3', title: 'Good Evening', body: 'Let us eat Dinner' },
+  { id: '4', title: 'Good Night', body: 'Let us drink Beer' },
+  { id: '5', title: 'こんにちは', body: '昼からビールを飲みます' },
+]
+
+// Logic
+const getPosts = () => {
+  return posts
+}
+
+const getPost = (id) => {
+  for (const post of posts) {
+    if (post.id === id) {
+      return post
+    }
+  }
+}
+
+// Controller
 app.get('/', (c) => {
-  const body = Nano.renderSSR(<App />)
+  const posts = getPosts()
+  const body = Nano.renderSSR(<Top posts={posts} />)
+  const html = makeHTML(body)
+  return c.html(html)
+})
+
+app.get('/post/:id{[0-9]+}', (c) => {
+  const id = c.req.params('id')
+  const post = getPost(id)
+  if (!post) {
+    return c.text('Not Found', 404)
+  }
+  const body = Nano.renderSSR(<Post post={post} />)
   const html = makeHTML(body)
   return c.html(html)
 })
diff --git a/example/jsx-ssr/src/link.jsx b/example/jsx-ssr/src/link.jsx
deleted file mode 100644
index 42a30f33..00000000
--- a/example/jsx-ssr/src/link.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export const Link = (props) => {
-  return (
-    <li>
-      <a href={props.url}>{props.title}</a>
-    </li>
-  )
-}
diff --git a/package.json b/package.json
index 63b70c8a..611ce09c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hono",
   "version": "0.0.12",
-  "description": "Tiny web framework for Cloudflare Workers and others.",
+  "description": "Ultrafast web framework for Cloudflare Workers.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
diff --git a/src/hono.ts b/src/hono.ts
index 4ccc0626..b78679cf 100644
--- a/src/hono.ts
+++ b/src/hono.ts
@@ -11,13 +11,13 @@ const METHOD_NAME_OF_ALL = 'ALL'
 
 declare global {
   interface Request {
-    params: (key: string) => any
+    params: (key: string) => string
     query: (key: string) => string | null
   }
 }
 
-type Handler = (c: Context, next?: Function) => Response | Promise<Response>
-type MiddlwareHandler = (c: Context, next: Function) => Promise<void>
+export type Handler = (c: Context, next?: Function) => Response | Promise<Response>
+export type MiddlwareHandler = (c: Context, next: Function) => Promise<void>
 
 export class Router<T> {
   node: Node<T>
@@ -149,7 +149,7 @@ export class Hono {
       await next()
     }
 
-    middleware.push(Middleware.defaultFilter)
+    middleware.push(Middleware.default)
     middleware.push(wrappedHandler)
 
     const composed = compose(middleware)
diff --git a/src/index.ts b/src/index.ts
index 7c05adb5..9b469a94 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,2 @@
-export { Hono, Middleware } from './hono'
+export { Hono, Middleware, Handler, MiddlwareHandler } from './hono'
 export { Context } from './context'
diff --git a/src/middleware.ts b/src/middleware.ts
index 6ab9d9f8..a5af15c6 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,10 +1,10 @@
-import { defaultFilter } from './middleware/defaultFilter'
-import { poweredBy } from './middleware/poweredBy/poweredBy'
+import { defaultMiddleware } from './middleware/default'
+import { poweredBy } from './middleware/powered-by/powered-by'
 import { logger } from './middleware/logger/logger'
 import { basicAuth } from './middleware/basic-auth/basic-auth'
 
 export class Middleware {
-  static defaultFilter = defaultFilter
+  static default = defaultMiddleware
   static poweredBy = poweredBy
   static logger = logger
   static basicAuth = basicAuth
diff --git a/src/middleware/defaultFilter.ts b/src/middleware/default.ts
similarity index 73%
rename from src/middleware/defaultFilter.ts
rename to src/middleware/default.ts
index 3293c3f4..cfc3bbc5 100644
--- a/src/middleware/defaultFilter.ts
+++ b/src/middleware/default.ts
@@ -1,6 +1,6 @@
 import type { Context } from '../context'
 
-export const defaultFilter = async (c: Context, next: Function) => {
+export const defaultMiddleware = async (c: Context, next: Function) => {
   c.req.query = (key: string) => {
     // eslint-disable-next-line
     const url = new URL(c.req.url)
diff --git a/src/middleware/poweredBy/poweredBy.test.ts b/src/middleware/powered-by/powered-by.test.ts
similarity index 100%
rename from src/middleware/poweredBy/poweredBy.test.ts
rename to src/middleware/powered-by/powered-by.test.ts
diff --git a/src/middleware/poweredBy/poweredBy.ts b/src/middleware/powered-by/powered-by.ts
similarity index 100%
rename from src/middleware/poweredBy/poweredBy.ts
rename to src/middleware/powered-by/powered-by.ts