Quickstart Guide

This guide will walk you through creating your first board, adding content, and collaborating with your team in TaskForge Studio.

Before you begin, make sure you have access to TaskForge Studio. This guide assumes you’re using the hosted SaaS version.

Prerequisites

A web browser (Chrome, Firefox, Safari, or Edge)
An email address for account creation
(Optional) Team members to invite for collaboration

Step 1: Create an Organization

Navigate to TaskForge Studio and sign in using Clerk authentication. You can use:

Email and password
Social login (Google, GitHub, etc.)
Magic link via email

Create Your Organization

When you first access the dashboard, you’ll see the organization setup screen:

// The empty organization prompt from app/(dashboard)/_components/empty-org.tsx
<div className='h-full flex flex-col items-center justify-center'>
  <h2 className='text-2xl font-semibold mt-6'>Welcome to Board</h2>
  <p className='text-muted-foreground text-sm mt-2'>
    Create an organization to get started
  </p>
  <Button size='lg'>Create Organization</Button>
</div>

Click Create Organization and enter:

Organization name (e.g., “Design Team”, “Marketing”, “My Company”)
Optional organization logo

All boards are organized by organization. You need to create or join an organization before creating boards.

Access Your Dashboard

After creating your organization, you’ll be redirected to the main dashboard where you can view and manage all boards for your organization.

Step 2: Create Your First Board

Click New Board

On the dashboard (implemented in app/(dashboard)/page.tsx), click the New Board button. This creates a board with:

A unique board ID
A randomly assigned thumbnail image
Your name as the author
Current timestamp as creation date

Name Your Board

Enter a descriptive title for your board (up to 60 characters):

“Product Brainstorming”
“Q1 Planning Session”
“Design Mockup”
“Team Retrospective”

The board is created using the Convex mutation:

// From convex/board.ts:13-36
export const create = mutation({
  args: {
    orgId: v.string(),
    title: v.string(),
  },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) throw new Error('unauthorized');
    
    const randomImage = images[Math.floor(Math.random() * images.length)];
    
    const board = await ctx.db.insert('boards', {
      title: args.title,
      orgId: args.orgId,
      authorId: identity.subject,
      authorName: identity.name!,
      imageUrl: randomImage,
    });
    
    return board;
  },
});

Open the Board

Click on your newly created board to open the infinite canvas workspace.

Step 3: Using the Canvas

The canvas is your infinite workspace. Here’s how to use the drawing tools: The vertical toolbar on the left side (app/board/[boardId]/_components/toolbar.tsx) contains:

Select Tool

Icon: Mouse pointer
Shortcut: Default mode
Click to select, move, and resize objects on the canvas.

Text Tool

Icon: Text “T”
Click anywhere on the canvas to add a text layer. Double-click to edit text content.

Sticky Note

Icon: Sticky note
Add colorful sticky notes perfect for brainstorming and organizing ideas.

Rectangle

Icon: Square
Create rectangular shapes for boxes, containers, and UI mockups.

Ellipse

Icon: Circle
Draw circles and ovals for diagrams and illustrations.

Undo/Redo

Keyboard: Ctrl+Z / Ctrl+Shift+Z (Cmd on Mac)
Full history support to undo and redo changes.

Adding Content

Select a Tool

Click any tool from the toolbar. The active tool will be highlighted.

// Setting canvas state to insert mode
setCanvasState({
  mode: CanvasMode.Inserting,
  layerType: LayerType.Rectangle // or Text, Note, Ellipse
});

Click to Place

Click anywhere on the canvas to insert the selected element. The element is created with:

Default size: 100x100 pixels
Position: Where you clicked
Fill color: Last used color (default: red)

// From canvas.tsx:62-94 - Layer insertion logic
const insertLayer = useMutation(
  ({ storage, setMyPresence }, layerType, position: Point) => {
    const liveLayers = storage.get('layers');
    if (liveLayers.size >= MAX_LAYERS) return; // Max 100 layers
    
    const layerId = nanoid();
    const layer = new LiveObject({
      type: layerType,
      x: position.x,
      y: position.y,
      height: 100,
      width: 100,
      fill: lastUsedColor,
    });
    
    liveLayerIds.push(layerId);
    liveLayers.set(layerId, layer);
    setMyPresence({ selection: [layerId] }, { addToHistory: true });
  }
);

Each board is limited to 100 layers maximum. This prevents performance issues with too many objects.

Edit and Customize

Move: Click and drag objects to reposition
Resize: Select an object and drag the corner handles
Change Color: Use the color picker in the selection tools
Edit Text: Double-click text or note layers to edit content

Pan: Scroll or use trackpad/mouse to move around the canvas
Zoom: Use mouse wheel or pinch gesture (trackpad) to zoom in/out
Multi-select: Click and drag to create a selection box around multiple objects

// Canvas panning from canvas.tsx:195-200
const onWheel = useCallback((e: React.WheelEvent) => {
  setCamera((camera) => ({
    x: camera.x - e.deltaX,
    y: camera.y - e.deltaY,
  }));
}, []);

