Getting started with Code With Me
With WebStorm, you can use the Code With Me bundled plugin that enables you to share your locally running project with anyone.
You can use Code With Me for real-time collaboration, editing code, sharing a server, and running a debugging session. Check the following video for a quick look at the session:
A Code With Me shared session involves the interaction between a host and one or more guests.
You can start a session with one of the following basic scenarios:
You can do pair-programming, in this case you share your IDE with a single participant and either use the Full sync mode, or follow each other and collaborate on different parts of code. Unlike classic pair-programming where developers share a single screen and a keyboard, you can work independently and achieve the goal faster.
You can have a teacher-students scenario where you have many participants who follow you. Let's say you need to explain a problem and show your team members different parts of your project. You can achieve that with the Force Others to Follow You mode.
You can do simultaneous multi editing of your code with other participants. In this case, participants can quickly change the code and even work on other files of the project at the same time. However, there is a limitation on how many participants can actively type together. The limit is 5, and if it's reached, WebStorm will display a popup suggesting to wait. Additionally, it might slow down the performance.
We prepared a short video tutorial on how to start working with Code With Me:
Code With Me license
Code With Me offers different types of subscriptions that you can choose at the JetBrains website.
If you have an active WebStorm subscription or other IDE subscription (except for DataGrip and Rider), you don't need a separate Code With Me license as it's already included in the IDE's license.
There are several scenarios in which you might need to activate the Code With Me license manually:
You have an active IDE or an offline activation code and your license should be automatically applied to the Code With Me plugin. However, you if continue facing problems with the activation, activate the license explicitly.
You have a commercial Code With Me license, and your company uses the JetBrains floating license server (FLS). In this case, you can activate the license the same way you would activate the WebStorm license.
Your company has commercial Code With Me licenses placed on internal lobby server. In this case, you activate the license manually additionally specifying the lobby server address.
Activate a personal license
Get a license from the JetBrains website.
In the main menu, go to .
In the Licenses dialog, select Code With Me.
From the options on the right, select Activate New License.
Depending on what IDE you have, select JetBrains Account.
Enter your credentials and click Activate.
Activate a commercial license with Floating License Server
Get a license server URL from a responsible person in your company.
In the main menu, go to .
In the Licenses dialog, select Code With Me.
From the options on the right, select Activate New License.
From the options on the right, select License server.
Add the server address and click Activate. The status of the Code with Me plugin changes to Active.
Manage a commercial license with a lobby server
Get a lobby server URL from a responsible person in your company.
Press Ctrl+Alt+S to open settings and then select .
In the Lobby server URL field specify the address of the lobby server you got from your system administrator and click OK to save the changes.
Get started as a host
You can create a link to invite other participants to collaborate on your code using your computer as the host. You can also start a debugging session, share its state and actions.
Create a session
Make sure the Code With Me plugin is enabled in the settings. Press Ctrl+Alt+S to open settings and then select . Click the Installed tab. In the search field, type Code With Me. For more information about plugins, refer to Managing plugins.
On the main toolbar, click
.
Alternatively, from the main menu, select .
WebStorm opens the Code With Me dialog.
In the Code With Me dialog, click Start Code With Me Session.
WebStorm creates a link for the session.
Ensure you have the intended access permissions for the guests. The Read-only permission is the default, but you can change it by selecting other options from the drop-down list.
Click Copy Session Link.
Send the link to guests. When a guest clicks the link, WebStorm displays a popup suggesting either to accept or decline the guest. Verify that the codes for you and your guest match.
Click Accept. The guest joins your session and you can start collaborating. You will see an additional caret at your editor and an icon on the main toolbar indicating the active guest.
Terminate an active session
On the main toolbar, click the Code With Me icon (
).From the list that opens, select End Session.
WebStorm terminates the session and disables all the guests. The link also gets disabled, and you need to create a new one to start another session.
Access the host settings
On the main toolbar, click Code With Me icon (
).Click
and from the list that opens, select Settings.
Permissions
As a host, you can configure what new guests may or may not access on your machine. For example, you can specify whether guests can edit files, use the terminal, and execute code. The permissions can be configured for the whole session or for specific guests in the session.
At any time during the session, guests can request additional permissions from the host.
Add permissions
On the main toolbar, click
and click the permissions drop-down.
When you create a session, the default option Read-only is selected.
In the Permissions list, you can select the following options:
Read-only: This permission is default and allows guests to have view-only access to files, terminal, and run actions. However, guests can still copy and paste code from the editor.
Edit files: select this permission if you want your guests to only edit files but not to access the terminal or execute code.
You can exclude some files from accessing.
Click Manage hidden files under the Access to Files field and in the Hidden Files dialog, add files that you want to exclude from access and click OK.
Full access: select this permission to give your guests full access to all files, terminal, and run actions on your machine.
Custom: select this permission to customize access for guests to files, terminal, and run actions.
When you open the Custom Permissions dialog, the options associated with the permissions will repeat choices from the previously selected permissions. You can change them accordingly and click Save.
After you configured permissions, click Start Session if you are in the process of creating a session.
Audio and video calls
When you collaborate with your peers, you can chat, use audio, video calls in the session, enable screen sharing, and forward your port.
When a session starts, 
becomes available on the main toolbar, and you can use it to initiate a voice call.
During the session, you can manage the voice calls, camera, and screen sharing.
Manage calls from the main toolbar
Click
on the main toolbar to open a list of available options and select the one you need.
You can mute or unmute the microphone, enable or disable screen sharing, camera, and open the Call tool window.
You can also control the call and camera in the Call tool window.
Manage voice calls from the Code With Me tool window
On the right toolbar, click
to open the Code With Me tool window.
If the tool window is hidden, click
on the main toolbar and select Show Call in Window.
Use the control panel on the bottom of the window to perform the necessary actions.
Manage call actions with Customize Toolbar
You can access call actions that can be added to the main toolbar. You can also change icons for toolbar actions and remove actions from the toolbar.
Right-click the main toolbar and select Customize Toolbar.
From the available options, select .
Open the Code With Me Call Actions node and select the action to which you want to make changes. Click OK to save the changes. For more information on customizing toolbar, refer to Configure main toolbar actions.
Share your screen with guests
Make sure you are on the call with other participants.
On the main toolbar, click
and select Enable Screen Sharing in Browser 
and specify the sharing source – either a specific window or the entire screen.
Your screen gets shared with other participants in the session. If you want to stop the screen sharing, click the same icon again.
If you work on a web or database project, you can give access to a port on your local machine to guests during a session.
The port forwarding is implemented using the RD protocol. The connection between a host and guests is end-to-end encrypted with TLS 1.3.
There are three communication modes between clients and the host. The mode is automatically set in the following order of priority: Direct > Peer-to-Peer > Relay. If one fails, the next one is selected.
Forward a port
From the main menu, select to open the Code With Me tool window.
In the Code With Me tool window, select the Port Forwarding tab.
Click
to add a port.Specify your port and the protocol to use.
On the guest side, the port is added to the Port Forwarding tab in the Code With Me tool window and guests can access it.
Get started as a guest
As a guest, you can follow a host during the created session and edit the code on which the host is working. You can also follow other session participants and get access to other parts of the project. Moreover, you can run and debug code on the host's machine, and work in the Terminal tool window if you have permissions to do so.
Accept an invitation
Click the received link.
The WebStorm lightweight client application will be downloaded at the run time.
You don't need to have WebStorm installed for the lightweight version to work.
Once it is installed, WebStorm displays a notification suggesting that you wait until the host accepts your request to join the session. When you are accepted, you are able to join the session. When the host’s project gets opened, you will see the active file in the editor.
At this point, you can customize the guest IDE to make your working process more convenient. You can change themes, view modes, and so on. The changes you make will only affect your guest IDE.
Leave a session
On the main toolbar, click
.In the dialog that opens, click Leave Session.
The session is terminated and the IDE closes. You can quickly return to the same session without any accepting process from the host using the same link.
Guest Code With Me setup locations
After you set up your work with Code With Me as a guest, you can check the following locations to see where the Code With Me distribution, logs, settings, and caches are located in your file system:
The Code With Me logs:
~/Library/Logs/JetBrains/<product><version>/frontend%LOCALAPPDATA%\JetBrains\<product><version>\log\frontend~/.cache/JetBrains/<product><version>/log/frontendThe Code With Me caches:
~/Library/Caches/JetBrains/<product><version>/frontend%LOCALAPPDATA%\JetBrains\<product><version>\frontend~/.cache/JetBrains/<product><version>/frontendThe Code With Me settings:
~/Library/Application\Support/JetBrains/<product><version>%APPDATA%\Roaming\JetBrains\<product><version>\~/.config/JetBrains/<product><version>The Code With Me distributions and JetBrains runtime:
~/Library/Caches/JetBrains/JetBrainsClientDist~/Library/Caches/JetBrains/CodeWithMeClientDist%LOCALAPPDATA%\JetBrains\JetBrainsClientDist%LOCALAPPDATA%\JetBrains\CodeWithMeClientDist~/.cache/JetBrains/JetBrainsClientDist~/.cache/JetBrains/CodeWithMeClientDist
Work in a shared session
Once a shared session is created and all invited participants are accepted, the editor will contain the additional carets, the main toolbar will display the guests' icons, and the Code With Me tool window with the voice calls and the chat support becomes available.
In a shared session you can try different things such as move around the host's project independently, follow other participants, use the terminal tool window, make code edits, request additional permissions from a host and so on.
Follow a participant
On the main toolbar, click
.From the list that opens, select the name of the participant you want to follow and select Follow.
Alternatively, on the main toolbar, click the participant's icon.
WebStorm places your caret on top of the participant's caret and places a frame around the editor with a small label displaying the name of the participant you are following.
Click Stop next to the name to unfollow the participant. You can always click Resume to follow the same participant once again.
You can have more than one participant following other participants. When one of the followers decides to switch focus, it will not affect the main host. This is helpful in the teacher-students use case.
Force all others to follow you
On the main toolbar, click
.From the list that opens, select your profile, and Make Everyone Follow You.
In this case, all the guest carets are placed on top of the host, and the focus will switch if the main caret is placed in the other files of the project.
The profile icons indicate a followee and a follower. At any time, a participant can stop following the main caret.
Jump to another participant
On the main toolbar, click
.From the list that opens, click the participant's name and select Jump To.
Alternatively, on the main toolbar, right-click the participant's icon and select the same option.
The caret is placed on the line where the selected guest's caret is located. This might be helpful if you want to quickly locate a certain participant's caret.
Use the pair coding mode
On the main toolbar, click
.From the list that opens, choose the name of a participant and select Pair Coding Mode.
Alternatively, on the main toolbar, right-click the participant's icon and select the same option.
The caret is placed on top of the host's caret. WebStorm places a frame around both the host's editor and the guest's editor indicating that the pair-coding mode is on.
The focus stays within the host caret even if the caret is placed in other parts of the project. This mode is usually used in the pair-programming scenario.
Terminate a shared session for a specific user
On the main toolbar, click
.From the list that opens, click a name of the participant for whom you want to terminate the session and select Remove Guest.
Alternatively, on the main toolbar right-click the participant's icon and select the same option.
WebStorm terminates the session for the selected participant and displays a notification on the guest's side. WebStorm closes the guest project and the IDE with the session.
If the guest wants to return to the shared session, they need to wait for the host's permission to join.
Collect logs for the current guest
From the main menu, select Help | Collect Host and Client Logs.
WebStorm creates a log file on your local machine. The log file contains the current project's filenames, parts of code, and detailed information on the guest's activity such as caret movements, typed symbols, invoked actions, files opened, file paths, and so on.
Collect all logs in the session
On the main toolbar, click
.In the list that opens, click
and select Submit an Issue.
In the dialog that opens, click OK to approve the data collection.
Once the log details are collected, they are automatically attached to the newly created issue in the YouTrack system.
Request permissions
By default, you, as a guest, are given the Read-only permissions. That means you can't edit files, add code, or work in the terminal during the session. WebStorm displays a proper notification every time you try to something for which you don't have permissions. You can click the link in the notification to request additional permissions from the host.
Request edit files permissions
Start editing a file. When a notification appears, click the Request to edit files link.
As a result, the host receives a notification and can either grant the permissions or decline them.
If the permissions are granted, a guest can edit files and the guest permissions are updated on the host side. The host can change permissions at any time during the session. From the host main menu, select the name of the guest and Permissions from the list of options and in the Edit Permissions dialog, update permissions accordingly.
To work with the terminal, run the application, or debug code, you need the full access permissions.
Request full access permissions
When you try to access actions that require the full access permissions, the appropriate notification will appear. For example, the terminal access permission.
Click the Request full access link.
As a result, the host receives a notification and can either grant the permissions or decline them.
If permissions are granted, the whole terminal is opened and shared. A guest can access all open tabs and create the new ones.
The host can change permissions at any time during the session. Right-click the name of the guest and select Permissions from the list of options. In the Permissions for <guest_name> window, update permissions accordingly.
Change the session name or URL of the session server
You can change the default name of the created session using the Code With Me settings.
You can also change the URL of the lobby server used for a session. It might be useful to switch to your own company's server for security purposes.
Access the Code With Me settings
From the main menu, select Settings | Tools | Code With Me
In the User name field, enter the new name for your session. The session name will be changed on the restart. Clicking Use System Name will reset the session name to the default one.
You can change the default server URL, in the Lobby server URL field.
Click OK to save the changes.