CodeSandbox was launched with the goal of making 3D configurators sharing and collaboration easier and more accessible. Nowadays it is used for documentation, interviews, prototyping, debugging, bug reporting, workshops and much more.
In the following article, we would like to introduce a feature that improves collaboration and opens up new ways to use CodeSandbox. It is called CodeSandbox Live.
You can watch an introductory video of CodeSandbox Live here:
Real-time collaboration.
From now on, you can use your sandbox for real-time collaboration. If you click on the “Go Live” button, you will receive a URL that you can share with others. You can then participate in your session and seamlessly collaborate live on the same sandbox. You will be able to create files, delete files, move files, write code all day long. You’ll see the cursors, selections and files you’re viewing, while keeping your own editor features like Intellisense.
Anyone can change the code in the same document or edit other files at the same time. Selections, cursors, and codes are dynamically updated based on input from others, using operational transforms to resolve possible conflicts.
You decide who is allowed to collaborate.
CodeSandbox Live has two modes: “Open Mode” and “Classroom Mode”. The default mode is Open Mode, which allows anyone to work with it. In Classroom Mode, you can select who is allowed to edit. This is especially useful for lectures and workshops where 30 students can view the same sandbox. You only see the cursors and selections of the people who can edit, the so-called editors.
Sharing is possible at any time.
If someone wants to continue with their own version of the sandbox, they can do so at any time simply by pressing “Fork”. You can join the session again later if you wish.
The feature is currently in beta.
It turns out in the testing phase that these kinds of features are quite difficult to test yourself or with some friends. The developers have tested this for quite some time without finding any bugs, but you may well have missed any bugs. That’s why this feature is initially only available as a beta version. If you find any problem, you can contact the company via GitHub.
Test sessions.
There is no limit to how many users can connect to a live session, but no large amounts of editors have been tested yet. In the coming weeks, the company will share live test sessions and streams on Twitter and everyone is welcome to join.
How it works.
The majority of users so far are very satisfied with the implementation of the system. Parts of ot.js are used in the frontend. In the backend the Elixir (Phoenix) server is used, which runs a custom OT implementation together with ot_ex. Each live room is a separate Elixir process and all states are stored in Redis to allow temporary server disconnection or rolling updates. There were some really interesting development challenges and it’s one of the funniest features you could build.
Thank you for visiting.