Skip to content

Teams & Collaboration

Doable is built for real-time teamwork. Multiple people can write code, inspect the design, chat, and direct the AI simultaneously: in the same project, at the same time.

This page covers workspace membership, roles, real-time presence, and the collaboration surfaces available to your team. For the technical details of how CRDTs keep everyone in sync, see Collaboration. For workspace creation and switching, see Workspaces & Projects.

Personal vs team workspaces

Every account starts with a personal workspace: just you, no teammates.

A team workspace is created from the dashboard ("New workspace") and can hold any number of members. All projects, integrations, AI keys, and settings inside a team workspace are shared according to each member's role.

You can belong to multiple workspaces. Switch between them using the switcher in the top-left corner; your URL and active-project context follow the switch.

See Workspaces & Projects for full details on creating workspaces, folder organization, and AI-key scoping.

Inviting teammates

Open Workspace Settings → Members → Invite.

  1. Enter the teammate's email address.
  2. Choose their starting role (Member or Viewer; see Roles below).
  3. Click Send invite.

They receive an email with a one-click join link (/invite/[token]). When they accept, they appear in the Members list immediately.

Alternate path, from inside the editor: open the Share menu in the editor toolbar → "Invite by email". This grants workspace access at the role you choose and opens the project for them directly.

Member roles

Doable defines four roles per workspace. Every permission listed below is enforced both in the UI (buttons hidden or disabled) and in the API (requests rejected for unauthorized roles).

Role What they can do
Owner Full control: manage members, billing, danger-zone actions (delete/transfer workspace), all settings. One workspace has exactly one owner at a time; ownership can be transferred.
Admin Everything a Member can do, plus: invite and remove members, change member roles, manage workspace AI settings, view Audit log, manage integrations. Cannot delete the workspace or transfer ownership.
Member Create, edit, and delete their own projects. Collaborate in any workspace-visible project. Cannot invite others or touch billing.
Viewer Read-only access to workspace-visible projects. Can view code, preview, and history. The AI chat input is disabled, so Viewers cannot trigger AI runs. Can leave design comments and use team chat.

Who can see what: surface matrix

Surface Owner Admin Member Viewer
Projects (view) All All All workspace-visible All workspace-visible
Projects (create / edit) Yes Yes Yes (own) No
Workspace Settings Full Full Read-only general tab No
Members page Full Full No No
Billing & plan Yes Yes No No
Audit log Yes Yes No No
Publishing / deploy Yes Yes Yes No
Sandbox / egress rules Yes Yes No No
AI chat (run agent) Yes Yes Yes No (disabled)

TBD: verify by toggling roles

Exact UI gating (which buttons are hidden vs grayed out) should be confirmed in the dev environment using the seeded test accounts: owner-pro, ws-admin, ws-member, ws-viewer (password: TestPass123!). The table above reflects documented intent; visual treatment may vary.

Real-time presence

As soon as two people open the same project, Doable's Yjs CRDT layer connects them over the WebSocket server. No setup needed.

Presence avatars

Colored avatar pills appear in the top bar of the editor for every active teammate. Hover a pill to see their name and what tab they have open.

File-tab presence dots

In the file tree (left sidebar), small colored dots appear on any file another teammate currently has open. This lets you see at a glance where everyone is working before you open a file.

Live cursors in the code editor

Each teammate gets a named, color-coded cursor in the Monaco editor. You see their insertion point and text selection update in real time. Cursors are driven by Yjs awareness; they disappear automatically when a teammate closes the tab or loses the connection.

Live cursors in Design View

When two or more people are in Design View simultaneously, remote cursor positions move across the canvas labeled with each person's name. Selecting an element shows a colored outline to all collaborators. If two people select the same element, a soft conflict warning appears (no hard lock, just a heads-up).

Activity overlay

A subtle overlay shows what a remote user is actively doing (typing a message, viewing a file, running the agent). This is the collab-activity-overlay; it appears and disappears automatically, staying out of the way when teammates are idle.

