> ## Documentation Index
> Fetch the complete documentation index at: https://codinitdev-mintlify-update-changelog-codinit-dev-90028.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Workbench

> Your complete workspace for building apps - write code, see it work, and track changes

The Workbench is your main workspace in CodinIT. It's where you write code, see your app running, and check what you've changed.

## What is the Workbench?

Think of the Workbench as your desk where you have everything you need to build an app. You can write code, test it, and see what's different from before - all in one place.

<CardGroup cols={3}>
  <Card title="Code View" icon="code" href="#code-view">
    Write and organize your code files
  </Card>

  <Card title="Preview View" icon="eye" href="#preview-view">
    See your app running on different devices
  </Card>

  <Card title="Changes View" icon="git-branch" href="#diff-view">
    See what you've changed in your files
  </Card>
</CardGroup>

## Three Main Views

The workbench has three different views. You can switch between them depending on what you want to do:

<Tabs>
  <Tab title="Code View">
    ## Writing Code

    This is where you write and organize your code files.

    ### Your Files

    On the left, you see all your project files in a tree:

    * Click folders to open them
    * Click files to edit them
    * Icons show what type of file it is
    * A dot shows files you haven't saved yet

    <Callout type="info">
      **Quick Tip**: Use the search box to find files by name.
    </Callout>

    ### The Editor

    The big area in the middle is where you write code:

    * **Colors** - Your code is colored to make it easier to read
    * **Suggestions** - Get help as you type
    * **Find and replace** - Search for text and change it
    * **Edit multiple spots** - Change several places at once

    You can save your work or undo changes with the buttons at the top.

    ### Search Everything

    Need to find something in your whole project?

    * Type what you're looking for
    * See results from all files
    * Click a result to jump to that file

    ### Terminal

    At the bottom, you can type commands:

    * Open multiple terminal tabs
    * Make it bigger or smaller
    * Run commands to start your app or install tools
  </Tab>

  <Tab title="Preview View">
    ## See Your App Running

    This view shows your app working, just like it would on a real phone, tablet, or computer.

    ### Live Preview

    Watch your app in action:

    * **Instant updates** - See changes as soon as you save your code
    * **Click and test** - Try buttons and forms to make sure they work
    * **See errors** - If something breaks, you'll see what went wrong

    ### Test on Different Devices

    Make sure your app looks good everywhere:

    <CardGroup cols={2}>
      <Card title="📱 Phones" icon="mobile">
        iPhone and Android phones of different sizes
      </Card>

      <Card title="📱 Tablets" icon="tablet">
        iPads and other tablets
      </Card>

      <Card title="💻 Computers" icon="monitor">
        Laptops and desktop screens
      </Card>

      <Card title="🖥️ Big Screens" icon="tv">
        Large monitors and TVs
      </Card>
    </CardGroup>

    You can also flip devices sideways (landscape) or upright (portrait) to test both ways.

    ### Change the Size

    You can adjust the preview size:

    * Pick a device from the list
    * Drag the edges to make it bigger or smaller
    * Type in exact sizes if you need to

    ### Take Screenshots

    Capture pictures of your app:

    * Take a screenshot of the whole page
    * Save it to share with others
    * Add notes or highlights if needed
  </Tab>

  <Tab title="Changes View">
    ## See What You Changed

    This view shows you exactly what's different in your files compared to before.

    ### Compare Old and New

    See your changes side by side:

    * **Green lines** - New stuff you added
    * **Red lines** - Things you removed
    * **Highlighted words** - Specific words that changed
    * **Context** - See the code around your changes

    ### Change Summary

    Get a quick overview:

    * **Lines added** - How many new lines you wrote
    * **Lines removed** - How many lines you deleted
    * **File status** - Which files are new, changed, or deleted
    * **When** - See when you made the changes

    ### History

    Look back at previous versions:

    * **Different versions** - See how your file looked before
    * **Time stamps** - Know when each change happened
    * **Undo changes** - Go back to an older version if needed
    * **Grouped changes** - Related changes shown together

    ### Find Changed Files

    Quickly jump to files you've edited:

    * **Dropdown menu** - See all changed files
    * **Search** - Find a specific file
    * **Filter** - Show only certain types of files
    * **Badges** - See how many changes each file has
  </Tab>
</Tabs>

## How to Build an App

Here's how you use the workbench to build something:

<Steps>
  <Step title="Write Your Code">
    Use the code view to write your app. The editor helps you with colors and suggestions.
  </Step>

  <Step title="Test It">
    Switch to preview view to see your app running. Try it on different devices to make sure it looks good everywhere.
  </Step>

  <Step title="Check Your Changes">
    Use the changes view to see what you modified. Make sure everything looks right before saving.
  </Step>

  <Step title="Share It">
    Save your work to GitHub and deploy it so others can use your app.
  </Step>
</Steps>

## Other Helpful Tools

The workbench has extra tools to help you:

### Save to GitHub

Share your code with others:

* **Push to GitHub** - Save your code online
* **Create repositories** - Make a new project on GitHub
* **Branches** - Work on different versions of your code

### Manage Files

Keep your files organized:

* **Sync files** - Make sure everything is up to date
* **Download** - Save your whole project as a ZIP file
* **Import** - Bring in files from somewhere else

### Work with Others

Build apps with your team:

* **File locking** - Prevent two people from editing the same file at once
* **Notifications** - Know when someone changes a file
* **Comments** - Leave notes for your teammates

### Fix Problems

Make sure your app works well:

* **Check speed** - See how fast your app loads
* **Find errors** - Spot and fix bugs
* **Console** - See messages from your app
* **Network** - Watch how your app talks to servers

<Callout type="tip">
  **Getting Started**: Just open a file to start using the workbench. It will show you the tools you need.
</Callout>