docs: improve docs to make it clear we not just zod

Author: AdriftDeveloper

dev/tsconfig.json

@@ -1,27 +1,27 @@
 {
-  "compilerOptions": {
-    // Enable latest features
-    "lib": ["ESNext", "DOM"],
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    "allowJs": true,
+	"compilerOptions": {
+		// Enable latest features
+		"lib": ["ESNext", "DOM"],
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"allowJs": true,
 
-    // Bundler mode
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
+		// Bundler mode
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
 
-    // Best practices
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
+		// Best practices
+		"strict": true,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
 
-    // Some stricter flags (disabled by default)
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noPropertyAccessFromIndexSignature": false
-  }
+		// Some stricter flags (disabled by default)
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false
+	}
 }

doc/app/page.tsx

@@ -7,32 +7,95 @@ import { Banner } from "fumadocs-ui/components/banner";
 import Link from "next/link";
 
 export default function HomePage() {
+	const installCode = `npm install @better-fetch/fetch
+# Then install your preferred validator
+npm install zod # or valibot, arktype, etc.`;
+
+	const usageExample = `import { betterFetch } from '@better-fetch/fetch';
+import { z } from 'zod'; // or your preferred validator
+
+const { data, error } = await betterFetch("https://api.example.com/todos/1", {
+	output: z.object({
+		id: z.number(),
+		title: z.string(),
+		completed: z.boolean()
+	})
+});`;
+
 	return (
-		<div className="relative min-h-screen flex w-full items-center justify-center overflow-hidden rounded-lg border bg-background p-20 md:shadow-xl">
+		<div className="relative min-h-screen flex w-full flex-col items-center justify-start overflow-hidden rounded-lg border bg-background p-8 md:p-20">
 			<Ripple />
-			<div className="z-10 flex flex-col items-center justify-center">
-				<h1 className="mb-4 text-5xl font-bold text-center">Better Fetch</h1>
 
-				<p className="text-muted-foreground mx-auto max-w-2xl text-center">
-					Advanced fetch wrapper for typescript with zod schema validations,
-					pre-defined routes, callbacks, plugins and more.
+			{/* Hero Section */}
+			<div className="z-10 flex flex-col items-center justify-center max-w-4xl">
+				<h1 className="mb-4 text-6xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60">
+					Better Fetch
+				</h1>
+				<p className="mb-6 text-2xl font-semibold text-center">
+					Type-Safe API Calls with Your Favorite Validator
+				</p>
+				<p className="text-muted-foreground mx-auto max-w-2xl text-center text-lg mb-8">
+					A modern fetch wrapper that works with any Standard Schema validator.
+					Use Zod, Valibot, ArkType, or any spec-compliant library for powerful
+					runtime validations and perfect TypeScript inference.
 				</p>
-				<div className="flex py-4 items-center justify-center gap-4 w-full">
+
+				<div className="flex py-4 items-center justify-center gap-4 w-full mb-12">
 					<Link href="/docs">
-						<Button className="flex gap-2 cursor-pointer">
+						<Button size="lg" className="flex gap-2 cursor-pointer">
 							<Icons.docs />
-							Docs
+							Get Started
 						</Button>
 					</Link>
 					<Link href="https://github.com/bekacru/better-fetch">
-						<Button className="flex gap-2" variant="secondary">
+						<Button size="lg" className="flex gap-2" variant="secondary">
 							<Icons.github />
-							Github
+							GitHub
 						</Button>
 					</Link>
 				</div>
+
+				{/* Feature Grid */}
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12 w-full">
+					{[
+						{
+							title: "Schema Agnostic",
+							description:
+								"Works with Zod, Valibot, ArkType, and any Standard Schema validator",
+						},
+						{
+							title: "Type Safety",
+							description:
+								"Full TypeScript inference with your preferred validation library",
+						},
+						{
+							title: "Runtime Validation",
+							description:
+								"Automatic request/response validation with detailed error messages",
+						},
+						{
+							title: "Pre-defined Routes",
+							description: "Define API schemas once, use them everywhere",
+						},
+						{
+							title: "Universal",
+							description:
+								"Works in browsers, Node.js, Deno, Bun, and edge runtimes",
+						},
+						{
+							title: "Advanced Features",
+							description: "Retries, timeouts, hooks, plugins, and more",
+						},
+					].map((feature) => (
+						<div key={feature.title} className="p-6 rounded-lg border bg-card">
+							<h3 className="font-semibold mb-2">{feature.title}</h3>
+							<p className="text-sm text-muted-foreground">
+								{feature.description}
+							</p>
+						</div>
+					))}
+				</div>
 			</div>
-			<div></div>
 		</div>
 	);
 }

doc/content/docs/default-types.mdx

@@ -6,15 +6,18 @@ description: Default Types
 
 ## Default Output
 