AI chat is shared

The AI chat thread is synced across everyone in the project. When one teammate asks the agent something, all collaborators see the message and the streaming response appear live. This makes "look at this" moments instant: no copy-pasting screenshots.

For the technical internals (CRDT conflict resolution, offline mode, reconnect behavior), see Collaboration.

Team chat

Every project has a built-in Team Chat channel, separate from the AI chat. Open it from the editor activity bar (the Users icon, or the Team tab).

  • Persistent history: messages are saved; you see the full history when you return.
  • @mentions: type @ to mention a teammate by name.
  • Typing indicators: a "Sara is typing…" line appears while someone composes a message.
  • In-app toast notifications: when you are in a different tab or panel, new messages pop up as a small toast in the corner so you never miss them.
  • Popout mode: click the popout icon to detach Team Chat into a floating panel, keeping it visible while you work in code or design view.

Team chat is distinct from the AI chat: use Team Chat for human-to-human discussion; use the AI chat panel to direct the agent.

Design comments

Design comments are Figma-style pins you drop directly on the visual preview canvas, ideal for feedback on layout, copy, or visuals.

For full instructions on placing, replying to, resolving, and deleting design comments, see Collaboration → Design comments and Visual Edit.

Quick summary:

  1. Enter Design View (paintbrush icon or the "Design View" button).
  2. Click Comment in the top-right of the preview.
  3. Click anywhere on the canvas to place a numbered pin.
  4. Type your message and press Comment.

Pins sync in real time to all collaborators. Click any pin to open its thread, reply, or mark it resolved.

Activity feed

The Activity panel (accessible from the editor activity bar) shows a chronological feed of team events:

  • Who edited which file and when.
  • AI agent actions ("Alice ran the agent on App.tsx").
  • Comments placed or resolved.
  • Deployments triggered.

Ephemeral activity toasts also pop up at the bottom of the editor for recent events, so you catch what's happening without opening the full feed.

Notifications

In-app

  • Team chat toasts: new messages flash as toasts when you're not in the Team tab.
  • Activity toasts: brief "Alice edited index.ts" notifications appear at the screen edge.

Email

Email notifications are sent server-side for invite events (join links). A general end-user email-notification preference screen is TBD; no self-service toggle has shipped yet. If you need to adjust email frequency, contact your platform admin.

First invite: step-by-step walkthrough

This walkthrough takes you from a solo project to a live collaborative session.

  1. Open Workspace Settings. Click the workspace name in the top-left → Workspace Settings → Members tab.

  2. Send the invite. Click Invite member, enter your teammate's email, set their role to Member, and click Send invite.

  3. Teammate accepts. They receive an email with a join link. When they click it, they land on /invite/[token], review the workspace name, and click Join. They are redirected to the dashboard.

  4. Watch them appear. Back in the Members tab, your teammate's row appears. Their status shows "Active" once they've logged in.

  5. Open the same project. You and your teammate both navigate to the same project in the dashboard and click to open it. Within a second, a colored avatar pill for your teammate appears in the editor top bar.

  6. See their cursor. Ask your teammate to open the same file. In the code editor, their named cursor appears in real time. Try typing simultaneously; Yjs merges both streams without conflicts.

  7. Start a team chat thread. Click the Team tab (Users icon) in the activity bar. Type "Hey, check this out!"; your teammate sees the message appear instantly, along with a toast notification if they are on a different tab.

  8. Leave a design comment. Switch to Design View (paintbrush icon). Click Comment, then click anywhere on the preview canvas. Type feedback and press Comment. Your teammate sees the numbered pin appear on their canvas in real time.

  9. Resolve and continue. Your teammate opens the pin, reads your comment, makes the change, and clicks Resolve (✓). The pin fades; feedback addressed, thread closed.

  • Workspaces & Projects: creating workspaces, folders, visibility levels, AI-key scoping
  • Collaboration: CRDT internals, offline mode, conflict resolution, live AI updates
  • Visual Edit: element selection, design comments in depth