Getting Started with CodeTogether

CodeTogether allows you to host a pair programming session from your IDE (Eclipse, IntelliJ or VS Code) and let participants join the session from any modern browser. This guide includes information to help you get started, regardless of which IDE you use. For additional information, refer to the Installation Guides for EclipseIntelliJ and VS Code.

Hosting a Session

You can host a pair programming session directly from your IDE. All CodeTogether sessions are end-to-end encrypted.

Note: For details on how your data is kept secure, refer to the Security page.

Logging In

As of version 1.2, you can start a CodeTogether session without registering a CodeTogether account. In future releases, premium features will require a registered account. You can register an account on the website, or if you’re hosting from Eclipse, you have the option to register a new account when logging in.

To log in to CodeTogether, click the Log in link/button in the CodeTogether view, or use the Log in command/action.

Starting a Session

Choose any of the following options to start a pair programming session in your IDE:

Eclipse


  • In the CodeTogether view, click Start Sharing.
  • Select Help > CodeTogether > Start Sharing
  • Select text in the editor, and then click Start from the annotation that appears below the selection.

IntelliJ


  • In the CodeTogether view, click Start Sharing.
  • Select Tools > CodeTogether: Start Sharing.
  • Search for the CodeTogether: Start Sharing action.

VS Code


  • In the CodeTogether view, click Start Sharing.
  • Press Ctrl/Cmd+Shift+P and select CodeTogether: Start Sharing from the command palette.
  • Click CodeTogether in the status bar and select Start Sharing.

Stopping a Session

Choose any of the following options to stop a pair programming session in your IDE:

Eclipse


IntelliJ


  • In the CodeTogether view, click Stop Sharing.
  • Select Tools > CodeTogether: Stop Sharing.
  • Search for the CodeTogether: Stop Sharing action.

VS Code


  • In the CodeTogether view, click the Stop Sharing button .
  • Press Ctrl/Cmd+Shift+P and select CodeTogether: Stop Sharing from the command palette.
  • Click In Session in the status bar and select Stop Sharing.

Inviting Users to a Session

After starting a session, share the Invite URL with others to have them join your coding session. Participants can open the Invite URL in any modern browser—no registration, download, or installation required! In IntelliJ and VS Code, the Invite URL is automatically copied to the clipboard when the session is started, but you can always access the URL at any time.

Eclipse


  • In the CodeTogether view, click Copy Invite URL.
  • If you start a session from selected text, click Invite URL from the annotation that appears below the selection.

IntelliJ


  • In the CodeTogether view, click Copy Invite URL.
  • Search for the CodeTogether: Invite action.

VS Code


  • Press Ctrl/Cmd+Shift+P to access the command palette and select the CodeTogether: Invite command.
  • Click In Session in the status bar and select Copy Session URL to Clipboard.

Participants can also invite users to a session by clicking the Copy Invite URL button in the CodeTogether view.

Note: The number of participants that can join a session will be limited by your CodeTogether plan when generally available.

Session Timeout

Sessions automatically timeout:

  • When no participant joins for 90 minutes
  • 45 minutes after the last participant leaves
  • After 90 minutes of inactivity

Joining a Session

Even though participants join a CodeTogether session through a browser, they get a full-fledged IDE experience.

Customizing the IDE Experience

When you open the Invite URL the first time, you are prompted to customize your IDE experience—choose the look and feel of your favorite IDE, and key bindings that you’re familiar with, for a smooth coding experience in the browser. You can change these settings every time you join a session; or, from within a session, select File > Settings > CodeTogether: Change IDE Experience.

Specifying Your Name and Joining 

After opening the Invite URL in the browser (and customizing the IDE on the initial session), you are prompted for the name to use in the session. Type your name and click Join Now. To change your name during a session, click your name in the status bar or the CodeTogether view and type a new name—the name can be changed at any time, and is persisted across sessions.

Workbench Layout

Use the following options to adjust the layout to your liking:

  • Double-click on an editor tab to have it take up the entire browser window, and maximize your coding real estate.
  • Press Alt+Shift+C to collapse all side panels.
  • Select the View menu to access additional options to customize the workbench.

Participating in the Session

CodeTogether 2.0 introduced multi-file parallel editing, allowing the host and each participant to choose whether to code alone or code together in a group. Multiple groups of developers, as well as individual developers, can code or browse the shared workspace simultaneously.

To start coding, a developer simply needs to start typing, whether in a group or alone. There is no need to request control, and no confirmation dialog to step through. Several developers can be editing different files at the same time. If multiple developers are actively editing the same file, CodeTogether ensures they don’t type over each other by allowing a new developer to start editing only when typing stops for a reasonable amount of time.

Coding Together

