Component locking

Add component locking to specific parts of your app with this React starter-kit.

What is component locking?

What is component locking? Component locking can be a valuable tool for collaborative applications. A lock or similar icon Comment end displayed over a particular component signals to other members that they are currently being edited. Based on that information they can choose to wait or move onto another task.

What are live cursors

Reduce the chance of conflicts

Component locking provides much more than a visual cue. It helps reduce the instances where users accidentally overwrite each other's work, which needs to be consolidated in the backend.

Where to use component locking

Enabling users to lock the components they are editing can add value to a range of multiplayer collaboration experiences, especially when used in combination with other collaborative features.

Some example use cases include:

  • Project management
  • Chat
  • CRM
  • Slide decks
  • Spreadsheets
  • Collaborative forms
  • Whiteboards
  • CMS
View the docs
Where to use live cursors

Component locking best practices

Release locks if the user has left,

Release locks if the user has left

Make sure that components aren’t locked indefinitely. If a user forgets they have locked a field or their connection drops, tying the lock status to a member's online status will allow it to be released - the APIs in the Spaces SDK do this by default.

Lock expiration date,

Lock expiration date

Trigger a dialogue after a certain period of inactivity to check if the user is still there and working on the locked component. Lacking any response, the lock may be automatically released.

Discover more live demos

A host of collaborative features to enhance your user experience.

Live cursors

Live cursors

Live cursors show the mouse pointer position of other collaborators. They can be useful to show what someone is currently looking at and their movement around a space.

Check it out
Avatar stack

Avatar stack

Avatar stacks show all the users collaborating within a shared space. They can help users make informed decisions by indicating the connection state of fellow collaborators.

Check it out
Member location

Member location

Member location is a way to show where fellow collaborators are located within a shared space. This can be useful for understanding what other members are working on.

Check it out
Spaces Integrations: datadog, AWS, React, Lambda, WebHooks, Apache Kafka, AWS SQS, AWS Kinesis

Integrations, whatever your stack

From Webhooks to Lambdas to stream processors like Kafka, Ably has built integrations for a range of protocols, frameworks, databases and cloud services.

View all integrations

Start building with Ably today

Join more than 900 companies already building with Ably.