​
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.
Collaboration Dashboard

​
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

1

Invite Your Team

Go to the “Team” section and click “Invite Members.” Enter email addresses and assign roles based on what they need to access.
2

Set Permissions

Control what each team member can view and edit within your project.
3

Start Collaborating

Once team members join, they can immediately begin editing your website using the customization toolbar.
4

Use the Customization Toolbar

The toolbar provides all the tools needed to modify your website’s frontend elements collaboratively.

​
The Customization Toolbar

Real-Time Collaboration
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

Simultaneous Editing

Multiple team members can edit different parts of the same page

Component Comments

Leave feedback directly on specific elements

Version History

Track changes and revert if needed

Change Notifications

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.
Collaboration Architecture

​
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

Frontend Dashboard

Return to the main Frontend Dashboard

Component Toolbox

Explore all available components for your project

Deployment Dashboard

Prepare your website for launch