When in a group, all members of the group share the same editing context—the same cursor position and the same selection, in the same file. Any member of the group can drive the session by opening new files, making selections or editing code. Other members in the group will follow the driver. No special process is needed to switch drivers, just open a file or start coding yourself, and the others will now be following you.

To join a group:

  • Join a session from the browser—you are automatically placed in a group of developers.*
  • When coding alone as a participant, turn on the CodeTogether toggle in the menu bar.*
  • As the host or participant, click a member name from a different group in the CodeTogether view to join that group.

* Participants are placed in the largest group in the session. If all groups are the same size, they join the host’s group.

Coding Alone

Coding alone is similar to coding in a regular IDE. The developer alone decides which files to browse or edit. Other members of the session are not disrupted, nor do they follow along as the developer opens new files and makes edits.

To code alone:

  • As a participant, turn off the CodeTogether toggle in the menu bar.
  • As a host in Eclipse or IntelliJ, click the Code on your own link in the Coding Alone section of the CodeTogether view.
  • As a host in VS Code, click Coding Alone in the CodeTogether view.

Using the CodeTogether View

To see an overview of the pair programming session, take a look at the CodeTogether view in the IDE or the browser.

In the Host IDE


Open the CodeTogether view in the host IDE as follows:

  • Eclipse—Select Window > Show View > Others > CodeTogether > CodeTogether.
  • IntelliJ—Select View > Tool Windows > CodeTogether.
  • VS Code—Select View > Open View > CodeTogether.

Shown in Eclipse

In Browser


The CodeTogether View defaults to the right side bar in the browser.

Tip: You can click the CodeTogether icon to quickly show/hide the view.

Shown in Chrome

These views have multiple sections as described below:

Coding Together

All groups of developers who are coding together are listed here, along with the file they are actively editing. This section may list multiple groups. To join a group, click any member of the group.

Coding Alone

All developers who are coding alone are listed here, along with the file they are actively editing.

Recently Modified

Displays files that were recently modified in the current session.

File Links

Click any file listed in the CodeTogether view to open that file. Opening a file does not change your current group.

Browsing Features

As a participant, you have several options to navigate the code base.

Explorer View

Participants have access to all files in the host’s workspace. You can use the Explorer view (View > Explorer) to dive into the projects in the host’s workspace. Expand any folder and double-click any resource to open it. You can also use Quick Open Ctrl/Cmd+P to filter through and open any file in the workspace. Future versions of CodeTogether will allow a host to control exactly which part of the workspace he wishes to share.

Peek/Go to Definition

Press Ctrl/Cmd while hovering over an element to view the definition of the element inline. You can click the hyperlink to navigate to the definition, whether in the same file or another. Alternatively, use the Go to Definition context menu item to navigate.

Peek References

From the context menu of an element, select Peek References to view all references to the element inline. You can examine each reference in detail without leaving your current editing context.

Documentation on Hover

Hover over an element to view corresponding documentation, if available.

Outline/Go to Symbol

The Outline view (View > Outline) displays a structural outline of the file being currently edited. You can use the Outline view to navigate within the file.

You can also use Go to Symbol (Ctrl/Cmd+Shift+O) to open up a filterable list of symbols to quickly navigate to a particular symbol in the file you’re currently editing.

File Content Search

Use the Search view (View > Search) to search for text within file contents. Regular expressions are supported and you can navigate directly to the matched section from the search results.

Selection and Cursor Annotations

If you are following the Host or another participant, their selections and cursor locations as they type are displayed as a labeled annotation.

Code Folding

When you hover the column to the left of your code, a down arrow indicates indicates the start of a section that can be collapsed. Click the down arrow to hide the block of code. The first line in the block of code remains visible with a right arrow. Click the right arrow to expand the block of code.

Editing Features

In addition to basic editing capabilities like undo, redo, and clipboard access, the following code features are available.

Content Assist

Press Ctrl+Space to invoke content assist. On accepting a proposal, you can press Tab to jump from one parameter stop to the next as you key in the parameters to a constructor or method.

Quick Fixes

When the cursor is within an error squiggly, a quick fix bulb appears if one or more fixes are available. Click the bulb and choose the desired fix action to make the recommended changes to your code.

Validation

Errors from the host workspace appear in all participant sessions. This includes errors from files that are not currently open or being edited, as long as the host has validated those files.

Errors typically appear and disappear as you type, as validation takes place on the host and the markers are transferred over to the participants.

To see a list of all errors, you can open the Problems view (View > Problems) from where you can easily navigate to the referenced files.

Formatting

You can format the entire file by using the Format Document context menu action. The ability to format selections is coming soon.

Getting Help

To chat with our dev and support teams live on Gitter, select Help > CodeTogether > Chat on Gitter or visit https://gitter.im/CodeTogether-com/community/. To report issues, use our GitHub issue tracker.