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

# GitHub Integration

> Connect Seemodo projects to GitHub repositories. Push, pull, view diffs, clone URLs, and keep your code synced.

# GitHub Integration

Connect your Seemodo projects to GitHub for version control, collaboration with external tools, and code portability.

## Connecting your GitHub account

<Steps>
  <Step title="Go to Settings → GitHub">
    Or click the Git icon in any Project Editor.
  </Step>

  <Step title="Click Connect GitHub">
    You'll be redirected to GitHub to authorize Seemodo.
  </Step>

  <Step title="Grant access">
    Authorize Seemodo with the required scopes (`repo`, `read:org`). Choose which organizations Seemodo can access.
  </Step>

  <Step title="Connection confirmed">
    Your GitHub username and avatar appear in Settings. A green dot shows on the Git button in the Project Editor.
  </Step>
</Steps>

## Linking a project to a repository

Once your GitHub account is connected, link individual projects:

<Steps>
  <Step title="Open the project">
    Navigate to the Project Editor for the project you want to link.
  </Step>

  <Step title="Click the GitHub icon in the toolbar">
    The GitHub connection dialog opens.
  </Step>

  <Step title="Choose an organization">
    Select your personal account or any organization you have access to from the dropdown.
  </Step>

  <Step title="Confirm the connection">
    A confirmation dialog explains that the project will be synced with GitHub under the selected org/account. Click **Transfer anyway** to confirm.

    Seemodo creates a private repository automatically (named after your project). The repository is created server-side — no manual repo selection needed.
  </Step>

  <Step title="Done">
    Your project is now linked. The dialog shows the connection status.
  </Step>
</Steps>

## Syncing code

Once connected, the GitHub dialog shows sync controls:

### Push to GitHub

Sends your current Seemodo project code to the connected repository:

1. Click **Push**
2. Seemodo commits and pushes all current files
3. Success message with commit details
4. Last sync timestamp updates

### Pull from GitHub

Fetches the latest code from GitHub into your Seemodo project:

1. Click **Pull**
2. Remote changes are merged into your sandbox
3. Success message shows how many files were pulled
4. Live preview updates with the pulled code

### View Diff

Before pushing, review what changed:

1. Click **View Diff**
2. A diff viewer opens showing:
   * Added files (green)
   * Modified files (yellow)
   * Deleted files (red)
   * Line-by-line unified diff

## Clone URLs

The dialog provides clone URLs in multiple formats:

| Format    | Example                           |
| --------- | --------------------------------- |
| **HTTPS** | `https://github.com/org/repo.git` |
| **SSH**   | `git@github.com:org/repo.git`     |
| **CLI**   | `gh repo clone org/repo`          |

Click the **copy** icon next to any URL to copy it to your clipboard.

## Disconnecting

1. Open the GitHub dialog for the project
2. Click **Disconnect**
3. Confirm the disconnection

Your repository remains on GitHub — only the sync link is removed.

## Git in the Visual Designer sandbox

The Sandbox Panel (terminal icon) has a dedicated **Git tab** with sandbox-local version control:

| Feature          | Description                                                                 |
| ---------------- | --------------------------------------------------------------------------- |
| **Branch name**  | Shows current branch (typically `main`)                                     |
| **Changes**      | List of modified files with status icons (added/modified/deleted/untracked) |
| **Commit**       | Write a message and commit all changes                                      |
| **History**      | View last 20 commits with hash, author, date, and message                   |
| **Diff**         | Click any commit to see its unified diff                                    |
| **Auto-refresh** | Status polls every 10 seconds while the panel is open                       |

## Settings → GitHub

In global settings, the GitHub tab shows:

* **Connection status** — Connected (with login and avatar) or Not connected
* **Connect/Disconnect** button
* **How it works** — Step-by-step explanation

## Next steps

<CardGroup cols={2}>
  <Card title="Deployment" icon="globe" href="/en/seemodo/deployment">
    Publish your app to a live URL
  </Card>

  <Card title="Settings" icon="gear" href="/en/seemodo/settings">
    Configure all workspace settings
  </Card>
</CardGroup>