0x1: Lightning-fast web framework for JavaScript/TypeScript with zero overhead and maximum performance, powered by Bun
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
useState, useEffect, useCallback, useMemo, useRef, useReducer, useContext, createContextuseTransition, useDeferredValue, useId with priority-based schedulinguseFetch, useForm, useLocalStorage, useClickOutsidenext/link"use server" functions with automatic internal API generation (never exposed publicly)"use server" for server-side functions and "use client" for client-side components, or leave it up to 0x1 to automatically infer the context0x1 add <component> command (TBD)page.tsx, layout.tsx, loading.tsx, not-found.tsx, etc.[slug], [...slug], [[...slug]] patterns(auth) folders that don't affect URL structureuseSearchParams, useParams, usePathname#anchor link handling with auto-scroll0x1's philosophy is radically different from most modern frameworks:
# Install globally (recommended)
bun install -g 0x1
# Or use npx for one-off commands
npx 0x1@latest new my-app
# Create a new project with default options
0x1 new my-app
# Select template complexity
0x1 new my-app --complexity=minimal|standard|full
# With additional options
0x1 new my-app --theme="royal-purple" --pwa
# Navigate to your project
cd my-app
# Start the development server
0x1 dev
# Open http://localhost:3000 to view your app
Port Management: If port 3000 is in use, the dev server automatically finds the next available port.
# Create a production build
0x1 build
# Preview your production build locally
0x1 preview
# Deploy to production
0x1 deploy --provider=vercel
0x1 provides intelligent CSS processing with multiple options for optimal performance. Configure your CSS processor in your 0x1.config.ts file:
// 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: []
}
};
Intelligent Tailwind CSS processor with dramatic performance improvements
export default {
css: {
processor: '0x1-enhanced' // Default for new projects
}
};
Standard TailwindCSS v4 processing
export default {
css: {
processor: 'tailwind-v4'
}
};
| 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 |
// 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'
]
}
};
The 0x1-enhanced processor uses intelligent delegation with multiple strategies:
@tailwind) vs v4 (@import "tailwindcss") syntaxThe CSS processor automatically optimizes for different environments:
Development Mode:
Production Mode:
If you're migrating from a pure TailwindCSS project:
// 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: []
}
};
'0x1-enhanced' for maximum performance, fallback to 'tailwind-v4' if neededSlow builds?
processor: '0x1-enhanced' for 88% faster buildscontent patterns to only include necessary filespurge: true to remove unused stylesMissing styles?
content patterns include all component filesprocessor: 'tailwind-v4' as fallback for full compatibilityLarge bundle sizes?
processor: '0x1-enhanced' for 95% smaller bundlespurge: true for production buildsCache issues?
.0x1-cache/ directoryIdeal for: Small projects, landing pages, or developers who want full control
Ideal for: Most web applications and sites
Ideal for: Production applications with advanced features
0x1 provides a Next15-compatible metadata system that works automatically without requiring manual imports or function calls.
Simply export a metadata constant from any page or layout:
// 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 <h1>Welcome!</h1>;
}
Create a global metadata configuration in app/metadata.ts:
// 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',
},
};
Override global metadata for specific pages:
// 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 <div>About us content...</div>;
}
For dynamic metadata based on props or data:
// 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
}
0x1 supports Next15-style client and server directives for clear separation of concerns.
Use "use client" for browser-only components:
"use client";
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
Use "use server" for server-side functions:
"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();
}
"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 (
<div>
{/* User profile UI */}
</div>
);
}
Server actions automatically create internal API endpoints:
"use server" files become callable from client components/api/ routes manuallyconst metadata = {} for static metadata"use client" only when necessary (state, events, browser APIs)"use server" for data fetching, mutations, and server-side logicWhen creating a PWA project, metadata is automatically configured:
0x1 new my-pwa-app --pwa --theme-color="#007acc"
This automatically generates:
0x1 is designed as a drop-in replacement for React and Next.js applications. Migration is as simple as updating your imports:
1. Replace React imports:
// Before (React)
import React, { useState, useEffect } from 'react';
// After (0x1)
import { useState, useEffect } from '0x1';
2. Replace Next.js Link imports:
// Before (Next.js)
import Link from 'next/link';
// After (0x1)
import Link from '0x1/link';
3. Replace Next.js router imports:
// Before (Next.js)
import { useRouter } from 'next/router';
// After (0x1)
import { useRouter } from '0x1/router';
Use this one-liner to migrate most imports automatically:
# Replace React imports (including all hooks)
find ./src -name "*.tsx" -o -name "*.ts" | xargs sed -i 's/from ['\''"]react['\''"];/from "0x1";/g'
# Replace Next.js Link imports
find ./src -name "*.tsx" -o -name "*.ts" | xargs sed -i 's/from ['\''"]next\/link['\''"];/from "0x1\/link";/g'
# Replace Next.js router imports
find ./src -name "*.tsx" -o -name "*.ts" | xargs sed -i 's/from ['\''"]next\/router['\''"];/from "0x1\/router";/g'
find ./src -name "*.tsx" -o -name "*.ts" | xargs sed -i 's/from ['\''"]next\/navigation['\''"];/from "0x1\/router";/g'
# Update hook imports specifically
find ./src -name "*.tsx" -o -name "*.ts" | xargs sed -i 's/useState, useEffect, useCallback, useMemo, useRef/useState, useEffect, useCallback, useMemo, useRef, useReducer, useContext, createContext/g'
✅ Core React Hooks:
useState - State managementuseEffect - Side effects and lifecycleuseCallback - Function memoizationuseMemo - Value memoizationuseRef - DOM references and mutable valuesuseReducer - Complex state managementuseContext / createContext - Context API for prop drilling solutiononClick, onChange, etc.)✅ Advanced Performance Hooks:
useTransition - Non-blocking updates with pending statesuseDeferredValue - Performance optimization for expensive computationsuseId - Stable ID generation for accessibility✅ 0x1 Enhanced Features:
useFetch - Built-in data fetching with loading statesuseForm - Form state management with validationuseLocalStorage - Persistent state with localStorageuseClickOutside - Click outside detection✅ Next.js Compatibility:
Link component with href propapp/page.tsx, app/layout.tsx)useRouter hook for navigationBefore (React/Next.js):
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 (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<Link href="/about">
<a>About Page</a>
</Link>
</div>
);
}
After (0x1):
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 (
<div>
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<Link href="/about">About Page</Link>
</div>
);
}
0x1 offers a simple but powerful component system built with TypeScript:
// 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 (
<button
className={`btn btn-${variant}`}
onClick={onClick}
>
{children}
</button>
);
}
// Usage
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Count: {count}</h1>
<Button onClick={() => setCount(count + 1)}>
Increment
</Button>
</div>
);
}
0x1 provides a complete React-compatible hooks API with advanced features:
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<HTMLInputElement>(null);
return (
<div>
<input ref={inputRef} />
<button onClick={handleClick}>
Count: {count} (Expensive: {expensiveValue})
</button>
</div>
);
}
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 (
<div>
<input
id={id}
onChange={(e) => handleSearch(e.target.value)}
placeholder="Search..."
/>
{isPending && <span>Searching...</span>}
</div>
);
}
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 (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
// Consumer component
function ThemedButton() {
const context = useContext(ThemeContext);
if (!context) throw new Error('useContext must be used within ThemeProvider');
const { theme, toggleTheme } = context;
return (
<button
onClick={toggleTheme}
className={theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-black'}
>
Toggle Theme
</button>
);
}
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<HTMLDivElement>(null);
useClickOutside(ref, () => {
console.log('Clicked outside!');
});
return (
<div ref={ref}>
{loading && <p>Loading...</p>}
{error && <p>Error: {error.message}</p>}
{data && <pre>{JSON.stringify(data, null, 2)}</pre>}
</div>
);
}
0x1 uses the modern Next15patible app directory structure:
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
layout.tsx - Shared UI for a segment and its childrenpage.tsx - Unique UI of a route and makes it publicly accessibleloading.tsx - Loading UI for a segment and its childrenerror.tsx - Error UI for a segment and its childrennot-found.tsx - UI for 404 errors// app/layout.tsx
import { ThemeToggle } from '../components/ThemeToggle';
import Link from '0x1/link';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<header>
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<ThemeToggle />
</nav>
</header>
<main>{children}</main>
</body>
</html>
);
}
0x1 provides a Next.js-compatible Link component:
import Link from '0x1/link';
function Navigation() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
<Link href="/blog">Blog</Link>
{/* With custom styling */}
<Link href="/contact" className="nav-link">
Contact
</Link>
{/* Hash fragment navigation */}
<Link href="/docs/api#hooks">
API Hooks Section
</Link>
{/* External links work normally */}
<Link href="https://example.com" target="_blank">
External Link
</Link>
</nav>
);
}
0x1 supports Next.js 15-style dynamic routing:
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
Access URL search parameters and navigation in your components:
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 (
<div>
<h1>Product {params.id} in {params.category}</h1>
{color && <p>Color: {color}</p>}
{size && <p>Size: {size}</p>}
</div>
);
}
0x1 provides intelligent scroll management that follows modern SPA best practices:
Default Behavior:
Router Configuration:
// 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:
import Link from '0x1/link';
function Navigation() {
return (
<nav>
{/* Default behavior */}
<Link href="/products">Products</Link>
{/* Always scroll to top */}
<Link href="/about" scrollBehavior="top">About</Link>
{/* Preserve scroll position */}
<Link href="/settings" scrollBehavior="preserve">Settings</Link>
{/* Smooth scroll to top */}
<Link href="/contact" scrollBehavior="smooth">Contact</Link>
{/* Hash fragment navigation */}
<Link href="/docs/api#hooks">API Hooks</Link>
</nav>
);
}
Programmatic Navigation:
const router = useRouter();
// Default behavior
router.navigate('/products');
// Custom scroll behavior
router.navigate('/about', true, 'smooth');
router.navigate('/settings', true, 'preserve');
0x1 includes automatic Tailwind CSS v4 processing:
# Install Tailwind CSS
bun add -d tailwindcss@next @tailwindcss/postcss autoprefixer
# Create config (optional - 0x1 provides defaults)
bunx tailwindcss init
# Start development (Tailwind is processed automatically)
0x1 dev
export function Card({ children }: { children: React.ReactNode }) {
return (
<div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
{children}
</div>
);
}
export function Button({ variant = 'primary', children, ...props }) {
const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors";
const variantClasses = {
primary: "bg-blue-600 hover:bg-blue-700 text-white",
secondary: "bg-gray-200 hover:bg-gray-300 text-gray-900"
};
return (
<button
className={`${baseClasses} ${variantClasses[variant]}`}
{...props}
>
{children}
</button>
);
}
Add PWA functionality to any project:
# Add PWA during project creation
0x1 new my-app --pwa --theme="royal-purple"
# Add PWA to existing project
0x1 pwa
# Full customization
0x1 pwa --name "My App" \
--shortName "App" \
--themeColor "#0077cc" \
--backgroundColor "#ffffff" \
--description "My awesome PWA application" \
--icons \
--offline \
--skipPrompts
0x1 includes a carefully crafted component library @0x1js/components that provides ready-to-use UI components for your projects. These components are:
The 0x1 CLI makes it easy to add components to your project:
# Add a specific component
0x1 add Button
# Add multiple components at once
0x1 add Button Card Container
# Add with options (show demo, include docs, specify target directory)
0x1 add Button --withDemo --withDocs --target=src/ui
When you run the add command, the CLI will:
@0x1js/components package is installed in your projectEach component comes with markdown documentation describing its props, usage examples, and customization options. Use the --withDocs flag to include this documentation in your project.
| Command | Description |
|---|---|
0x1 new <name> | 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 <name> | Generate a component |
0x1 generate page <name> | Generate a page |
# Start with custom port
0x1 dev --port=8080
# Enable debug logging
0x1 dev --debug
# Skip Tailwind processing
0x1 dev --skip-tailwind
# Create with specific template
0x1 new my-app --complexity=minimal # Basic structure
0x1 new my-app --complexity=standard # Complete project structure
0x1 new my-app --complexity=full # Everything + PWA + advanced features
# With theme and PWA
0x1 new my-app --theme="royal-purple" --pwa
0x1 projects are optimized for modern hosting platforms:
# Deploy to Vercel (recommended)
0x1 deploy --provider=vercel
# Deploy to Netlify
0x1 deploy --provider=netlify
# Custom deployment
0x1 build
# Then deploy the 'dist' directory
The framework is specially optimized for:
| Metric | 0x1 | React | Next.js | Vue | Svelte |
|---|---|---|---|---|---|
| Bundle Size (gzipped) | 5KB | 44KB | 80KB+ | 31KB | 4-21KB |
| Time to Interactive | 0.3s | 1.1s | 1.5s+ | 0.7s | 0.6s |
| Memory Usage | Low | High | High | Medium | Low |
| Lighthouse Score | 100 | 75-85 | 70-85 | 85-95 | 90-95 |
| Cold Start Time | <100ms | 300ms+ | 500ms+ | 200ms+ | 150ms+ |
useState, useEffect, useCallback, useMemo, useRef, useReducer, useContext, createContext)useTransition, useDeferredValue, useId) with priority-based schedulinguseFetch, useForm, useLocalStorage, useClickOutside)"use server" & "use client" directivesReact-error-boundary & next-error-boundary compatibility0x1 configuration is minimal and straightforward:
// 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;
If you encounter command not found: 0x1 after installing globally:
# Alternative way to run any 0x1 command
bunx 0x1 <command>
# Or add Bun's bin directory to your PATH:
export BUN_INSTALL="$HOME/.bun"
export PATH="$BUN_INSTALL/bin:$PATH"
bun run build before starting dev serverContributions are welcome! Here's how you can help:
# Clone the repository
git clone https://github.com/Triex/0x1.git
cd 0x1
# Install dependencies
bun install
# Run tests
bun test
# Build the framework
bun run build
Please see our Contributing Guidelines for more details.
Actual project intent is to allow development in Next/React styles-flows-APIs that everyone is used to, but allow devs to instantly spin up what usually takes hours of work, with the added benefit of Bun's speed and zero overhead dependencies (magnitudes' faster than Next/React bolt in replacement).
Another key point is that AI's understand Next/React, and can generate code for it. So this makes 0x1 a super speed way for vibe-coders to build websites, and apps as AI advances. (Currently quite stable for basics). Pending solid website & documentation.
Ultimately; adding crypto features to give the framework a real use case, and ability to grow rapidly. (Hence 0x1)
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."use server", "use client" tags work, page.tsx actions.ts work)ErrorBoundary support, like react-error-boundary or next-error-boundary0x1 Website with documentation, examples, and tutorials.
AI Component IDE Generator tool (paid LLM API)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.
0x1 Framework uses pure direct DOM manipulation instead of React-style re-renders. Components run once and state changes trigger direct DOM updates.
// ❌ WRONG: React approach (re-renders component)
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button onClick={() => setIsOpen(!isOpen)}>
{isOpen ? 'Close' : 'Open'} {/* Re-renders entire component */}
</button>
</div>
);
}
// ✅ CORRECT: 0x1 approach (direct DOM manipulation)
function MyComponent() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<button
onClick={() => setIsOpen(!isOpen)}
className={isOpen ? 'open' : 'closed'}
>
Toggle
</button>
</div>
);
}
When setIsOpen(true) is called:
0x1-state-change is dispatchedPerfect for complex layouts like EntityChat:
// app/(chat)/layout.tsx - Works perfectly with 0x1
export default function ChatLayout({ children }) {
const [showDropdown, setShowDropdown] = useState(false);
const [webSearch, setWebSearch] = useState(false);
return (
<div className="min-h-screen">
<header>
{/* These buttons maintain functionality across state changes */}
<button onClick={() => setShowDropdown(!showDropdown)}>
Dropdown {showDropdown ? '↑' : '↓'}
</button>
<button onClick={() => setWebSearch(!webSearch)}>
Web Search: {webSearch ? 'ON' : 'OFF'}
</button>
</header>
<main>{children}</main>
</div>
);
}
Enable verbose logging:
(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
FAQs
0x1: Lightning-fast web framework for JavaScript/TypeScript with zero overhead and maximum performance, powered by Bun
The npm package 0x1 receives a total of 70 weekly downloads. As such, 0x1 popularity was classified as not popular.
We found that 0x1 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Two npm packages masquerading as WhatsApp developer libraries include a kill switch that deletes all files if the phone number isn’t whitelisted.
Research
/Security News
Socket uncovered 11 malicious Go packages using obfuscated loaders to fetch and execute second-stage payloads via C2 domains.
Security News
TC39 advances 11 JavaScript proposals, with two moving to Stage 4, bringing better math, binary APIs, and more features one step closer to the ECMAScript spec.