Quick Start

1. Install the CLI

Webui provides a powerful command-line interface to scaffold and manage your projects. Install it globally using npm:

npm install -g @webui/cli

2. Create a New Project

Scaffold a new Webui project in a single command. This will set up the directory structure, install dependencies, and configure the development server.

npx webui init my-awesome-app

This will create a directory called my-awesome-app with the following structure:

my-awesome-app/
├── public/
├── src/
│   ├── components/
│   ├── styles/
│   └── App.webui
├── webui.config.js
├── package.json
└── README.md

3. Run Locally

Navigate into your project directory and start the development server. Webui includes a hot-reloading dev server so you can see changes instantly.

cd my-awesome-app
npm run dev

Visit http://localhost:3000 in your browser to see your application.

4. Your First Component

Webui uses a declarative syntax for building UI components. Open src/App.webui and replace the content with the following:

import { Card, Button } from '@webui/core';

export default function Home() {
  return (
    <Card variant="elevated" padding="lg">
      <h1>Welcome to Webui</h1>
      <p>Your new interface is ready.</p>
      <Button onClick=handleDeploy>Get Started</Button>
    </Card>
  );
}

Next Steps

Now that you have a working project, here are some recommended next steps to dive deeper: