Git + GitHub in Codevre: Initialize, Commit, and Push from the Browser IDE

Step 1 — Create a new Codevre project (JavaScript template)

Start from a fresh project so you can see Git status clearly. For this demo, use the JavaScript template:

Step 2 — Open the Git tool in the Codevre browser IDE

In Codevre, open the Git tool from the menu: Menu → Tools → Git.

You’ll see a header with settings and a sync button.

Step 3 — Authorize GitHub (connect GitHub to Codevre)

At the top of the Git tool, click the Sync GitHub button. This authorizes Codevre access to your GitHub repositories so it can create repos and push/pull changes.

Step 4 — Understand the repository status panel

Beneath the header, find the Repository section. In a new project it should look like:

Git: Not initialized
Branch: main
Remote: (none)
Root: /

Under that, you’ll typically see three buttons: Initialize, Connect existing, and Open GitHub repo.

Step 5 — Initialize Git locally in your Codevre project

Click Initialize. Codevre will set up local Git tracking for the project.

After initializing, you’ll see a new folder in your project: .codevre with a git.json file inside. This tracks local Git info for your Codevre project.

You’ll also notice a bunch of A markers in the file tree (Added files), and the Git tool will list the same files under Review changes → Unstaged changes.

Save your Codevre project (Ctrl + S).

Step 6 — Create a GitHub repo from Codevre

Now that Git is initialized, create a remote repo on GitHub. In the Repository section, click Create GitHub repo (it appears where the initialize button was).

Enter a project name, optional description, and choose repo visibility. For this guide, choose Private.

After creation, the Repository info updates. You should see something like:

Git: Initialized
Branch: main
Remote: https://github.com/YOUR_GITHUB_USERNAME/javascriptproject.git
Root: /

Click the Remote URL to open the GitHub repo. Until you push commits, it will appear empty, as shown below.

Save your Codevre project (Ctrl + S).

Step 7 — Stage, commit, and push your first files to GitHub

To send files to GitHub, you need to: stage changes, commit them locally, then push to the remote.

Stage all files

In Review changes, click Stage All. This moves your changes from Unstaged into Staged changes.

Create your first commit

In the commit message input, type something like Initialize Repo, then click Commit 3 staged changes.

The A indicators disappear because the changes are now committed. Scroll down to Commit history to see the new entry.

Push to GitHub (origin/main)

In Remote updates, click Push. Then refresh your GitHub repo page — your files should now appear.

Save your Codevre project (Ctrl + S).

Step 8 — Modify a file + add a README (selective staging)

Modify script.js

Open script.js and change:

console.log('Hello, world!');

to:

console.log('Hello, from Github!');

You’ll see an M (Modified) marker next to script.js in the file tree, and a matching M entry under Unstaged changes in the Git tool.

Add README.md

Create a new file named README.md and add:

Hello README

You’ll see an A next to README.md and it will appear in Unstaged changes.

Step 9 — Stage only script.js, commit, and push

In Unstaged changes, click the + icon next to script.js. This moves only that file into Staged changes, while README.md stays unstaged.

Enter a commit message like: Modify script.js console log then click Commit 1 staged change.

Now click Push. You should see a success notification (for example:Pushed (1 changes) to origin/main). On GitHub, script.js will show the new commit — but README.md will not (yet).

Save your Codevre project (Ctrl + S).

Step 10 — Stage, commit, and push README.md

To send the README to GitHub:

1. Click the + next to README.md (or use Stage All if that’s what you want).
2. Add a commit message (example: Add README).
3. Click Commit.
4. Click Push.

Tips for Git in Codevre

• Modified (M) files can be reviewed: right-click the file and choose Open diff to compare against the last commit.
• Want to remove Git from your project? Delete the .codevre folder.
• You can make multiple local commits before pushing to GitHub.
• Git state persists across reloads because Codevre tracks it in .codevre/git.json.
• D in staged/unstaged lists means the file was deleted.

What happens on pull conflicts?

When a pull hits a merge conflict, Codevre can insert both versions into the file using the standard conflict marker format:

`<<<<<<< HEAD\n` +
`${localText ?? ""}\n` +
`=======\n` +
`${remoteText ?? ""}\n` +
`>>>>>>> origin/${(remote?.branch || "main")}\n`;

Next steps

You now know the basics of Git/GitHub inside the Codevre browser IDE. Next, try opening an existing GitHub project in Codevre, or switch to the terminal tool for advanced workflows.