Lightning-fast TypeScript-only web framework with zero overhead

The ultra-minimal, maximum performance framework powered by Bun

Quickstart ·
Features ·
Migration Guide ·
Components ·
App Structure ·
CLI ·
Deploy

---

⚡ Features

$3

$3

$3

$3

$3

$3

$3

---

💡 Philosophy

0x1's philosophy is radically different from most modern frameworks:

1. Zero abstraction cost: No virtual DOM or complex state tracking
2. Browser-native: Leverage what browsers are good at
3. Minimal over comprehensive: Focused feature set, exceptional at few things
4. No dependencies: Entire framework in one tiny package
5. Extreme performance: Optimize for loaded page performance, not DX shortcuts
6. TypeScript-first: Built exclusively for TypeScript with full type safety

---

🚀 Quickstart

$3

- Bun v1.0.0 or higher (REQUIRED)

$3

``bash


Install globally (recommended)

`bash


Create a new project with default options

`bash


Navigate to your project

`bash


Create a production build

0x1 provides intelligent CSS processing with multiple options for optimal performance. Configure your CSS processor in your 0x1.config.ts file:

$3

`typescript
// 0x1.config.ts
export default {
css: {
processor: '0x1-enhanced', // or 'tailwind-v4'
minify: true,
sourcemap: true,
outputPath: 'dist/styles/output.css',
content: [
'src/*/.{js,ts,jsx,tsx,html}',
'components/*/.{js,ts,jsx,tsx,html}',
'pages/*/.{js,ts,jsx,tsx,html}',
'app/*/.{js,ts,jsx,tsx,html}'
],
darkMode: 'class', // or 'media'
theme: {
extend: {
colors: {
brand: '#0066cc'
}
}
},
plugins: []
}
};
`

$3

#### 🚀 0x1 Enhanced (Recommended)
Intelligent Tailwind CSS processor with dramatic performance improvements

- Performance: 88% faster builds (<400ms vs 4801ms baseline)
- Bundle Size: 95% smaller bundles (5.76KB vs 97KB)
- Smart Delegation: Automatically uses your installed Tailwind packages
- Multi-Strategy Processing: CLI → PostCSS → File discovery → Fallback
- Version Aware: Supports both Tailwind v3 and v4 automatically
- Intelligent Caching: Hash-based cache invalidation with dependency tracking

`typescript
export default {
css: {
processor: '0x1-enhanced' // Default for new projects
}
};
`

#### 🌈 Tailwind v4 (Standard)
Standard TailwindCSS v4 processing

- Official Support: Uses the official TailwindCSS v4 engine
- Full Features: Complete Tailwind feature set and plugin ecosystem
- Predictable Output: Consistent with standard Tailwind builds
- Slower Performance: Standard build times (3000ms+ for large projects)

`typescript
export default {
css: {
processor: 'tailwind-v4'
}
};
`

$3

| Scenario | TailwindCSS v4 | 0x1 Enhanced | Improvement |
|----------|----------------|--------------|-------------|
| Fresh build | 4,801ms | 559ms | 88% faster |
| Bundle size | 97KB | 5.76KB | 95% smaller |
| Large project | 8,000ms+ | <1000ms | 87% faster |
| Memory usage | High | Low (streaming) | 60% less |

$3

`typescript
// 0x1.config.ts - Advanced CSS configuration
export default {
css: {
processor: '0x1-enhanced',

// Output configuration
minify: process.env.NODE_ENV === 'production',
sourcemap: process.env.NODE_ENV === 'development',
outputPath: 'dist/styles/app.css',

// Content scanning
content: [
'app/*/.{js,ts,jsx,tsx}',
'components/*/.{js,ts,jsx,tsx}',
'lib/*/.{js,ts,jsx,tsx}',
// Add your content paths
],

// Performance options (0x1-enhanced only)
purge: true, // Remove unused styles

// Tailwind configuration
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
colors: {
primary: {
50: '#eff6ff',
500: '#3b82f6',
900: '#1e3a8a',
}
}
}
},

