diff --git a/bun.lockb b/bun.lockb
index 652004964..ff0b611b5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index f5294dbf4..ea25bfe63 100644
--- a/package.json
+++ b/package.json
@@ -1,36 +1,37 @@
 {
-    "name": "gitbook",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "dev": "next dev",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint",
-        "format": "prettier ./ --ignore-unknown --write",
-        "format:check": "prettier ./ --ignore-unknown --list-different"
-    },
-    "dependencies": {
-        "@geist-ui/icons": "^1.0.2",
-        "@gitbook/api": "^0.11.0",
-        "bun-types": "^1.0.7",
-        "next": "13.5.6",
-        "react": "^18",
-        "react-dom": "^18",
-        "server-only": "^0.0.1",
-        "shiki": "^0.14.5",
-        "tailwind-merge": "^1.14.0"
-    },
-    "devDependencies": {
-        "@types/node": "^20",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
-        "autoprefixer": "^10",
-        "eslint": "^8",
-        "eslint-config-next": "13.5.6",
-        "postcss": "^8",
-        "prettier": "^3.0.3",
-        "tailwindcss": "^3.3.4",
-        "typescript": "^5"
-    }
+  "name": "gitbook",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier ./ --ignore-unknown --write",
+    "format:check": "prettier ./ --ignore-unknown --list-different"
+  },
+  "dependencies": {
+    "@geist-ui/icons": "^1.0.2",
+    "@gitbook/api": "^0.11.0",
+    "@readme/openapi-parser": "^2.5.0",
+    "bun-types": "^1.0.7",
+    "next": "13.5.6",
+    "react": "^18",
+    "react-dom": "^18",
+    "server-only": "^0.0.1",
+    "shiki": "^0.14.5",
+    "tailwind-merge": "^1.14.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.6",
+    "postcss": "^8",
+    "prettier": "^3.0.3",
+    "tailwindcss": "^3.3.4",
+    "typescript": "^5"
+  }
 }
diff --git a/src/components/DocumentView/Block.tsx b/src/components/DocumentView/Block.tsx
index f4f694277..ba5e48e1f 100644
--- a/src/components/DocumentView/Block.tsx
+++ b/src/components/DocumentView/Block.tsx
@@ -12,6 +12,7 @@ import { Images } from './Images';
 import { Tabs } from './Tabs';
 import { Expandable } from './Expandable';
 import { Table } from './Table';
+import { Swagger } from './Swagger';
 
 export interface BlockProps<T> extends DocumentContextProps {
     block: T;
@@ -46,6 +47,8 @@ export function Block<T>(props: BlockProps<T>) {
             return <Expandable {...props} {...contextProps} />;
         case 'table':
             return <Table {...props} {...contextProps} />;
+        case 'swagger':
+            return <Swagger {...props} {...contextProps} />;
         default:
             return <div className={tcls(style)}>Unsupported block {block.type}</div>;
     }
diff --git a/src/components/DocumentView/Swagger/Swagger.tsx b/src/components/DocumentView/Swagger/Swagger.tsx
new file mode 100644
index 000000000..f84d39ede
--- /dev/null
+++ b/src/components/DocumentView/Swagger/Swagger.tsx
@@ -0,0 +1,58 @@
+import { resolveContentRef } from '@/lib/references';
+import { BlockProps } from '../Block';
+import { parseOpenAPI } from '@/lib/swagger';
+import { tcls } from '@/lib/tailwind';
+import OpenAPIParser from '@readme/openapi-parser';
+
+/**
+ * Render a Swagger block.
+ */
+export async function Swagger(props: BlockProps<any>) {
+    const { block, context, style } = props;
+    const resolved = await resolveContentRef(block.data.ref, context);
+
+    if (!resolved) {
+        return <div>failed</div>;
+    }
+
+    const api = await OpenAPIParser.validate(resolved.href);
+    // console.log(api);
+
+    const operation = api.paths?.[block.data.path]?.[block.data.method]
+
+    console.log(operation);
+
+    // const parsed = await parseOpenAPI(resolved.href);
+
+    return (
+        <div
+            className={tcls(
+                'w-full',
+                'flex',
+                'flex-row',
+                style,
+                block.data.fullWidth ? ['max-w-full', 'large:flex-column'] : null,
+            )}
+        >
+            <div>
+                <div className={tcls('flex', 'items-center', 'gap-x-3')}>
+                    <span
+                        className={tcls(
+                            'font-mono text-[0.625rem] font-semibold leading-6 rounded-lg px-1.5 ring-1 ring-inset ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400',
+                        )}
+                    >
+                        {block.data.method.toUpperCase()}
+                    </span>
+                    <span
+                        className={tcls('h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600')}
+                    ></span>
+                    <span className={tcls('font-mono text-xs text-zinc-400')}>{block.data.path}</span>
+                </div>
+                <h2 className={tcls('mt-2 scroll-mt-32')}>{operation.summary}</h2>
+            </div>
+            <div>
+                <div />
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/DocumentView/Swagger/index.ts b/src/components/DocumentView/Swagger/index.ts
new file mode 100644
index 000000000..23822b1b4
--- /dev/null
+++ b/src/components/DocumentView/Swagger/index.ts
@@ -0,0 +1 @@
+export * from './Swagger';