Step 4: Real-Time Collaboration

TaskForge Studio shines in collaborative scenarios. Here’s how to work with your team:

Invite Team Members

Share Board URL

Copy the board URL from your browser’s address bar:

https://your-app.com/board/[unique-board-id]

Share this URL with team members in your organization.

Add to Organization

Team members must be part of your organization to access boards. Invite them through the organization settings in Clerk.

See Live Collaboration

Once connected, you’ll see:

Live cursors: Each user’s cursor appears with their name
Presence indicators: Avatars of active users in the top toolbar
Selection highlights: Selected objects show colored outlines
Real-time updates: Changes sync instantly across all clients

// Real-time presence from liveblocks.config.ts:59-63
type Presence = {
  cursor: { x: number; y: number } | null;
  selection: string[]; // Array of selected layer IDs
};

Collaboration Features

Live Cursors

See where your teammates are pointing and working in real-time with named cursor labels.

Active Participants

The participants panel shows all users currently viewing the board with their avatars.

Selection Sharing

When someone selects an object, it displays with a colored outline unique to that user.

Instant Sync

All changes sync in real-time using Liveblocks’ CRDT-based storage with 16ms throttling.

Step 5: Manage Your Boards

Back on the dashboard, you can:

Search and Filter

// Dashboard with search and favorites from app/(dashboard)/page.tsx
interface DashboardPageProps {
  searchParams: {
    search?: string;      // Search by board title
    favorites?: string;   // Filter to show only favorited boards
  };
}

Search: Use the search bar to find boards by title
Favorites: Click the star icon to mark important boards
Filter: Toggle between all boards and favorites

Board Actions

Rename: Click the board title to rename (max 60 characters)
Favorite/Unfavorite: Star icon toggles favorite status
Delete: Remove boards you no longer need
Duplicate: Create a copy of existing boards (feature based on schema)

// Board update mutation from convex/board.ts:64-86
export const update = mutation({
  args: {
    id: v.id('boards'),
    title: v.string(),
  },
  handler: async (ctx, args) => {
    const title = args.title.trim();
    if (!title) throw new Error('Title is required');
    if (title.length > 60) throw new Error('Title cannot be more than 60 characters');
    
    await ctx.db.patch(args.id, { title: args.title });
  },
});

Next Steps

Installation Guide

Learn how to set up TaskForge Studio for development or self-hosting

Advanced Features

Explore layer types, keyboard shortcuts, and canvas operations

Team Collaboration

Best practices for remote team collaboration and workshop facilitation

API Reference

Explore the Convex backend API and Liveblocks integration

Tips for Success

Pro Tips:

Use Ctrl+Z (Cmd+Z on Mac) to undo mistakes quickly
Click and drag to create selection boxes for multiple objects
Scroll to pan around the infinite canvas
Use sticky notes for brainstorming and shapes for structure
Favorite frequently used boards for quick access

Remember:

Maximum 100 layers per board for optimal performance
Board titles limited to 60 characters
Users must be in your organization to access boards

You’re now ready to create amazing collaborative whiteboards with TaskForge Studio! Start by creating boards for your team’s brainstorming sessions, planning meetings, or design reviews.

Get Started

Core Features

Guides

Quickstart Guide

Quickstart Guide

Prerequisites

Step 1: Create an Organization

Step 2: Create Your First Board

Step 3: Using the Canvas

Select Tool

Text Tool

Sticky Note

Rectangle

Ellipse

Undo/Redo

Adding Content

Navigation Controls

Step 4: Real-Time Collaboration

Invite Team Members

Collaboration Features

Live Cursors

Active Participants

Selection Sharing

Instant Sync

Step 5: Manage Your Boards

Search and Filter

Board Actions

Next Steps

Installation Guide

Advanced Features

Team Collaboration

API Reference

Tips for Success

Build docs developers (and LLMs) love

Get Started

Core Features

Guides

​Quickstart Guide

​Prerequisites

​Step 1: Create an Organization

​Step 2: Create Your First Board

​Step 3: Using the Canvas

​Toolbar Overview

Select Tool

Text Tool

Sticky Note

Rectangle

Ellipse

Undo/Redo

​Adding Content

​Navigation Controls

​Step 4: Real-Time Collaboration

​Invite Team Members

​Collaboration Features

Live Cursors

Active Participants

Selection Sharing

Instant Sync

​Step 5: Manage Your Boards

​Search and Filter

​Board Actions

​Next Steps

Installation Guide

Advanced Features

Team Collaboration

API Reference

​Tips for Success

Build docs developers (and LLMs) love

Quickstart Guide

Prerequisites

Step 1: Create an Organization

Step 2: Create Your First Board

Step 3: Using the Canvas

Toolbar Overview

Adding Content

Navigation Controls

Step 4: Real-Time Collaboration

Invite Team Members

Collaboration Features

Step 5: Manage Your Boards

Search and Filter

Board Actions

Next Steps

Tips for Success