// Tailwind plugins
plugins: [
// '@tailwindcss/forms',
// '@tailwindcss/typography'
]
}
};
`

$3

The 0x1-enhanced processor uses intelligent delegation with multiple strategies:

1. File Discovery: Automatically finds CSS files in standard locations
2. Directive Detection: Identifies Tailwind v3 (@tailwind) vs v4 (@import "tailwindcss") syntax
3. Smart Processing: Processes through your installed Tailwind packages via PostCSS
4. Graceful Fallback: Provides essential CSS if processing fails
5. Bundle Optimization: Avoids bundling large CSS utilities in JavaScript

$3

The CSS processor automatically optimizes for different environments:

Development Mode:
- Fast incremental builds with caching
- Source maps for debugging
- Hot reload integration
- Detailed build logging

Production Mode:
- Minified output
- Purged unused styles
- Optimized file sizes
- Cache-busting headers

$3

If you're migrating from a pure TailwindCSS project:

1. Keep your existing tailwind.config.js - 0x1 will automatically detect and use it
2. Update your configuration to use 0x1's CSS system:

``typescript
// Before: tailwind.config.js
module.exports = {
content: ['./src/*/.{js,ts,jsx,tsx}'],
theme: { extend: {} },
plugins: []
};

// After: 0x1.config.ts
export default {
css: {
processor: '0x1-enhanced',
content: ['./src/*/.{js,ts,jsx,tsx}'],
theme: { extend: {} },
plugins: []
}
};
`

3. Choose your processor: Start with '0x1-enhanced' for maximum performance, fallback to 'tailwind-v4' if needed

$3

Slow builds?
- Switch to processor: '0x1-enhanced' for 88% faster builds
- Reduce content patterns to only include necessary files
- Enable purge: true to remove unused styles

Missing styles?
- Check your content patterns include all component files
- Verify your Tailwind classes are spelled correctly
- Use processor: 'tailwind-v4' as fallback for full compatibility

Large bundle sizes?
- Use processor: '0x1-enhanced' for 95% smaller bundles
- Avoid importing Tailwind CSS in JavaScript files
- Enable purge: true for production builds

Cache issues?
- The 0x1 Enhanced processor automatically invalidates cache when classes change
- For manual cache clearing, delete .0x1-cache/ directory

---

📋 Template Options

$3

Simply export a metadata constant from any page or layout:

`typescript
// app/page.tsx
export const metadata = {
title: 'Home Page',
description: 'Welcome to my awesome app',
keywords: ['nextjs', '0x1', 'typescript'],
openGraph: {
title: 'Home Page',
description: 'Welcome to my awesome app',
images: ['/og-image.jpg'],
},
twitter: {
card: 'summary_large_image',
title: 'Home Page',
description: 'Welcome to my awesome app',
}
};

export default function HomePage() {
return

Welcome!

Create a global metadata configuration in app/metadata.ts:

`typescript
// app/metadata.ts
export const metadata = {
title: {
template: '%s | My App',
default: 'My App'
},
description: 'A modern web application built with 0x1',
keywords: ['0x1', 'framework', 'typescript'],

// SEO
robots: {
index: true,
follow: true,
},

// Social Media
openGraph: {
type: 'website',
locale: 'en_US',
url: 'https://myapp.com',
siteName: 'My App',
},

// PWA & Mobile
viewport: {
width: 'device-width',
initialScale: 1,
},
themeColor: '#000000',
manifest: '/manifest.json',

// Icons
icons: {
icon: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
};
`

$3

Override global metadata for specific pages:

`typescript
// app/pages/about/page.tsx
export const metadata = {
title: 'About Us',
description: 'Learn more about our company',
openGraph: {
title: 'About Us',
description: 'Learn more about our company',
}
};

export default function AboutPage() {
return

`typescript
// app/pages/blog/[slug]/page.tsx
export async function generateMetadata({ params }: { params: { slug: string } }) {
const post = await fetchPost(params.slug);

return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.image],
}
};
}

export default function BlogPost({ params }: { params: { slug: string } }) {
// Component implementation
}
`

Client/Server Directives

0x1 supports Next15-style client and server directives for clear separation of concerns.

$3

Use "use client" for browser-only components:

`typescript
"use client";

import { useState } from 'react';

export default function Counter() {
const [count, setCount] = useState(0);

return (


Use "use server" for server-side functions:

`typescript
"use server";

// app/actions/user-actions.ts
export async function fetchUserData(userId: string) {
const response = await fetch(/api/users/${userId});
return response.json();
}

export async function updateUserProfile(userId: string, data: any) {
const response = await fetch(/api/users/${userId}, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});

if (!response.ok) {
throw new Error('Failed to update profile');
}

return response.json();
}
`

$3

`typescript
"use client";

import { fetchUserData, updateUserProfile } from '../actions/user-actions';

export default function UserProfile({ userId }: { userId: string }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetchUserData(userId).then(setUser);
}, [userId]);

