Concurrent editing.

Explore how to co-create in real time with your teammates and individual collaborators on the Editor X canvas.

Explore how to co-create in real time with your teammates and individual collaborators on the Editor X canvas.

Let’s take a look at how concurrent editing—AKA “co-creating in real time”—works on Editor X.


On Editor X, you can create side-by-side in the editor with multiple site collaborators and teammates.

To find out how to invite people to join your site and assign custom roles and permissions, watch the previous videos in this series.


Inside the editor, you’ll always see your own avatar here in the top left… and when other collaborators join you, you’ll see their avatars appear in the top right.


Hover on an avatar to see their name and email address. If they’re currently active on the site, you’ll also see which page they’re on.


If a collaborator has been inactive for a while, their avatar will fade, and on hover, you’ll see when they were last active.


If a collaborator turns on dev mode, you’ll see this symbol appear next to their avatar. Multiple collaborators can open dev mode together, but currently only one person can edit the site code at one time. All others who enter dev mode afterwards, will be in Read Only mode.


When you click an avatar, you’ll automatically follow that person to whichever page or breakpoint they’re on—and scroll to the exact element they’re working on.


...And from the Pages panel, you’ll also see who’s working on which page.


Notice the color coding here too.  “Gal’s” avatar is orange and when he’s working on a specific element, it will be highlighted in this same color, with his name tag beside it. “Sharon’s” avatar and element highlighting however, are purple. This helps to keep things clear when you have multiple people working on the canvas at the same time.


Every single change that happens in the editor is visible in real time to everyone working on the site. For example, if “Gal” changes this text, we’ll see the change reflected immediately on our screen.


Now let’s head back to the desktop to take a closer look at what happens when a few people are editing the same part of a site at the same time. On this About page, “Gal” and I can work side-by-side.


I can see exactly where he is from this orange highlight and I can jump right in to work on the text element as well.


If “Gal” now makes a dramatic change, like deleting the parent container of my element, I’ll get a notification at the bottom of the screen.


I could then, of course, reach out to him via live comments to question his decision.

To learn more about live comments, watch the next video in this series.


Ok… so back on the homepage, let’s switch out one of our images to see what happens when we reverse an action while collaborating.


If we use the Undo function—either up here in the top right, or using keyboard commands, we’ll just delete our own previous site actions—in this case, changing the image.


On the other hand, restoring a site version will undo the actions of all site collaborators.


Let’s look at how this works. From Site, up here in the top bar, select Site History to see a list of all previous versions of the site.


From here, you can rename versions, and click the arrow to view a particular version of this site’s history.


Remember, that if you click Restore, this will undo all site actions by all site collaborators that happened after this moment in history—and everyone will be asked to refresh the site to continue.

That’s a pretty big deal, so it’s a good idea to set specific roles and permissions for each collaborator on a site—so that only certain people have such global controls.


Concurrent editing truly transforms the way agencies, design teams and individual collaborators work together, to scale up and bring each creation to production smoothly and efficiently.


To learn more about other collaboration tools on Editor X, continue watching this series.

NEXT VIDEOS

Thumbnail for video showing stills of two male hosts beside the title Discover Editor X with Product Manager, Sebi Vidret.

Watch a site come to life step by step on Editor X and get answers to FAQs.

Play icon
Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

Discover your workspace and get an introduction to your advanced layouting tools.

Play icon
Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

Learn the basics of creating a site on Editor X with a step by step walkthrough.

Play icon
Video about how to use sections on Editor X

Learn how to add new sections, rearrange them and flip them to vertical.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Thumbnail image with a dusty pink background. An outline of the Editor X workspace is in the center and within it you see the concurrent editing icon of 2 cursors side by side.

LESSONS & EXERCISES

Concurrent Editing

Explore the ins and outs of co-creating on Editor X, with multiple collaborators working side-by-side in the editor.

Video about how to communicate in real time on the Editor X canvas.

VIDEO LIBRARY

Live Comments

Learn how to communicate live on the Editor X canvas.

Thumbnail image with a dusty pink background. 5 box outlines are visible with the team accounts icon in the center, of 2 avatars side by side.

LESSONS & EXERCISES

Team Accounts

Find out how to set up a team account to give teammates access to every site in your account.

Video about how to assign and manage Roles & Permissions on Editor X.

VIDEO LIBRARY

Roles & Permissions

Discover how to assign and manage roles & permissions.

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.