0x1 v0.0.360

⚡ Features

💨 Extreme Performance

• Tiny runtime: <30KB total JS bundle size
• Zero hydration cost: No client-side hydration overhead
• Native ESM: Browser-native module loading without bundling
• Precomputed content: Minimal JS for maximum speed
• Sub-second builds: Bun-powered compilation and bundling

🔄 React/Next.js Drop-in Replacement

• Full React Hooks API: useState, useEffect, useCallback, useMemo, useRef
• Next.js-compatible Link: Drop-in replacement for next/link
• App Directory Structure: Next15-style file-based routing
• JSX Runtime: Custom JSX implementation without React dependencies
• Efficient Server Actions: "use server" functions with automatic internal API generation (never exposed publicly)
• Explicitly Split Client/Server: Simply use "use server" for server-side functions and "use client" for client-side components, or leave it up to 0x1 to automatically infer the context
• Easy Migration: Simple find-and-replace from React/Next.js imports

🧩 Component System

• TypeScript-Only: Exclusively built for TypeScript with full type safety
• Simple API: Modern component system, Next15-compatible, but without the bloat
• Minimal abstractions: Near-vanilla performance with type-checked templates
• Custom Diffing: Optimized DOM updates with TypeScript safety
• Compile-time validation: Catch errors early with strict typing
• Smart Context Inference: Automatically detects client/server context and validates usage
• Runtime Error Boundaries: Beautiful error display for development with helpful suggestions

📁 App Directory Structure

• Next15-compatible: Modern app directory structure with file-based routing
• Nested layouts: Component co-location and shared UI
• Special file conventions: page.tsx, layout.tsx, loading.tsx, not-found.tsx, etc.
• Zero configuration: Works out of the box

🛣️ Advanced Routing System

• Dynamic routes: [slug], [...slug], [[...slug]] patterns
• Route groups: (auth) folders that don't affect URL structure
• Search params: Next15-style useSearchParams, useParams, usePathname
• Route conflict detection: Automatic detection and resolution of conflicting routes
• Hash fragment navigation: Proper #anchor link handling with auto-scroll
• Nested layouts: Automatic composition of multiple layout levels

🔨 Developer Experience

• Bun-first architecture: Fully optimized for Bun's capabilities
• Lightning-fast hot reload: Sub-second refresh times using SSE + WebSocket
• Beautiful dev server output: Clear status codes, routes, and component info
• Tailwind CSS v4 integration: Zero-config styling with automatic optimization
• Smart defaults: Sensible configurations out of the box

📱 Progressive Web App Support

• Auto-generated PWA assets: Icons, splash screens, and manifest
• Offline support: Service worker with intelligent caching
• Install prompts: Native app-like experience
• Dark/light modes: Theme support for your PWA
• Push notifications: Ready infrastructure

💡 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

Prerequisites

• Bun v1.0.0 or higher (REQUIRED)

Installation

# Install globally (recommended)
bun install -g 0x1

# Or use npx for one-off commands
npx 0x1@latest new my-app

Create a New Project

# 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

Development

# 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.

Build and Deploy

# Create a production build
0x1 build

# Preview your production build locally
0x1 preview

# Deploy to production
0x1 deploy --provider=vercel

🎨 CSS Configuration

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

Configuration Options

// 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: []
  }
};

CSS Processors

🚀 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

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)

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

Performance Comparison

Advanced Configuration

// 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'
    ]
  }
};

How 0x1 Enhanced Works

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

Development vs Production

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

Migration from TailwindCSS

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:

// 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

Troubleshooting

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

🔍 Minimal Template

Ideal for: Small projects, landing pages, or developers who want full control

• Basic structure with essential files only
• Perfect for landing pages or simple sites
• Tailwind CSS included
• Extremely lightweight with minimal dependencies

🧩 Standard Template

Ideal for: Most web applications and sites

• Complete project structure with organized files
• Router implementation with multi-page support
• Component architecture for building complex UIs
• Tailwind CSS with dark mode support
• Common utility functions and helpers

🚀 Full Template

Ideal for: Production applications with advanced features

• Everything in Standard, plus:
• Built-in state management system
• Progressive Web App (PWA) support
• Service worker for offline capabilities
• Advanced components with animations
• Background sync for offline form submissions
• Push notification infrastructure

🎯 Metadata & SEO Management

0x1 provides a Next15-compatible metadata system that works automatically without requiring manual imports or function calls.

Static Metadata Export

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>;
}

Global Metadata Configuration

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',
  },
};

Page-Specific Metadata

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>;
}

Dynamic Metadata

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
}

Client/Server Directives

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