const handleUpdate = async (data: any) => {
try {
await updateUserProfile(userId, data);
// Refresh user data
const updatedUser = await fetchUserData(userId);
setUser(updatedUser);
} catch (error) {
console.error('Update failed:', error);
}
};

return (


Server actions automatically create internal API endpoints:
- Functions in "use server" files become callable from client components
- Zero exposed endpoints: Internal API generation means no public API routes to secure or document
- Automatic type safety: Full TypeScript safety maintained across the client/server boundary
- No manual API creation: Skip the boilerplate of creating /api/ routes manually
- Built-in security: Server actions are never exposed to the client, only used for server-side logic
- Simplified architecture: Call server functions directly from client components without HTTP overhead

$3

1. Metadata: Always export const metadata = {} for static metadata
2. Client Components: Use "use client" only when necessary (state, events, browser APIs)
3. Server Actions: Use "use server" for data fetching, mutations, and server-side logic
4. Type Safety: Leverage TypeScript for full type safety across client/server boundaries

$3

When creating a PWA project, metadata is automatically configured:

`bash
0x1 new my-pwa-app --pwa --theme-color="#007acc"
`

This automatically generates:
- Manifest file with proper metadata
- Icon files in multiple sizes
- Service worker for offline support
- Metadata configuration with PWA-specific tags

---

🔄 Migration from React/Next.js

0x1 is designed as a drop-in replacement for React and Next.js applications. Migration is as simple as updating your imports:

$3

1. Replace React imports:
`tsx
// Before (React)
import React, { useState, useEffect } from 'react';

// After (0x1)
import { useState, useEffect } from '0x1';
`

2. Replace Next.js Link imports:
`tsx
// Before (Next.js)
import Link from 'next/link';

// After (0x1)
import Link from '0x1/link';
`

3. Replace Next.js router imports:
`tsx
// Before (Next.js)
import { useRouter } from 'next/router';

// After (0x1)
import { useRouter } from '0x1/router';
`

$3

Use this one-liner to migrate most imports automatically:

`bash


Replace React imports (including all hooks)

✅ Core React Hooks:
- useState - State management
- useEffect - Side effects and lifecycle
- useCallback - Function memoization
- useMemo - Value memoization
- useRef - DOM references and mutable values
- useReducer - Complex state management
- useContext / createContext - Context API for prop drilling solution
- JSX syntax and components
- Component props and children
- Event handlers (onClick, onChange, etc.)

✅ Advanced Performance Hooks:
- useTransition - Non-blocking updates with pending states
- useDeferredValue - Performance optimization for expensive computations
- useId - Stable ID generation for accessibility

✅ 0x1 Enhanced Features:
- useFetch - Built-in data fetching with loading states
- useForm - Form state management with validation
- useLocalStorage - Persistent state with localStorage
- useClickOutside - Click outside detection

✅ Next.js Compatibility:
- Link component with href prop
- App directory structure (app/page.tsx, app/layout.tsx)
- File-based routing
- useRouter hook for navigation

$3

Before (React/Next.js):
`tsx
import React, { useState, useEffect, useReducer, useContext } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

export default function MyComponent() {
const [count, setCount] = useState(0);
const [state, dispatch] = useReducer(reducer, initialState);
const router = useRouter();
const theme = useContext(ThemeContext);

useEffect(() => {
console.log('Component mounted');
}, []);

return (


After (0x1):
`tsx
import { useState, useEffect, useReducer, useContext } from '0x1';
import Link from '0x1/link';
import { useRouter } from '0x1/router';

export default function MyComponent() {
const [count, setCount] = useState(0);
const [state, dispatch] = useReducer(reducer, initialState);
const router = useRouter();
const theme = useContext(ThemeContext);

useEffect(() => {
console.log('Component mounted');
}, []);

return (


`tsx
// No React import needed! 0x1 has its own JSX runtime

interface ButtonProps {
onClick: () => void;
children: string;
variant?: 'primary' | 'secondary';
}

export function Button({ onClick, children, variant = 'primary' }: ButtonProps) {
return (
className={btn btn-${variant}}
onClick={onClick}
>
{children}

);
}

// Usage
function App() {
const [count, setCount] = useState(0);

return (


`tsx
import {
useState,
useEffect,
useCallback,
useMemo,
useRef,
useReducer,
useContext,
createContext
} from '0x1';

function MyComponent() {
// State management
const [count, setCount] = useState(0);

// Complex state with reducer
const [state, dispatch] = useReducer(reducer, initialState);

// Side effects
useEffect(() => {
document.title = Count: ${count};
}, [count]);

// Memoization
const expensiveValue = useMemo(() => {
return count * 1000;
}, [count]);

// Callbacks
const handleClick = useCallback(() => {
setCount(prev => prev + 1);
}, []);

// Refs
const inputRef = useRef(null);

return (


`tsx
import {
useTransition,
useDeferredValue,
useId
} from '0x1';

function AdvancedComponent() {
const [isPending, startTransition] = useTransition();
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const id = useId();

const handleSearch = (newQuery: string) => {
setQuery(newQuery);

// Mark expensive updates as non-urgent
startTransition(() => {
// This will be batched and deprioritized
performExpensiveSearch(deferredQuery);
});
};

return (


`tsx
import { createContext, useContext } from '0x1';

// Create context
const ThemeContext = createContext<{
theme: 'light' | 'dark';
toggleTheme: () => void;
} | null>(null);

// Provider component
function ThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState<'light' | 'dark'>('light');

const toggleTheme = useCallback(() => {
setTheme(prev => prev === 'light' ? 'dark' : 'light');
}, []);

return (

{children}

);
}

// Consumer component
function ThemedButton() {
const context = useContext(ThemeContext);
if (!context) throw new Error('useContext must be used within ThemeProvider');

const { theme, toggleTheme } = context;

return (
onClick={toggleTheme}
className={theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-black'}
>
Toggle Theme

);
}
`

#### 0x1 Enhanced Hooks

`tsx
import {
useFetch,
useForm,
useLocalStorage,
useClickOutside
} from '0x1';

function EnhancedComponent() {
// Data fetching with loading states
const { data, loading, error } = useFetch('/api/data');

// Form state management with validation
const { values, errors, handleChange, handleSubmit } = useForm({
initialValues: { email: '', password: '' },
validate: (values) => {
const errors: any = {};
if (!values.email) errors.email = 'Email is required';
if (!values.password) errors.password = 'Password is required';
return errors;
}
});

// Persistent state with localStorage
const [theme, setTheme] = useLocalStorage('theme', 'dark');

// Click outside detection
const ref = useRef(null);
useClickOutside(ref, () => {
console.log('Clicked outside!');
});

return (


{JSON.stringify(data, null, 2)}

`
my-app/
├── app/ # App directory (Next15-style)
│ ├── layout.tsx # Root layout (required)
│ ├── page.tsx # Home page
│ ├── not-found.tsx # 404 page
│ ├── about/
│ │ └── page.tsx # /about route
│ ├── blog/
│ │ ├── layout.tsx # Nested layout for blog
│ │ ├── page.tsx # /blog route
│ │ └── [slug]/
│ │ └── page.tsx # /blog/[slug] dynamic route
│ └── api/
│ └── hello/
│ └── route.ts # API route
├── components/ # Reusable components
│ ├── Button.tsx
│ ├── Header.tsx
│ └── ThemeToggle.tsx
├── lib/ # Utilities and helpers
├── public/ # Static assets
├── styles/ # CSS files
│ └── globals.css
├── 0x1.config.ts # Framework configuration
├── package.json
└── tsconfig.json
`

$3

- layout.tsx - Shared UI for a segment and its children
- page.tsx - Unique UI of a route and makes it publicly accessible
- loading.tsx - Loading UI for a segment and its children
- error.tsx - Error UI for a segment and its children
- not-found.tsx - UI for 404 errors

$3

`tsx
// app/layout.tsx
import { ThemeToggle } from '../components/ThemeToggle';
import Link from '0x1/link';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (




`tsx
import Link from '0x1/link';

function Navigation() {
return (


`
app/
├── page.tsx // matches /
├── about/page.tsx // matches /about
├── blog/
│ ├── [slug]/page.tsx // matches /blog/hello-world
│ └── [...tags]/page.tsx // matches /blog/tag1/tag2/etc
├── docs/
│ ├── [[...path]]/page.tsx // matches /docs, /docs/api, /docs/api/hooks
│ └── (auth)/ // Route group - doesn't affect URL
│ ├── login/page.tsx // matches /login (not /auth/login)
│ └── register/page.tsx // matches /register
└── [category]/
└── [id]/page.tsx // matches /electronics/123
`

$3

Access URL search parameters and navigation in your components:

`tsx
import { useSearchParams, useParams, useRouter } from '0x1/router';

function ProductPage() {
const params = useParams<{ category: string; id: string }>();
const searchParams = useSearchParams();
const router = useRouter();

const color = searchParams.get('color');
const size = searchParams.get('size');

const handleNavigate = () => {
// Navigate with custom scroll behavior
router.navigate('/products', true, 'smooth');
};

return (


`tsx
// Global scroll behavior
const router = new Router({
scrollBehavior: 'auto', // Smart default (recommended)
// scrollBehavior: 'top', // Always scroll to top
// scrollBehavior: 'preserve', // Never scroll
// scrollBehavior: 'smooth', // Smooth scroll to top
});
`

Per-Link Overrides:

`tsx
import Link from '0x1/link';

function Navigation() {
return (


`tsx
const router = useRouter();

// Default behavior
router.navigate('/products');

// Custom scroll behavior
router.navigate('/about', true, 'smooth');
router.navigate('/settings', true, 'preserve');
`

---

🎨 Styling with Tailwind CSS

0x1 includes automatic Tailwind CSS v4 processing:

$3

`bash


Install Tailwind CSS

`tsx
export function Card({ children }: { children: React.ReactNode }) {
return (


return (
className={${baseClasses} ${variantClasses[variant]}}
{...props}
>
{children}

);
}
`

---

📱 Progressive Web App Support

Add PWA functionality to any project:

`bash


Add PWA during project creation

`bash


Full customization

0x1 includes a carefully crafted component library @0x1js/components that provides ready-to-use UI components for your projects. These components are:

- Zero-dependency - Pure TypeScript/JSX with no external libraries
- Customizable - Easily extend or modify via props
- Accessible - Built following WCAG guidelines
- Minimal - Optimized for bundle size and performance

$3

The 0x1 CLI makes it easy to add components to your project:

`bash


Add a specific component

When you run the add command, the CLI will:

1. Check if the @0x1js/components package is installed in your project
2. Install it if needed (with your permission)
3. Copy the requested component(s) into your project with proper import paths

$3

- UI: Button, Card, and more
- Layout: Container and layout components
- Data: Table and data display components
- Feedback: Toast, Alert, and other feedback components

$3

Each component comes with markdown documentation describing its props, usage examples, and customization options. Use the --withDocs flag to include this documentation in your project.

---

🔧 CLI Commands

| Command | Description |
|---------|-------------|
| 0x1 new | Create a new 0x1 project |
| 0x1 dev | Start development server with hot reload |
| 0x1 build | Create optimized production build |
| 0x1 preview | Preview production build locally |
| 0x1 deploy | Deploy to production (Vercel, Netlify) |
| 0x1 pwa | Add Progressive Web App functionality |
| 0x1 generate component | Generate a component |
| 0x1 generate page | Generate a page |

$3

`bash


Start with custom port

`bash


Create with specific template

`bash


Deploy to Vercel (recommended)

`typescript
// 0x1.config.ts
import { _0x1Config } from '0x1';

const config: _0x1Config = {
app: {
name: 'my-0x1-app',
title: 'My 0x1 App',
description: 'Built with 0x1 framework'
},
server: {
port: 3000,
host: 'localhost',
basePath: '/'
},
routes: {
'/': './pages/home',
'/about': './pages/about',
'/products/:id': './pages/product'
},
styling: {
tailwind: true,
darkMode: 'class',
customTheme: {
colors: {
primary: '#0077cc'
}
}
},
optimization: {
minify: true,
precomputeTemplates: true,
prefetchLinks: true
},
deployment: {
provider: 'vercel', // or 'netlify', 'cloudflare', etc.
edge: true
}
};

export default config;
`

---

🔧 Troubleshooting

$3

If you encounter command not found: 0x1 after installing globally:

`bash


Alternative way to run any 0x1 command

1. Check Browser Console: Look for MIME type errors
2. Build Process: Run bun run build before starting dev server
3. TypeScript Compilation: The dev server automatically handles TypeScript

---

💬 Community & Support

- GitHub Repository - Source code and releases
- Issues - Bug reports and feature requests
- Discussions - Ask questions and share ideas
- NPM Package - Latest releases and documentation

---

👷 Contributing

Contributions are welcome! Here's how you can help:

`bash


Clone the repository

- [ ] Create robust tests for all features, and ensure they are working as expected. (e2e & unit)
- [ ] Crypto template option with various crypto features as options, inc;
- [ ] Wallet Connect, basic connect for ERC20 EVM tokens, and SOL, etc. OR allow all chains.
- [ ] Coin dApp / Dashboard, view connected wallet coin holdings, transactions + coin price, market cap, etc as appropriate.
- [ ] NFT, NFT viewing UI, basic NFT minting and collection features.
- [ ] Audit / ensure stable app router functionality ("use server", "use client" tags work, page.tsx actions.ts work)
- [ ] Functional templates
- [x] Minimal
- [ ] Standard (drafted, todo)
- [ ] Full (drafted, todo)
- [x] Full ErrorBoundary support, like react-error-boundary or next-error-boundary
- [x] Initial draft of bolt-in react hooks, with loading states, error handling, and caching.
- [ ] Properly tested, and documented. Confirmed functional.
- [ ] Create 0x1 Website with documentation, examples, and tutorials.
- [ ] Add in-browser AI Component IDE Generator tool (paid LLM API)

---

📜 License

0x1 is licensed under the TDL v1 License.

---


Ready to experience the fastest web framework?

bun install -g 0x1 && 0x1 new my-app



Join the revolution. Build faster. Ship lighter.


🎯 Direct DOM Manipulation (0x1 Philosophy)

0x1 Framework uses pure direct DOM manipulation instead of React-style re-renders. Components run once and state changes trigger direct DOM updates.

$3

`tsx
// ❌ WRONG: React approach (re-renders component)
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);

return (


When setIsOpen(true) is called:

1. State updates in hooks system
2. Custom event 0x1-state-change is dispatched
3. DOM elements update themselves directly
4. NO component re-execution or re-renders

$3

Perfect for complex layouts like EntityChat:

`tsx
// app/(chat)/layout.tsx - Works perfectly with 0x1
export default function ChatLayout({ children }) {
const [showDropdown, setShowDropdown] = useState(false);
const [webSearch, setWebSearch] = useState(false);

return (


Enable verbose logging:
`tsx
(window as any).__0x1_debug = true;
`

You'll see:
`
[0x1 Hooks] ✅ Direct DOM state update applied to 2 elements for ChatLayout_chat_z
[0x1 Direct DOM] button element responding to state change: false -> true
[0x1 Toggle] Button "Dropdown" state changed to: true
``