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.

Registration

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.

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 CodeTogether
  • 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 to access the command palette and select the CodeTogether: Start Sharing command.
  • Click CodeTogether in the status bar and select Start Sharing.

Changing Your Session Name

The session name is visible to participants before they join a session, and helps them ensure they are joining the intended session. Before you start a session, you can change the name of the session by clicking the Change link in the CodeTogether view. If you’re using VS Code, the session name can be changed in the CodeTogether extension’s settings.

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 Stop Sharing.
  • Press Ctrl/Cmd+Shift+P to access the command palette and select the CodeTogether: Stop Sharing command.
  • Click In Session in the status bar and select Stop Sharing.

Inviting Users to a Session

Once you have started a session, all you need to do is share the Invite URL with intended participants to have them join your coding session. Participants simply open the Invite URL in any modern browser to join the session—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, and you can always access the URL at any time.

Eclipse


  • Click Invite Users or Invite from the CodeTogether view, and then click the Copy icon.
  • Select text in the editor, and then click Invite URL.

IntelliJ


  • In the CodeTogether view, click Invite.
  • Select Tools > CodeTogether: Invite.
  • 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 Invite.

Participants can also invite users to a session from the Presence view in the browser. Do not copy the Invite URL from the browser’s address bar—it does not include the encryption key segment that is necessary to join a session. 

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

Managing a Session

To see an overview of the pair programming session, access the CodeTogether view in the host IDE, or the Presence view in the participant’s browser. You can easily navigate and manage the session from these views.

CodeTogether View


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.

Presence View


To open the Presence view in a participant’s browser, select View > Open View > Presence.

Tip: If the Presence view is located in a side bar, click the Presence icon to quickly show/hide the view.

The following information is shown in the CodeTogether and Presence views:

  • File Links—The active file for each member in the session is listed as a link. Click a link to open the file and follow the member. All followers are listed below the member name and file.
  • Controlling this/the IDE—The member (host or any participant) currently controlling the session. The host can revoke control by clicking the Revoke link.
    Note: To revoke control in VS Code, click Control Granted in the status bar or select CodeTogether: Manage Session from the command palette, and then select Revoke Control.
  • Recently Modified—Files recently modified in the current session.
  • Browsing—Participants not following anyone.

Participating in a Session

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

Joining the Session

When you open the Invite URL, the session name is displayed—confirm that you are joining the correct session. Then, enter your display name for the session in the Join as field and click Join Now.

Workspace Access

Participants have access to all files in the host’s workspace. Workspace resources can be browsed and opened through the Explorer view. Future versions of CodeTogether will allow a host to control exactly which part of the workspace he wishes to share.

Following the Host or Other Participants

A participant can follow the host or any other participant in the session. In follow mode, any activity in the editor by the person being followed, immediately activates the participant’s side as well. The participant can navigate away to another editor tab or open a new file, but any selection or typing by the person being followed results in focus being brought back to the editor in which the changes are being made. Participants see these changes almost instantaneously.

When joining a session, the participant follows the host by default. To follow a different member in a session, select the file associated with the member in the CodeTogether view. To quickly follow/unfollow the host, click the Follow Host toggle on the toolbar, or press Ctrl/Cmd+K, and then F.

Taking Control

Take control of the session if you want to edit code, or even if you just want to drive the session and have the host and other participants follow you.

To edit code, the easiest way to take control is to start typing in the active editor, and answer Yes when prompted. You can choose to skip this prompt by selecting the Take control automatically on keystroke checkbox.

Note: The checkbox resets when the browser is reloaded or a new session is started.

You can also request control from the host by clicking the Control & Code toggle on the toolbar (or press Ctrl/Cmd+K, and then C).

If the host is not actively typing, control is given to the participant requesting access. The participant can then edit and save files in the workspace. When a participant is making changes, the host automatically follows the participant across files, and sees the changes being made by the participant almost instantaneously. The host seamlessly regains control when they start editing a file, or by explicitly revoking access from the CodeTogether view. The participant can relinquish control by clicking the Control & Code toggle.

Workbench Management

Themes

To switch between dark and light themes select File > Settings > Color Theme.

Display Name

If you’d like to change the display name entered when joining the session, click your current name in the status bar and specify your new name, or click the Change link in the Presence view. The new name is used for all future sessions joined from the same browser. The name can be changed at any time.

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.

Browsing Features 

Browsing features can be used without control access in the host IDE. As a participant, you can unfollow the host and navigate the code base even as the host continues work in other areas of the workspace.

Explorer View

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.

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.

Editing Features

To edit code, you need Control access from the host. Besides basic editing capabilities like undo, redo, and clipboard access, the following code features are available.

Content Assist

Use 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.

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. Please remember that you must have control for the action to be enabled. 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.