-By default, the response data will always be type of `unknown`. If you want to customize the default type you can pass the `defaultOutput` option to the `createFetch` function.
+By default, the response data will always be of type `unknown`. If you want to customize the default type you can pass the `defaultOutput` option to the `createFetch` function.
+Note: When you supply a custom output schema using a Standard Schema validator (for example, zod or any alternative),
+the provided output schema will override the `defaultOutput` type. This approach offers a strongly typed solution without locking you to a single library.
 
 <Callout type="info">
 This only serves as a type for the response data it's not used as a validation schema.
 </Callout>
 
 ```ts twoslash title="fetch.ts"
 import { createFetch } from "@better-fetch/fetch";
-import { z } from "zod";
+// Example using zod (or any Standard Schema compliant library)
+import { z } from "zod"; 
 
 const $fetch = createFetch({
     baseURL: "https://jsonplaceholder.typicode.com",
@@ -52,10 +55,12 @@ const { data, error } = await $fetch("/todos/1", {
 
 The default error type is:
 ```ts
-{ status: number, statusText: string, message?: string }. 
+{ status: number, statusText: string, message?: string }
 ```
 
-if you want custom default error type, you can pass a `defaultError` option to the `createFetch` function. 
+If you want a custom error type, you can pass a `defaultError` option to the `createFetch` function.
+Remember: Your custom error type builds on top of the default properties, and if your API returns a JSON error,
+// it will be merged with your definition.
 
 <Callout type="info">
 The `status` and `statusText` properties are always defined. Your custom error definitions are only
@@ -64,7 +69,7 @@ inferred if the API returns a JSON error object.
 
 ```ts twoslash title="fetch.ts"
 import { createFetch } from "@better-fetch/fetch";
