> ## Documentation Index
> Fetch the complete documentation index at: https://shivamgoyal.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Collaboration Features
> Learn how to collaborate with team members in real-time within CodeNull
# Collaboration
CodeNull makes team collaboration simple and efficient. Add team members to your project and work simultaneously on your website's frontend using our intuitive customization toolbar.
## What You Can Do
With CodeNull's collaboration features, you can:
* **Add team members** to your projects with just a few clicks
* **Edit simultaneously** without conflicts or code merges
* **Customize your website frontend** using our intuitive toolbar
* **See changes in real-time** as team members make edits
* **Comment directly** on specific components and sections
* **Track all versions** of your project automatically
## Getting Started with Team Collaboration
Go to the "Team" section and click "Invite Members." Enter email addresses and assign roles based on what they need to access.
Control what each team member can view and edit within your project.
Once team members join, they can immediately begin editing your website using the customization toolbar.
The toolbar provides all the tools needed to modify your website's frontend elements collaboratively.
## The Customization Toolbar
The customization toolbar is your team's control center for editing the frontend:
* **Component Library**: Drag and drop components onto your pages
* **Style Editor**: Modify colors, fonts, and layouts
* **Responsive Controls**: Test how changes look on different devices
* **Live Preview**: See changes immediately as they're made
* **User Cursors**: See where team members are currently working
## Team Roles and Permissions
The project creator with full control:
* Add and remove team members
* Manage all project settings
* Control publishing rights
* Assign roles to other members
Team members who can make changes:
* Use the customization toolbar to edit the frontend
* Add and modify components
* Save and preview changes
* Comment on the project
Team members who can only view:
* See the project and all components
* Leave comments and suggestions
* Cannot make direct edits to the frontend
## Real-Time Collaboration Features
Multiple team members can edit different parts of the same page
Leave feedback directly on specific elements
Track changes and revert if needed
Get alerted when team members make changes
## Collaboration Best Practices
Coordinate with your team on who's working on which sections to avoid overlapping work, even though CodeNull handles simultaneous editing smoothly.
1. **Assign specific areas** of the website to different team members
2. **Use comments** to explain your design decisions
3. **Create named versions** after completing major features
4. **Review changes together** using the preview mode
5. **Set up regular check-ins** to discuss progress
## Real-Time Collaboration Architecture
The collaboration component is implemented to facilitate real-time data synchronization with durable storage and optimized socket handling. It uses a room-based architecture where one room can support several users working in tandem.
## How It Works
Every user is linked through an exclusive WebSocket connection, providing uninterrupted communication with the system. A central Socket Manager is responsible for these connections, handling data transfer, user availability, and message broadcasting within the respective rooms.
When a user makes changes—such as editing content, moving their cursor, or sending a message—the data is propagated to the Socket Manager. The Socket Manager then broadcasts this update to all other users connected to the same room, maintaining real-time synchronization. Simultaneously, the Socket Manager sends these updates to a persistent storage solution such as MongoDB so that data can be stored reliably.
## Technical Benefits
This architecture delivers two key advantages:
1. **Low-Latency Updates**: All connected users receive changes immediately through WebSocket connections
2. **Data Persistence**: All collaboration data is preserved in MongoDB for recovery after disconnections or system crashes
Through the use of WebSockets for real-time communication and MongoDB for long-term data storage, the system effectively handles collaborative features like live cursors, document editing, and user presence in shared workspaces. This efficient and scalable design is well-suited for multi-user collaboration environments.
## Next Steps
Return to the main Frontend Dashboard
Explore all available components for your project
Prepare your website for launch