Docs › Getting Started › Introduction

Introduction v2.4.0

Webui is a modern, framework-agnostic design-to-code platform that empowers developers and designers to build production-ready interfaces at unprecedented speed. This documentation covers everything from installation to advanced architecture patterns.

ℹ️

New to Webui? We recommend starting with the Quick Start guide to set up your first project in under 5 minutes.

Why Webui?

Traditional UI development often creates friction between design and implementation. Webui bridges that gap by:

Generating clean, semantic, and accessible HTML/CSS/JS
Providing a comprehensive component library with zero runtime overhead
Supporting multiple frontend frameworks (React, Vue, Svelte, Vanilla)
Enforcing consistent design tokens across your entire organization

Installation

Webui requires Node.js 18+ and npm, yarn, or pnpm. Install the CLI globally:

                    Terminal
                    
                
# Using npm
npm install -g @webui/cli

# Using yarn
yarn global add @webui/cli

# Using pnpm
pnpm add -g @webui/cli

Verify the installation by checking the version:

Terminal

webui --version
# Output: 2.4.0

Quick Start

Create a new project using the built-in scaffolding tool:

                    Terminal
                    
                
webui init my-app
? Select framework: React (TypeScript)
? Enable routing: Yes
? Enable SSR: No

cd my-app
webui dev

# Server running at http://localhost:3000

💡

Pro Tip Run webui init without arguments to launch an interactive setup wizard that tailors the boilerplate to your exact stack.

Project Structure

A standard Webui project follows a predictable, scalable architecture:

                    Directory Tree
                    
                
my-app/
├── src/
│   ├── components/   # Reusable UI primitives
│   ├── layouts/      # Page templates
│   ├── pages/        # Route-aware views
│   ├── tokens/       # Design system variables
│   └── index.ts      # Entry point
├── public/           # Static assets
├── webui.config.js   # Build & plugin config
└── package.json

Configuration

Customize Webui's behavior using webui.config.js. Here's a typical setup:

                    JavaScript
                    
                
export default {
  framework: 'react',
  outDir: 'dist',
  plugins: ['@webui/plugin-animated', '@webui/plugin-i18n'],
  designTokens: {
    colors: { primary: '#6C3CE1', accent: '#00D4AA' },
    spacing: [4, 8, 12, 16, 24, 32, 48, 64],
    radius: 8,
    shadows: true
  },
  build: {
    minify: true,
    sourcemap: false,
    target: 'es2022'
  }
}

CLI Commands

The Webui CLI provides essential commands for development and production:

Command	Description	Flags
webui dev	Starts local development server with HMR	--port 3000, --open
webui build	Compiles optimized production bundle	--minify, --sourcemap
webui preview	Serves production build locally	--host
webui deploy	Deploys to configured provider	--env prod
webui doctor	Checks config and dependencies	--verbose

⚠️

Production Builds Always run webui doctor before deploying to catch deprecated APIs or missing dependencies early.

Next Steps

Now that you've set up your environment, explore the core concepts:

Components & Primitives - Learn how to compose UIs efficiently
Design Tokens - Centralize theming and spacing
Routing & Navigation - Set up client-side or file-based routing

Have questions or found a bug? Join our Discord or open an issue on GitHub.