Client Components

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>
  );
}

Server Actions

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();
}

Using Server Actions in Client Components

"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>
  );
}

Automatic API Generation

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

Best Practices

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

PWA Integration

When creating a PWA project, metadata is automatically configured:

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:

Quick Migration Guide

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';

Automated Migration

Use this one-liner to migrate most imports automatically:

# Replace React imports
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'

Supported React Features

✅ Fully Supported:

• useState - State management
• useEffect - Side effects and lifecycle
• useCallback - Function memoization
• useMemo - Value memoization
• useRef - DOM references and mutable values
• JSX syntax and components
• Component props and children
• Event handlers (onClick, onChange, etc.)

✅ 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

Component Migration Example

Before (React/Next.js):

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';

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

  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 } from '0x1';
import Link from '0x1/link';
import { useRouter } from '0x1/router';

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

  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>
  );
}

🧩 Component System

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>
  );
}

Hooks API

0x1 provides a complete React-compatible hooks API:

import { 
  useState, 
  useEffect, 
  useCallback, 
  useMemo, 
  useRef,
  useFetch,
  useForm,
  useLocalStorage 
} from '0x1';

function MyComponent() {
  // State management
  const [count, setCount] = useState(0);
  
  // 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);
  
  // Data fetching (0x1 enhanced)
  const { data, loading, error } = useFetch('/api/data');
  
  // Persistent state (0x1 enhanced)
  const [theme, setTheme] = useLocalStorage('theme', 'dark');
  
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Count: {count} (Expensive: {expensiveValue})
      </button>
      {loading && <p>Loading...</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

📁 App Directory Structure

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

Special Files

• 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

Example Layout

// 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>
  );
}

🗺️ Routing & Navigation

Link Component

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>
  );
}

Dynamic Routes

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

Search Parameters & Navigation

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>
  );
}

Scroll Behavior

0x1 provides intelligent scroll management that follows modern SPA best practices:

Default Behavior:

• New navigation: Scroll to top ✅
• Browser back/forward: Preserve scroll position ✅
• Hash fragments: Scroll to target element ✅
• External links: Normal browser 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');

🎨 Styling with Tailwind CSS

0x1 includes automatic Tailwind CSS v4 processing:

Zero-Config Setup

# 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

Usage in Components

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>
  );
}

📱 Progressive Web App Support

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

PWA Features

• Auto-generated assets: Icons, splash screens, manifest
• Offline support: Service worker with intelligent caching
• Install prompts: Native app-like experience
• Theme support: Dark/light modes for your PWA
• Push notifications: Ready infrastructure

PWA Configuration Options

# Full customization
0x1 pwa --name "My App" \
         --shortName "App" \
         --themeColor "#0077cc" \
         --backgroundColor "#ffffff" \
         --description "My awesome PWA application" \
         --icons \
         --offline \
         --skipPrompts

🔧 CLI Commands

Development Options

# Start with custom port
0x1 dev --port=8080

# Enable debug logging
0x1 dev --debug

# Skip Tailwind processing
0x1 dev --skip-tailwind

Template Options

# 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

🚀 Deployment

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:

• Vercel Edge Runtime - Maximum performance at the edge
• Netlify Edge Functions - Fast global deployment
• Cloudflare Workers - Ultra-low latency worldwide
• Static hosting - Works with any static host

📊 Performance Comparison

🔮 Roadmap

Current State (v0.0.360)

• ✅ Full React Hooks API compatibility
• ✅ "use server" & "use client" directives
• ✅ Next.js-compatible Link component
• ✅ App directory structure support
• ✅ Tailwind CSS v4 integration
• ✅ PWA support with auto-generated assets
• ✅ TypeScript-first development
• ✅ Bun-optimized build system
• ✅ SSE + WebSocket live reload
• ✅ Zero-dependency architecture
• ✅ Simplified, reliable hooks implementation
• ✅ Auto-context inference with directive validation

Upcoming Features

• 🔄 Enhanced Error Boundaries: React-error-boundary & next-error-boundary compatibility
• 🔄 Streaming SSR: Server-side rendering with streaming (in progress)
• 🔄 Edge Runtime: Optimized edge deployment
• 🚀 Crypto Template: Wallet Connect, NFT viewing, DeFi dashboard components

🛠️ Configuration

0x1 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;

🔧 Troubleshooting

Global CLI Installation Issues

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"

Content Not Showing in Browser

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:

# 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.

Pending Features

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)

• 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
  • Minimal
  • Standard (drafted, todo)
  • Full (drafted, todo)
• Full ErrorBoundary support, like react-error-boundary or next-error-boundary
• 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.