GitHub Adds Web-Based File Edit and Commit Feature

| by Werner Schuster Follow 9 Followers on Aug 16, 2011. Estimated reading time: 2 minutes |

New feature on GitHub: files in repositories can now be edited and committed right in the browser. Before committing, the differences can be previewd.

The feature appears as a button for logged-in GitHub users and comes in two versions: "Edit" and "Fork And Edit this file". Members of a project can edit and commit a file right away. If the user is not associated with the repository, the button becomes "Fork and Edit this file", which forks the project and and then opens the file in the editor.  

The editing feature is implemented using the ACE editor, which brings many features like syntax highlighting, line wrapping, etc to the browser. ACE is the editor that powers the Cloud9 IDE among other projects, and replaced the Canvas-based editing component in Mozilla's Bespin/Skywriter project.

ACE was introduced in late 2010, and uses a different rendering approach than the old Bespin/Skywriter which drew its text component using Canvas or other editors like CodeMirror 1 that use the contentEditable attribute that makes DOM elements editable.
ACE draws itself by assembling the currently visible text as an HTML string and setting that as the contents of its DOM element and it does so for every change as well as every scrolling and cursor movement. Sounds inefficient, but as it turns out: these kinds of DOM updates are very fast on modern browsers.
A similar approach has been adopted by CodeMirror 2, the successor to CodeMirror 1. CodeMirror's creator Marijn Haverbeke wrote up a detailed explanation for dropping contentEditable. In addition, a problem that currently plagues contentEditable is that mobile browsers fail to show on-screen keyboards for editable elements, although some like the Eclipse Orion project have experimented with workarounds.

GitHub isn't the first code hoster to implement a feature like this; earlier this year Google Code gained a browser based editor for files in source repositories.

At the moment these editor features come in addition to other Git clients like GitHub's GitHub For Mac application or the JGit-based EGit for Eclipse. The lines between plain Git client and IDE start to blur when it comes to Web-based IDEs like the already mentiond Cloud9 which comes with tight Git integration which allows to point the IDE to a GitHub repository and start working right away. Eclipse's web-based IDE Orion also comes with Git support which is based on JGit/EGit (implemented in Orion's server component), and is steadily improving, as can be seen in the features added to the latest Orion 0.3 milestone.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread


Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you