-import { z } from "zod";
+import { z } from "zod"; // Example only
 
 const $fetch = createFetch({
     baseURL: "https://jsonplaceholder.typicode.com",

doc/content/docs/fetch-schema.mdx

@@ -3,11 +3,11 @@ title: Fetch Schema
 description: Fetch Schema
 ---
 
-Fetch schema allows you to pre-define the url path and the shape of request and response data. You can easily document your api using this schema. 
+Fetch schema allows you to pre-define the URL path and the shape of request and response data. You can easily document your API using this schema.
 
-The output of the schema will be validated using zod and if the validation fails, it'll throw an error. 
+Better Fetch now uses Standard Schema internally, allowing you to bring your own Standard Schema-compliant validator (e.g., Zod, Valibot, ArkType).
 
-Before we start, make sure you have installed the [zod](https://www.npmjs.com/package/zod) package.
+To create a fetch schema, you need to import the `createSchema` function from `@better-fetch/fetch`.
 
 ```package-install
 npm i zod

doc/content/docs/getting-started.mdx

@@ -9,24 +9,19 @@ description: Getting started with Better Fetch
 npm i @better-fetch/fetch
 ```
 
-*You also need to have [zod](https://www.npmjs.com/package/zod) installed for schema validations. If you don't plan to use zod for schema validation, you can install it as a dev dependency.*
-
 ```package-install
-npm i zod
+npm i Schema-validation-of-your-choice
 ```
 
 ### Quick Start
 
-The fastest way to start using better fetch is to import the `betterFetch` function and start making requests.
-
-You can define the response type using generics or **zod schema (recommended)**.
+The fastest way to start using Better Fetch is to import the `betterFetch` function.
+You can define the response type using generics or use a schema that supports Standard Schema (recommended).
 
 ```ts twoslash title="fetch.ts"
 import { betterFetch } from '@better-fetch/fetch';
-import { z } from 'zod';
-
 
-//Using generic type
+// Using generic type
 const { data, error } = await betterFetch<{
     userId: string;
     id: number;
@@ -35,21 +30,22 @@ const { data, error } = await betterFetch<{
 }>("https://jsonplaceholder.typicode.com/todos/1");
 
 
-//Using zod schema
-const { data: todos, error: todoError } = await betterFetch("https://jsonplaceholder.typicodei.com/todos/1", {
+// Using a Standard Schema validator (for example, zod)
+import { z } from 'zod'; // or your preferred Standard Schema compliant library
+
+const { data: todos, error: todoError } = await betterFetch("https://jsonplaceholder.typicode.com/todos/1", {
     output: z.object({
         userId: z.string(),
         id: z.number(),
         title: z.string(),
         completed: z.boolean(),
     })  
 });
-
 // @annotate: Hover over the data object to see the type
 ```
 
 <Callout type="info"> 
-  Make sure strict mode is enabled in your tsconfig when using zod schema validations.
+  Make sure strict mode is enabled in your tsconfig when using schema validations.
 </Callout>
 
 Better fetch by default returns a `Promise` that resolves to an object of `data` and `error` but if you pass the `throw` option, it will return the parsed response data only. 
@@ -108,13 +104,15 @@ Fetch schema enables you to pre-define the URL path and the shape of request and
    Plugins can also define fetch schemas. See [Plugins](/docs/plugins) section for more details.
 </Callout>
 
-The output of the scheam will be validated using zod and if the validation fails, it'll throw an error.
+The output of the scheam will be validated using your schema and if the validation fails, it'll throw an error.
 
 ```ts twoslash title="fetch.ts" 
 import { createSchema, createFetch } from "@better-fetch/fetch";
+
+// ZOD example
 import { z } from "zod";
 
-export const schema = createSchema({ // [!code highlight]
+export const zodSchema = createSchema({ // [!code highlight]
     "/path": { // [!code highlight]
         input: z.object({ // [!code highlight]
             userId: z.string(), // [!code highlight]
@@ -133,7 +131,7 @@ export const schema = createSchema({ // [!code highlight]
 
 const $fetch = createFetch({
     baseURL: "https://jsonplaceholder.typicode.com",
-    schema: schema // [!code highlight]
+    schema: zodSchema // [!code highlight]
 });
 
 const { data, error } = await $fetch("/path", {

doc/content/docs/index.mdx

@@ -3,21 +3,27 @@ title: Introduction
 description: Getting started with Better Fetch
 ---
 
-Better fetch is advanced fetch wrapper for typescript. It supports error as value, zod schema validations, advanced type inference, pre-defined routes, hooks, plugins and more. Works on the browser, node (version 18+), workers, deno and bun.
+# Better Fetch
+
+Better Fetch is an advanced fetch wrapper for TypeScript that supports any Standard Schema-compliant validator (like Zod, Valibot, ArkType, etc) for runtime validation and type inference. It features error-as-value handling, pre-defined routes, hooks, plugins and more. Works on the browser, node (version 18+), workers, deno and bun.
 
 ## Features
 <Cards>
+    <Card
+        title="Schema Agnostic"
+        description="Use any Standard Schema compatible validator (Zod, Valibot, ArkType, etc) for runtime validation and type inference."
+    />
     <Card
         title="Type safety"
-        description="Advanced type inference and runtime validations with zod"
+        description="Harness advanced type inference and runtime validations powered by Standard Schema. Bring your validator of choice as long as it supports standard schema interfaces."
     />
     <Card
         title="Smart Parser"
         description="Smart response parser for any content type"
     />
     <Card
         title="Fetch Schema"
-        description="Pre defined routes with zod schema validations"
+        description="Pre defined routes with schema validations"
         href="/docs/fetch-schema"
     />
     <Card

doc/content/docs/plugins.mdx

@@ -79,10 +79,14 @@ const $fetch = createFetch({
 
 ### Schema
 
-You can define a schema for a plugin. This allows you to easily document the api usage using a schema.
+You can define a schema for a plugin. This allows you to easily document the API usage using a schema.
+The schema is now based on the Standard Schema specification.
+
+Note: Better Fetch now uses Standard Schema internally so you can bring your own Standard Schema–compliant validator. You are no longer limited to zod.
 
 ```ts twoslash title="fetch.ts"
 import { createFetch, createSchema, BetterFetchPlugin } from "@better-fetch/fetch";
+// Example using zod (or any Standard Schema compliant validator)
 import { z } from "zod";
 // @errors: 2353 2561
 const plugin = {

doc/package.json

@@ -9,8 +9,8 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@better-fetch/fetch": "^1.1.0",
-		"@better-fetch/logger": "^1.1.0",
+		"@better-fetch/fetch": "workspace:*",
+		"@better-fetch/logger": "workspace:*",
 		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-slot": "^1.1.0",
 		"class-variance-authority": "^0.7.0",
@@ -26,7 +26,7 @@
 		"next": "^14.2.4",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"tailwind-merge": "^2.4.0",
+		"tailwind-merge": "^2.5.2",
 		"zod": "^3.24.0"
 	},
 	"devDependencies": {

packages/better-fetch/src/create-fetch/schema.ts

@@ -5,7 +5,7 @@ export type FetchSchema = {
 	input?: StandardSchemaV1;
 	output?: StandardSchemaV1;
 	query?: StandardSchemaV1;
-	params?:  StandardSchemaV1<Record<string, unknown>> | undefined;
+	params?: StandardSchemaV1<Record<string, unknown>> | undefined;
 	method?: Methods;
 };
 

packages/better-fetch/src/test/create.test.ts

@@ -19,8 +19,8 @@ import {
 import type { BetterFetchResponse } from "../types";
 
 import { BetterFetchPlugin } from "../plugins";
+import { ValidationError } from "../utils";
 import { router } from "./test-router";
-import { ValidationError } from '../utils';
 
 const schema = {
 	"/": {