# honojs/examples architecture

> Architecture diagram of the GitHub repository honojs/examples, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/honojs/examples
- Repository: https://github.com/honojs/examples

## Overview

This repository is a collection of independent Hono examples, not one application. Users explore HTTP routing, CRUD, storage, authentication, JSX rendering, client/server APIs, and several deployment runtimes. The graph preserves those documented example branches; unsampled modules are represented by their exact tree paths, with uncertain wiring omitted.

Main entry points: [`stytch-auth/src/App.tsx`](https://github.com/honojs/examples/blob/main/stytch-auth/src/App.tsx) (Auth and todo UI), [`durable-objects/src/index.ts`](https://github.com/honojs/examples/blob/main/durable-objects/src/index.ts) (Durable Object routes), [`blog/src/index.ts`](https://github.com/honojs/examples/blob/main/blog/src/index.ts) (Blog CRUD API), [`jsx-ssr/src/index.tsx`](https://github.com/honojs/examples/blob/main/jsx-ssr/src/index.tsx) (JSX SSR routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_http["HTTP examples"]
  node_basic["Routing and middleware<br/>[index.ts]"]
  node_blog["Blog CRUD API<br/>[index.ts]"]
  node_blogapi["Blog API routes<br/>[api.ts]"]
  node_blogmodel["Blog model<br/>[model.ts]"]
  node_static["Static-file example<br/>[index.ts]"]
end

subgraph group_ui["UI examples"]
  node_ssr["JSX SSR routes<br/>[index.tsx]"]
  node_ssrpages["Rendered pages"]
  node_viteui["JSX DOM client<br/>[client.tsx]"]
  node_viteapi["JSX demo API<br/>[index.tsx]"]
  node_pagesui["Pages React client<br/>[App.tsx]"]
  node_pagesapi["Pages API handler<br/>[&#91;&#91;route&#93;&#93;.ts]"]
  node_nextui["Next.js client<br/>[index.tsx]"]
  node_nextapi["Next.js API handler<br/>[&#91;...route&#93;.ts]"]
end

subgraph group_integrations["Platform integrations"]
  node_authui["Auth and todo UI<br/>[App.tsx]"]
  node_authcomponents["Login and todos<br/>[Auth.tsx]"]
  node_todoui["Todo editor<br/>[Todos.tsx]"]
  node_todoapi["Todo API<br/>[TodoAPI.ts]"]
  node_todoservice["Todo service<br/>[TodoService.ts]"]
  node_stripe["Stripe checkout<br/>[index.ts]"]
  node_doapp["Durable Object routes<br/>[index.ts]"]
  node_counter["Counter object<br/>[counter.ts]"]
end

subgraph group_runtimes["Runtime examples"]
  node_deno["Deno examples<br/>[main.ts]"]
  node_denojsx["Deno JSX example<br/>[jsx.tsx]"]
  node_bun["Bun examples<br/>[hello.ts]"]
  node_bunjsx["Bun JSX example<br/>[jsx.tsx]"]
end

node_user(("Example user"))
node_kv[("Cloudflare KV")]
node_stytch["Stytch identity"]
node_stripeapi["Stripe service"]
node_donamespace[("Durable Object namespace")]

node_user -->|"sends requests"| node_basic
node_user -->|"uses API"| node_blog
node_blog -->|"mounts routes"| node_blogapi
node_user -->|"requests files"| node_static
node_user -->|"requests pages"| node_ssr
node_ssr -->|"renders"| node_ssrpages
node_user -->|"uses demo"| node_viteui
node_viteui -->|"fetches time"| node_viteapi
node_user -->|"opens client"| node_pagesui
node_pagesui -->|"fetches greeting"| node_pagesapi
node_user -->|"submits name"| node_nextui
node_nextui -->|"posts greeting"| node_nextapi
node_user -->|"uses todo app"| node_authui
node_authui -.->|"provides auth"| node_stytch
node_authui -->|"renders routes"| node_authcomponents
node_authui -->|"renders editor"| node_todoui
node_todoapi -->|"delegates todos"| node_todoservice
node_todoservice -->|"reads and writes"| node_kv
node_user -->|"starts checkout"| node_stripe
node_stripe -->|"creates session"| node_stripeapi
node_user -->|"requests counter"| node_doapp
node_doapp -->|"resolves stub"| node_donamespace
node_doapp -->|"calls methods"| node_counter
node_user -->|"runs example"| node_deno
node_user -->|"runs example"| node_denojsx
node_user -->|"runs example"| node_bun
node_user -->|"runs example"| node_bunjsx

click node_basic "https://github.com/honojs/examples/blob/main/basic/src/index.ts"
click node_blog "https://github.com/honojs/examples/blob/main/blog/src/index.ts"
click node_blogapi "https://github.com/honojs/examples/blob/main/blog/src/api.ts"
click node_blogmodel "https://github.com/honojs/examples/blob/main/blog/src/model.ts"
click node_static "https://github.com/honojs/examples/blob/main/serve-static/src/index.ts"
click node_ssr "https://github.com/honojs/examples/blob/main/jsx-ssr/src/index.tsx"
click node_ssrpages "https://github.com/honojs/examples/tree/main/jsx-ssr/src/pages"
click node_viteui "https://github.com/honojs/examples/blob/main/hono-vite-jsx/src/client.tsx"
click node_viteapi "https://github.com/honojs/examples/blob/main/hono-vite-jsx/src/index.tsx"
click node_pagesui "https://github.com/honojs/examples/blob/main/pages-stack/src/App.tsx"
click node_pagesapi "https://github.com/honojs/examples/blob/main/pages-stack/functions/api/%5B%5Broute%5D%5D.ts"
click node_nextui "https://github.com/honojs/examples/blob/main/nextjs-stack/pages/index.tsx"
click node_nextapi "https://github.com/honojs/examples/blob/main/nextjs-stack/pages/api/%5B...route%5D.ts"
click node_authui "https://github.com/honojs/examples/blob/main/stytch-auth/src/App.tsx"
click node_authcomponents "https://github.com/honojs/examples/blob/main/stytch-auth/src/Auth.tsx"
click node_todoui "https://github.com/honojs/examples/blob/main/stytch-auth/src/Todos.tsx"
click node_todoapi "https://github.com/honojs/examples/blob/main/stytch-auth/api/TodoAPI.ts"
click node_todoservice "https://github.com/honojs/examples/blob/main/stytch-auth/api/TodoService.ts"
click node_stripe "https://github.com/honojs/examples/blob/main/env-vars/src/index.ts"
click node_doapp "https://github.com/honojs/examples/blob/main/durable-objects/src/index.ts"
click node_counter "https://github.com/honojs/examples/blob/main/durable-objects/src/counter.ts"
click node_deno "https://github.com/honojs/examples/blob/main/deno/main.ts"
click node_denojsx "https://github.com/honojs/examples/blob/main/deno/jsx.tsx"
click node_bun "https://github.com/honojs/examples/blob/main/bun/hello.ts"
click node_bunjsx "https://github.com/honojs/examples/blob/main/bun/jsx.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_basic,node_blog,node_blogapi,node_blogmodel,node_static,node_user toneBlue
class node_ssr,node_ssrpages,node_viteui,node_viteapi,node_pagesui,node_pagesapi,node_nextui,node_nextapi,node_kv,node_donamespace toneAmber
class node_authui,node_authcomponents,node_todoui,node_todoapi,node_todoservice,node_stripe,node_doapp,node_counter toneMint
class node_deno,node_denojsx,node_bun,node_bunjsx toneRose
class node_stytch,node_stripeapi toneIndigo
```

## Components

### HTTP examples

- [Routing and middleware](https://github.com/honojs/examples/blob/main/basic/src/index.ts): `basic/src/index.ts`
- [Blog CRUD API](https://github.com/honojs/examples/blob/main/blog/src/index.ts): `blog/src/index.ts`
- [Blog API routes](https://github.com/honojs/examples/blob/main/blog/src/api.ts): `blog/src/api.ts`
- [Blog model](https://github.com/honojs/examples/blob/main/blog/src/model.ts): `blog/src/model.ts`
- [Static-file example](https://github.com/honojs/examples/blob/main/serve-static/src/index.ts): `serve-static/src/index.ts`

### UI examples

- [JSX SSR routes](https://github.com/honojs/examples/blob/main/jsx-ssr/src/index.tsx): `jsx-ssr/src/index.tsx`
- [Rendered pages](https://github.com/honojs/examples/tree/main/jsx-ssr/src/pages): `jsx-ssr/src/pages`
- [JSX DOM client](https://github.com/honojs/examples/blob/main/hono-vite-jsx/src/client.tsx): `hono-vite-jsx/src/client.tsx`
- [JSX demo API](https://github.com/honojs/examples/blob/main/hono-vite-jsx/src/index.tsx): `hono-vite-jsx/src/index.tsx`
- [Pages React client](https://github.com/honojs/examples/blob/main/pages-stack/src/App.tsx): `pages-stack/src/App.tsx`
- [Pages API handler](https://github.com/honojs/examples/blob/main/pages-stack/functions/api/%5B%5Broute%5D%5D.ts): `pages-stack/functions/api/[[route]].ts`
- [Next.js client](https://github.com/honojs/examples/blob/main/nextjs-stack/pages/index.tsx): `nextjs-stack/pages/index.tsx`
- [Next.js API handler](https://github.com/honojs/examples/blob/main/nextjs-stack/pages/api/%5B...route%5D.ts): `nextjs-stack/pages/api/[...route].ts`

### Platform integrations

- [Auth and todo UI](https://github.com/honojs/examples/blob/main/stytch-auth/src/App.tsx): `stytch-auth/src/App.tsx`
- [Login and todos](https://github.com/honojs/examples/blob/main/stytch-auth/src/Auth.tsx): `stytch-auth/src/Auth.tsx`
- [Todo editor](https://github.com/honojs/examples/blob/main/stytch-auth/src/Todos.tsx): `stytch-auth/src/Todos.tsx`
- [Todo API](https://github.com/honojs/examples/blob/main/stytch-auth/api/TodoAPI.ts): `stytch-auth/api/TodoAPI.ts`
- [Todo service](https://github.com/honojs/examples/blob/main/stytch-auth/api/TodoService.ts): `stytch-auth/api/TodoService.ts`
- [Stripe checkout](https://github.com/honojs/examples/blob/main/env-vars/src/index.ts): `env-vars/src/index.ts`
- [Durable Object routes](https://github.com/honojs/examples/blob/main/durable-objects/src/index.ts): `durable-objects/src/index.ts`
- [Counter object](https://github.com/honojs/examples/blob/main/durable-objects/src/counter.ts): `durable-objects/src/counter.ts`

### Runtime examples

- [Deno examples](https://github.com/honojs/examples/blob/main/deno/main.ts): `deno/main.ts`
- [Deno JSX example](https://github.com/honojs/examples/blob/main/deno/jsx.tsx): `deno/jsx.tsx`
- [Bun examples](https://github.com/honojs/examples/blob/main/bun/hello.ts): `bun/hello.ts`
- [Bun JSX example](https://github.com/honojs/examples/blob/main/bun/jsx.tsx): `bun/jsx.tsx`

### Other components

- **Example user**
- **Cloudflare KV**
- **Stytch identity**
- **Stripe service**
- **Durable Object namespace**

## Connections

- Example user → Routing and middleware: sends requests
- Example user → Blog CRUD API: uses API
- Blog CRUD API → Blog API routes: mounts routes
- Example user → Static-file example: requests files
- Example user → JSX SSR routes: requests pages
- JSX SSR routes → Rendered pages: renders
- Example user → JSX DOM client: uses demo
- JSX DOM client → JSX demo API: fetches time
- Example user → Pages React client: opens client
- Pages React client → Pages API handler: fetches greeting
- Example user → Next.js client: submits name
- Next.js client → Next.js API handler: posts greeting
- Example user → Auth and todo UI: uses todo app
- Auth and todo UI → Stytch identity: provides auth
- Auth and todo UI → Login and todos: renders routes
- Auth and todo UI → Todo editor: renders editor
- Todo API → Todo service: delegates todos
- Todo service → Cloudflare KV: reads and writes
- Example user → Stripe checkout: starts checkout
- Stripe checkout → Stripe service: creates session
- Example user → Durable Object routes: requests counter
- Durable Object routes → Durable Object namespace: resolves stub
- Durable Object routes → Counter object: calls methods
- Example user → Deno examples: runs example
- Example user → Deno JSX example: runs example
- Example user → Bun examples: runs example
- Example user → Bun JSX example: runs example