> ## Documentation Index
> Fetch the complete documentation index at: https://docs.youware.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start Guide

> Learn how to create, customize, and publish your first web application with YouWare's AI-powered platform. No coding required - go from idea to live app in minutes.

<CardGroup cols={3}>
  <Card title="Time" icon="clock">
    Just 5-10 minutes to complete this guide
  </Card>

  <Card title="Account" icon="user">
    A YouWare account. [Sign up free](https://www.youware.com)
  </Card>

  <Card title="Browser" icon="globe">
    A modern web browser
  </Card>
</CardGroup>

## Get Started in 3 Steps

<Steps>
  <Step title={<a href="#step-1-create-your-first-project" style={{ textDecoration: 'none', color: 'inherit' }}>Create Your First Project</a>}>
    Describe your idea and let AI build it.
  </Step>

  <Step title={<a href="#step-2-edit--refine-your-project" style={{ textDecoration: 'none', color: 'inherit' }}>Edit & Refine</a>}>
    Chat with AI, use visual editing, or edit code directly.
  </Step>

  <Step title={<a href="#step-3-publish-your-project" style={{ textDecoration: 'none', color: 'inherit' }}>Publish</a>}>
    Go live with one click.
  </Step>
</Steps>

## Step 1: Create Your First Project

<a id="step-1-create-your-first-project" />

Describe what you want to build in the Creative Command Center.

<img src="https://mintcdn.com/youware-18c86901/MT-Zi1SRJy916f4q/images/quick-start-creative-command-center.png?fit=max&auto=format&n=MT-Zi1SRJy916f4q&q=85&s=057a53a8f0f080401ec8ba4e06ffbafb" alt="YouWare Creative Command Center interface showing the project creation form" style={{ borderRadius: '8px', border: '1px solid var(--ifm-color-emphasis-200)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }} width="1748" height="1034" data-path="images/quick-start-creative-command-center.png" />

<Info>
  **Two Ways to Get Started: Build New or Remix Existing**

  Start from scratch with your own idea, or adapt an existing project from the community.
</Info>

<Tabs>
  <Tab title="Build from Scratch">
    <Card title="Build Your Own Project" icon="zap">
      Best for original ideas or when you want full control.

      **How to Start:**

      1. **Describe your idea clearly in the input box:**

      <Tip>
        **Tips for Better Results:**

        * Be specific about features (e.g., "search functionality," "user login," "image upload")
        * Keep descriptions concise and actionable
        * Mention key requirements upfront
      </Tip>

      ```text Example Prompts theme={null}
      Good: "Create a recipe sharing app with search, user profiles, 
             and the ability to save favorites"
             
      Too vague: "Make a cooking app"
      ```

      2. **Press "Enter"** or click the generate button
      3. **YouWare builds your project** in approximately 30 seconds
    </Card>
  </Tab>

  <Tab title="Remix">
    <Card title="Remix an Existing Project" icon="users">
      Best for rapid prototyping or learning by example.

      **How to Start:**

      1. Visit the community and browse public projects
      2. Open any project page that fits your goal
      3. Click **"Remix"** to copy it into your workspace instantly
      4. Describe the changes you want
      5. YouWare adapts the project to your specifications

      ```text Remix Examples theme={null}
      "Change the color scheme to green and add a login button"
      "Replace the hero image with a video background"
      "Add a pricing table with three tiers"
      ```

      <Warning>
        **Note:** Projects created via Remix cannot be downloaded as source code. They're designed for rapid in-platform iteration and publishing.
      </Warning>
    </Card>
  </Tab>
</Tabs>

## Step 2: Edit & Refine Your Project

<a id="step-2-edit--refine-your-project" />

Once AI builds your initial project, you have multiple tools to perfect it.

### Chat with AI

<img src="https://mintcdn.com/youware-18c86901/c_637wBkPRc8B2Du/images/quick-start-ai-chat-editor.png?fit=max&auto=format&n=c_637wBkPRc8B2Du&q=85&s=ec3cbec61c90bdfde948934c6e6a409c" alt="AI chat interface showing conversational editing capabilities" style={{ borderRadius: '8px', border: '1px solid var(--ifm-color-emphasis-200)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', marginBottom: '16px' }} width="3406" height="1956" data-path="images/quick-start-ai-chat-editor.png" />

Continue the conversation with AI to make complex changes. The AI remembers your project context and can execute requests instantly.

<CardGroup cols={1}>
  <Card>
    ✅ "Add a dark mode toggle to the header"

    ✅ "Make the 'Submit' button red and more prominent"

    ✅ "Connect this form to a new database table called UserFeedback"
  </Card>
</CardGroup>

### Visual Editing

<img src="https://mintcdn.com/youware-18c86901/KeDnJ8lHctrDPUnf/images/quick-start-visual-editing.gif?s=8018f3a778e083f8730d6805e5da3937" alt="Visual editing interface demonstration showing drag-and-drop functionality" style={{ borderRadius: '8px', border: '1px solid var(--ifm-color-emphasis-200)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', marginBottom: '16px' }} width="800" height="451" data-path="images/quick-start-visual-editing.gif" />

Click any element in the preview to quickly edit text, images, colors, or layout—no coding required.

### Code Editor

<img src="https://mintcdn.com/youware-18c86901/c_637wBkPRc8B2Du/images/quick-start-code-editor-view.png?fit=max&auto=format&n=c_637wBkPRc8B2Du&q=85&s=1ab25a272179dadd5e0963ae09d9467e" alt="Code editor interface showing project file structure and editing capabilities" style={{ borderRadius: '8px', border: '1px solid var(--ifm-color-emphasis-200)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', marginBottom: '16px' }} width="3402" height="1934" data-path="images/quick-start-code-editor-view.png" />

For deeper customization, access your project's complete codebase directly.

<CardGroup cols={1}>
  <Card title="Browse Your Code" icon="folder">
    View all generated files (HTML, CSS, JavaScript) and project structure. All users can inspect the code.
  </Card>

  <Card title="Edit & Save Instantly (Subscribers)" icon="edit">
    Make changes to any file and see results instantly in the preview. The AI can further refine your manual edits.
  </Card>

  <Card title="Faster Workflow" icon="zap">
    Everything you need is in one integrated workspace—no external tools required.
  </Card>
</CardGroup>

## Step 3: Publish Your Project

<a id="step-3-publish-your-project" />

Your project is ready to share with the world.

### Go Live in One Click

<img src="https://mintcdn.com/youware-18c86901/PZ0u6t5QFPtcrS0H/images/quick-start-publish-workflow.gif?s=a55973474868a21ed9fbbf0ef7a19e50" alt="Publishing workflow demonstration showing one-click publishing" style={{ borderRadius: '8px', border: '1px solid var(--ifm-color-emphasis-200)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)', marginBottom: '16px' }} width="795" height="504" data-path="images/quick-start-publish-workflow.gif" />

<Steps>
  <Step title="Click Publish">
    Click the "Publish" button in the top right corner.
  </Step>

  <Step title="Get Your Link">
    YouWare instantly publishes your project and gives you a shareable URL (e.g., abc.youware.app).
  </Step>

  <Step title="Share">
    Share the link—it's a fully functional web application anyone can use.
  </Step>
</Steps>

### Customize Your Project

Before publishing, you can customize how your project appears:

<CardGroup cols={2}>
  <Card title="Project Title" icon="tag">
    Change the name that appears in the browser tab
  </Card>

  <Card title="Project Cover" icon="image">
    Upload a custom image for the share card
  </Card>
</CardGroup>

<Note>
  **That's it!** You've built and published your first web app. Ready to build something else?
</Note>
