Read Guide → Webui Documentation

Introduction

Welcome to the official Webui guide. This documentation covers everything you need to know to go from a blank canvas to a fully deployed, production-ready web application. Webui bridges the gap between design and development by providing a visual-first workflow that exports clean, semantic code.

Whether you're a designer who wants to ship products independently, a developer looking to accelerate UI prototyping, or a team lead standardizing design systems, this guide will walk you through the core concepts, best practices, and advanced features.

💡 Tip

Use the Table of Contents on the left to jump between sections. The progress bar at the top tracks your reading position automatically.

Getting Started

Before diving into the builder, ensure you have a Webui account configured with your preferred team workspace. Once logged in, you'll land on the dashboard where you can create a new project or import an existing Figma/Sketch file.

Prerequisites

A valid Webui account (Free, Pro, or Enterprise)
Modern browser (Chrome 108+, Firefox 106+, Safari 16+)
Basic understanding of HTML/CSS layout concepts (Flexbox/Grid)

To create your first project, click the + New Project button in the top-right corner. Select a template or choose Blank Canvas to start from scratch.

The Visual Builder

The Visual Builder is the heart of Webui. It consists of three main panels:

Component Library (Left): Drag-and-drop elements, layouts, and UI kits.
Canvas (Center): The interactive workspace where you design and arrange elements.
Properties Panel (Right): Fine-tune spacing, typography, colors, and interactions.

Every element you place is bound to a design token system. This means changing a global spacing value or color will automatically propagate across your entire canvas.

⚠️ Warning

Avoid hardcoding pixel values directly on elements. Always use tokens (e.g., --space-md) to ensure consistency and maintainability.

Code Export

Webui generates framework-agnostic, production-ready code. You can export to React, Vue, Svelte, or vanilla HTML/CSS. The export engine prioritizes semantic structure, accessibility attributes, and performance optimization.

import { Container, Flex, Card, Button } from '@webui/react';

export default function LandingSection() {
  return (
    <Container padding="4xl">
      <Flex direction="column" gap="2xl">
        <h1>Build faster with Webui</h1>
        <p>Visual design meets clean code.</p>
        <Button variant="primary">Get Started</Button>
      </Flex>
    </Container>
  );
}

The generated code includes automatic ARIA labels, responsive breakpoints, and tree-shaking ready exports. You can preview the output in real-time using the Split View toggle in the top toolbar.

Theming & Design Tokens

Webui uses a token-first architecture. Tokens are organized into categories: colors, spacing, typography, radius, and shadows. You can define custom tokens or import from your existing design system.

To create a theme variant (e.g., Dark Mode), navigate to Settings → Themes and duplicate the base theme. Map your light/dark values using the token editor. Webui will automatically generate CSS custom properties and framework-specific theme providers.

/* Generated CSS Variables */
:root {
  --color-primary: #6C3CE1;
  --space-md: 1.5rem;
  --font-body: system-ui, sans-serif;
}

[data-theme=dark] {
  --color-primary: #8B5CF6;
  --color-surface: #0F172A;
}

Deployment

Once your project is ready, deploying is a single-step process. Webui supports direct deployment to Vercel, Netlify, Cloudflare Pages, or any static host. The platform automatically handles:

Asset optimization (WebP/AVIF, lazy loading)
Edge caching and global CDN distribution
SSL certificate provisioning
Environment variable mapping

Click Deploy → Configure to connect your provider. After deployment, Webui assigns a preview URL and provides a webhook for CI/CD integration.

Frequently Asked Questions

Can I export to my existing codebase?

Yes. Webui supports incremental exports. You can generate components in isolation and drop them into your monorepo. The CLI tool webui sync helps merge changes without overwriting local modifications.

Is the free tier sufficient for production?

The Starter plan is ideal for side projects and prototyping. For production workloads requiring custom domains, team collaboration, and advanced analytics, we recommend the Professional tier.

How does Webui handle responsive design?

All components are mobile-first by default. The builder provides visual breakpoint controls (Mobile, Tablet, Desktop, Wide). Constraints and layouts automatically adapt using CSS Grid and Flexbox under the hood.