How to Create an iOS Whiteboard App

iOS whiteboard apps let users draw, write, and brainstorm on digital canvases. Teachers use them for lessons, students take handwritten notes, and business teams sketch ideas during meetings. A good whiteboard app feels as natural as writing on paper.

Creating smooth drawing experiences requires precise touch tracking and responsive line rendering. Users expect immediate feedback when they draw, and tools for different colors and brush sizes. The app needs to handle everything from quick sketches to detailed drawings.

In this article, we will walk you through building a complete iOS whiteboard app from start to finish. You will implement a powerful drawing solution using ZEGOCLOUD iOS whiteboard SDK. The finished app will work smoothly on both iPhone and iPad devices.

How to Develop a Whiteboard App with iOS

Making whiteboard apps for iOS is harder than it looks. You need smooth drawing, good touch response, and ways for multiple people to work together. Most developers get stuck trying to make the drawing feel natural.

ZEGOCLOUD handles all the complex parts automatically. It manages touch input, draws smooth lines, and keeps users synchronized across devices. The SDK includes ready-made drawing tools, page management, and real-time collaboration features. Instead of building everything from scratch, you get professional whiteboard functionality that works right away.

In this section, we will show you how to use the SDK to build a complete whiteboard app. Users will be able to draw together, pick different tools, and move between pages easily. The finished app works well on both iPhones and iPads.

Prerequisites

Prepare these essential components before starting development:

ZEGOCLOUD developer account – Sign up
AppID and AppSign credentials.
Xcode 7.0 or later with iOS development tools.
iOS 11.0+ target devices for testing whiteboard functionality.
Valid Apple Developer account for device testing.
Basic iOS development knowledge with Objective-C or Swift.
Internet connectivity for real-time synchronization features.

Contact ZEGOCLOUD support to enable Super Board features on your account, as they’re disabled by default for new projects.

Step 1. SDK Integration and Project Setup

Start by preparing your iOS development environment with the required ZEGOCLOUD components. Since the Super Board needs both real-time communication and whiteboard-specific features, you’ll integrate two related SDKs that work together. Follow the steps below to get started:

a. Create a new iOS project in Xcode or open your existing app.

b. Configure project settings to support iOS 11.0 minimum version.

c. Enable network communication capabilities in your project settings.

d. Add the ZEGOCLOUD SDKs using CocoaPods dependency management.

Create a Podfile in your project root directory:

platform :ios, '11.0'
use_frameworks!

target 'WhiteboardApp' do
  pod 'ZegoSuperBoard'
End

Install the dependencies by running the installation command:

pod install

Once installation completes, open the generated .xcworkspace file to access your project with the integrated SDKs. Import the necessary frameworks in your view controller:

#import <ZegoExpressEngine/ZegoExpressEngine.h>
#import <ZegoSuperBoard/ZegoSuperBoard.h>

Step 2. Engine Initialization and Authentication

Configure both the Express Engine and Super Board components with your project credentials. The Express Engine provides real-time communication while the Super Board handles whiteboard-specific functionality.

Initialize the Express Engine first since the Super Board depends on its communication capabilities:

@interface ViewController () <ZegoSuperBoardManagerDelegate>
@property (nonatomic, strong) ZegoSuperBoardView *whiteboardView;
@property (nonatomic, assign) BOOL isEngineInitialized;
@end

- (void)initializeExpressEngine {
    // Configure engine profile with your project credentials
    ZegoEngineProfile *profile = [[ZegoEngineProfile alloc] init];
    profile.appID = YOUR_APP_ID; // Replace with actual App ID
    profile.appSign = @"YOUR_APP_SIGN"; // Replace with actual App Sign  
    profile.scenario = ZegoScenarioGeneral;

    // Create engine instance for real-time communication
    [ZegoExpressEngine createEngineWithProfile:profile eventHandler:self];

    NSLog(@"Express Engine initialized successfully");
}

After Express Engine setup, configure the Super Board SDK:

- (void)initializeSuperBoard {
    // Create Super Board configuration
    ZegoSuperBoardInitConfig *config = [[ZegoSuperBoardInitConfig alloc] init];
    config.appID = YOUR_APP_ID;
    config.appSign = @"YOUR_APP_SIGN";

    // Set delegate for whiteboard events
    [ZegoSuperBoardManager sharedInstance].delegate = self;

    // Initialize Super Board with configuration
    [[ZegoSuperBoardManager sharedInstance] initWithConfig:config complete:^(ZegoSuperBoardError errorCode) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"Super Board initialized successfully");
            self.isEngineInitialized = YES;
            [self setupWhiteboardView];
        } else {
            NSLog(@"Super Board initialization failed: %ld", (long)errorCode);
        }
    }];
}

Step 3. Room Management and User Sessions

Establish room-based collaboration by connecting users to shared whiteboard sessions. Multiple participants can work on the same whiteboard when they join the same room.

Create a room connection method that handles user authentication:

- (void)connectToWhiteboardRoom:(NSString *)roomID userID:(NSString *)userID {
    // Create user object for room authentication
    ZegoUser *user = [ZegoUser userWithUserID:userID];

    // Configure room settings for whiteboard collaboration
    ZegoRoomConfig *roomConfig = [[ZegoRoomConfig alloc] init];
    roomConfig.isUserStatusNotify = YES; // Enable user presence notifications

    // Connect to the collaborative whiteboard room
    [[ZegoExpressEngine sharedEngine] loginRoom:roomID user:user config:roomConfig callback:^(int errorCode, NSDictionary *extendedData) {
        if (errorCode == 0) {
            NSLog(@"Successfully connected to whiteboard room: %@", roomID);
            [self createInitialWhiteboard];
        } else {
            NSLog(@"Failed to connect to room. Error code: %d", errorCode);
        }
    }];
}

// Handle room state changes for connection monitoring
- (void)onRoomStateUpdate:(ZegoRoomState)state errorCode:(int)errorCode extendedData:(NSDictionary *)extendedData roomID:(NSString *)roomID {
    if (state == ZegoRoomStateConnected && errorCode == 0) {
        NSLog(@"Room connection established successfully");
    } else if (errorCode != 0) {
        NSLog(@"Room connection issue detected: %d", errorCode);
    }
}

Step 4. Whiteboard Interface Construction

Build the visual interface that displays whiteboard content and provides user interaction capabilities. The whiteboard view integrates directly with your app’s existing UI components.

Set up the main whiteboard view within your interface:

- (void)setupWhiteboardView {
    // Get the main whiteboard view from the SDK
    self.whiteboardView = [ZegoSuperBoardManager sharedInstance].superBoardView;

    if (self.whiteboardView) {
        // Configure whiteboard view properties
        self.whiteboardView.frame = self.view.bounds;
        self.whiteboardView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        self.whiteboardView.backgroundColor = [UIColor whiteColor];

        // Add whiteboard to your view hierarchy
        [self.view addSubview:self.whiteboardView];

        NSLog(@"Whiteboard view added to interface");
    } else {
        NSLog(@"Whiteboard view not available - check initialization");
    }
}

Design a toolbar interface for whiteboard controls:

- (void)createWhiteboardToolbar {
    // Create toolbar container
    UIView *toolbar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 80)];
    toolbar.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.8];

    // Add drawing tool buttons
    UIButton *penButton = [self createToolButton:@"Pen" action:@selector(selectPenTool)];
    UIButton *eraserButton = [self createToolButton:@"Eraser" action:@selector(selectEraserTool)];
    UIButton *textButton = [self createToolButton:@"Text" action:@selector(selectTextTool)];
    UIButton *clearButton = [self createToolButton:@"Clear" action:@selector(clearWhiteboard)];

    // Arrange buttons in toolbar
    [self arrangeToolbarButtons:@[penButton, eraserButton, textButton, clearButton] inContainer:toolbar];

    // Add toolbar to view
    [self.view addSubview:toolbar];
}

- (UIButton *)createToolButton:(NSString *)title action:(SEL)action {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    [button setTitle:title forState:UIControlStateNormal];
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [button addTarget:self action:action forControlEvents:UIControlEventTouchUpInside];
    return button;
}

Step 5. Whiteboard Creation and Configuration

Implement the core functionality for creating and configuring whiteboard instances. Each whiteboard supports multiple pages and customizable dimensions for different use cases.

Create your first whiteboard with specific configuration:

- (void)createInitialWhiteboard {
    // Configure whiteboard properties
    ZegoCreateWhiteboardConfig *config = [[ZegoCreateWhiteboardConfig alloc] init];
    config.name = @"Main Whiteboard";
    config.pageCount = 10; // Create multi-page whiteboard
    config.perPageWidth = 16; // Aspect ratio width
    config.perPageHeight = 9; // Aspect ratio height

    // Create the whiteboard with configuration
    [[ZegoSuperBoardManager sharedInstance] createWhiteboardView:config complete:^(ZegoSuperBoardError errorCode, ZegoSuperBoardSubViewModel *model) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"Whiteboard created successfully: %@", model.name);
            [self enableDrawingMode];
        } else {
            NSLog(@"Failed to create whiteboard. Error: %ld", (long)errorCode);
        }
    }];
}

- (void)enableDrawingMode {
    // Get current whiteboard view
    ZegoSuperBoardSubView *currentWhiteboard = [ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView;

    // Enable drawing interactions
    [currentWhiteboard setOperationMode:ZegoSuperBoardOperationModeDraw];

    // Set default drawing tool
    [ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolPen;
    [ZegoSuperBoardManager sharedInstance].brushColor = [UIColor blackColor];
    [ZegoSuperBoardManager sharedInstance].brushSize = 4;

    NSLog(@"Drawing mode enabled with pen tool");
}

Step 6. Drawing Tools and Interaction Features

Implement comprehensive drawing capabilities including different tools, colors, and brush sizes. Users can switch between various drawing modes to create diverse content.

Configure the pen tool with customizable properties:

- (void)selectPenTool {
    [ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolPen;
    [ZegoSuperBoardManager sharedInstance].brushColor = [UIColor blueColor];
    [ZegoSuperBoardManager sharedInstance].brushSize = 6;

    // Enable smooth handwriting mode for natural drawing
    [ZegoSuperBoardManager sharedInstance].enableHandwriting = YES;

    NSLog(@"Pen tool selected with blue color");
}

- (void)selectEraserTool {
    [ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolEraser;
    [ZegoSuperBoardManager sharedInstance].brushSize = 20; // Larger eraser size

    NSLog(@"Eraser tool selected");
}

- (void)selectTextTool {
    [ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolText;

    NSLog(@"Text tool selected - tap whiteboard to add text");
}

Add shape drawing capabilities for geometric elements:

- (void)enableShapeDrawing {
    // Rectangle drawing tool
    [ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolRect;
    [ZegoSuperBoardManager sharedInstance].brushColor = [UIColor redColor];

    NSLog(@"Rectangle tool enabled");
}

- (void)enableCircleDrawing {
    // Ellipse/Circle drawing tool
    [ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolEllipse;
    [ZegoSuperBoardManager sharedInstance].brushColor = [UIColor greenColor];

    NSLog(@"Circle tool enabled");
}

- (void)enableLineDrawing {
    // Straight line drawing tool
    [ZegoSuperBoardManager sharedInstance].toolType = ZegoSuperBoardToolLine;
    [ZegoSuperBoardManager sharedInstance].brushColor = [UIColor purpleColor];
    [ZegoSuperBoardManager sharedInstance].brushSize = 3;

    NSLog(@"Line tool enabled");
}

Step 7. Navigation and Page Management

Provide users with intuitive navigation controls for multi-page whiteboards. Navigation features allow users to flip between pages, jump to specific locations, and track their current position within the document.

Implement page navigation functionality:

- (void)setupPageNavigation {
    // Listen for page changes
    [ZegoSuperBoardManager sharedInstance].superBoardView.delegate = self;

    // Create page navigation controls
    [self createPageNavigationControls];
}

- (void)createPageNavigationControls {
    // Previous page button
    UIButton *prevButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [prevButton setTitle:@"← Previous" forState:UIControlStateNormal];
    [prevButton addTarget:self action:@selector(goToPreviousPage) forControlEvents:UIControlEventTouchUpInside];

    // Next page button  
    UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeSystem];
    [nextButton setTitle:@"Next →" forState:UIControlStateNormal];
    [nextButton addTarget:self action:@selector(goToNextPage) forControlEvents:UIControlEventTouchUpInside];

    // Page indicator label
    UILabel *pageLabel = [[UILabel alloc] init];
    pageLabel.text = @"Page 1 of 10";
    pageLabel.textAlignment = NSTextAlignmentCenter;

    // Add navigation controls to view
    [self arrangePageControls:@[prevButton, pageLabel, nextButton]];
}

- (void)goToPreviousPage {
    ZegoSuperBoardSubView *currentWhiteboard = [ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView;

    [currentWhiteboard flipToPrePage:^(ZegoSuperBoardError errorCode) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"Successfully moved to previous page");
            [self updatePageIndicator];
        } else {
            NSLog(@"Cannot go to previous page");
        }
    }];
}

- (void)goToNextPage {
    ZegoSuperBoardSubView *currentWhiteboard = [ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView;

    [currentWhiteboard flipToNextPage:^(ZegoSuperBoardError errorCode) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"Successfully moved to next page");
            [self updatePageIndicator];
        } else {
            NSLog(@"Cannot go to next page");
        }
    }];
}

// Handle page change notifications
- (void)onScrollChange:(NSInteger)currentPage pageCount:(NSInteger)pageCount subViewModel:(ZegoSuperBoardSubViewModel *)subViewModel {
    NSLog(@"Page changed to: %ld of %ld", (long)currentPage + 1, (long)pageCount);
    [self updatePageIndicator];
}

Step 8. Multi-Whiteboard Management

Enable users to create, switch between, and manage multiple whiteboards within a single session. This functionality supports complex projects that require different working areas or topics.

Implement whiteboard switching and management:

- (void)createAdditionalWhiteboard:(NSString *)whiteboardName {
    ZegoCreateWhiteboardConfig *config = [[ZegoCreateWhiteboardConfig alloc] init];
    config.name = whiteboardName;
    config.pageCount = 5;
    config.perPageWidth = 16;
    config.perPageHeight = 9;

    [[ZegoSuperBoardManager sharedInstance] createWhiteboardView:config complete:^(ZegoSuperBoardError errorCode, ZegoSuperBoardSubViewModel *model) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"New whiteboard created: %@", model.name);
            [self refreshWhiteboardList];
        } else {
            NSLog(@"Failed to create additional whiteboard");
        }
    }];
}

- (void)switchToWhiteboard:(NSString *)uniqueID {
    ZegoSuperBoardView *superBoardView = [ZegoSuperBoardManager sharedInstance].superBoardView;

    [superBoardView switchSuperBoardSubView:uniqueID complete:^(ZegoSuperBoardError errorCode) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"Successfully switched to whiteboard: %@", uniqueID);
            [self updateCurrentWhiteboardInfo];
        } else {
            NSLog(@"Failed to switch whiteboard");
        }
    }];
}

- (void)refreshWhiteboardList {
    [[ZegoSuperBoardManager sharedInstance] querySuperBoardSubViewList:^(ZegoSuperBoardError errorCode, NSArray<ZegoSuperBoardSubViewModel *> *superBoardViewList) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"Retrieved %lu whiteboards", (unsigned long)superBoardViewList.count);
            [self displayWhiteboardList:superBoardViewList];
        } else {
            NSLog(@"Failed to retrieve whiteboard list");
        }
    }];
}

Step 9. Collaboration Event Handling

Manage real-time collaboration events to keep all users synchronized during whiteboard sessions. Event handling ensures that remote user actions, whiteboard changes, and connection updates are properly managed.

Set up comprehensive event handling for collaborative features:

// Handle remote whiteboard creation
- (void)onRemoteSuperBoardSubViewAdded:(ZegoSuperBoardSubViewModel *)model {
    NSLog(@"Remote user created whiteboard: %@", model.name);
    [self refreshWhiteboardList];
    [self showNotification:[NSString stringWithFormat:@"New whiteboard added: %@", model.name]];
}

// Handle remote whiteboard deletion
- (void)onRemoteSuperBoardSubViewRemoved:(ZegoSuperBoardSubViewModel *)model {
    NSLog(@"Remote user removed whiteboard: %@", model.name);
    [self refreshWhiteboardList];
    [self showNotification:[NSString stringWithFormat:@"Whiteboard removed: %@", model.name]];
}

// Handle remote whiteboard switching  
- (void)onRemoteSuperBoardSubViewSwitched:(NSString *)uniqueID {
    NSLog(@"Remote user switched to different whiteboard");
    [self updateCurrentWhiteboardInfo];
}

// Handle SDK errors
- (void)onError:(ZegoSuperBoardError)error {
    NSLog(@"Super Board error occurred: %ld", (long)error);
    [self handleWhiteboardError:error];
}

- (void)handleWhiteboardError:(ZegoSuperBoardError)error {
    NSString *errorMessage = @"An error occurred with the whiteboard";

    switch (error) {
        case ZegoSuperBoardErrorNetworkError:
            errorMessage = @"Network connection lost. Please check your internet connection.";
            break;
        case ZegoSuperBoardErrorInvalidParam:
            errorMessage = @"Invalid operation attempted.";
            break;
        default:
            errorMessage = [NSString stringWithFormat:@"Whiteboard error: %ld", (long)error];
            break;
    }

    [self showAlertWithMessage:errorMessage];
}

Step 10. Advanced Features and Resource Management

Enhance the whiteboard experience with zoom capabilities, synchronization options, and proper resource cleanup. These advanced features improve usability while ensuring your app manages memory and connections responsibly.

Configure zoom and synchronization features:

- (void)enableAdvancedFeatures {
    // Enable zoom functionality
    ZegoSuperBoardSubView *currentWhiteboard = [ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView;
    [currentWhiteboard setOperationMode:ZegoSuperBoardOperationModeDraw | ZegoSuperBoardOperationModeZoom];

    // Enable synchronized zooming across all participants
    [ZegoSuperBoardManager sharedInstance].enableSyncScale = YES;
    [ZegoSuperBoardManager sharedInstance].enableResponseScale = YES;

    NSLog(@"Advanced features enabled: zoom and synchronization");
}

- (void)configureCustomCursor {
    // Enable custom cursor for better user experience
    [ZegoSuperBoardManager sharedInstance].enableCustomCursor = YES;
    [ZegoSuperBoardManager sharedInstance].enableRemoteCursorVisible = YES;

    // Set custom cursor image for pen tool
    ZegoSuperBoardCursorAttribute *cursorAttribute = [[ZegoSuperBoardCursorAttribute alloc] init];
    cursorAttribute.iconPath = @"https://example.com/custom-pen-cursor.png";
    cursorAttribute.offsetX = 0;
    cursorAttribute.offsetY = 0;

    ZegoSuperBoardSubView *currentWhiteboard = [ZegoSuperBoardManager sharedInstance].superBoardView.currentSuperBoardSubView;
    [currentWhiteboard setCustomCursorAttribute:ZegoSuperBoardViewCursorTypePen cursorAttribute:cursorAttribute complete:^(ZegoSuperBoardError errorCode) {
        if (errorCode == ZegoSuperBoardSuccess) {
            NSLog(@"Custom cursor configured successfully");
        }
    }];
}

Handle app lifecycle and resource cleanup:

- (void)leaveWhiteboardSession {
    // Leave the current room
    [[ZegoExpressEngine sharedEngine] logoutRoom:self.currentRoomID];

    NSLog(@"Left whiteboard session");
}

- (void)cleanupResources {
    // Uninitialize Super Board SDK
    [[ZegoSuperBoardManager sharedInstance] unInit];

    // Destroy Express Engine
    [ZegoExpressEngine destroyEngine:^{
        NSLog(@"Express Engine destroyed successfully");
    }];

    // Clear references
    self.whiteboardView = nil;
    self.isEngineInitialized = NO;
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    if (self.isEngineInitialized) {
        [self leaveWhiteboardSession];
    }
}

- (void)dealloc {
    [self cleanupResources];
}

Testing Your Whiteboard App

Install your app on multiple iOS devices to test collaborative features. Have different users join the same room ID, then create drawings, switch between pages, and verify that all actions synchronize properly across devices.

Test different drawing tools, page navigation, and whiteboard switching to ensure smooth operation under various network conditions. You can see the live demo of the web whiteboard app using ZEGOCLOUD Superboard.

Conclusion

Your iOS whiteboard app can now handle drawing, collaboration, and page management smoothly. Users can pick different tools, switch between multiple whiteboards, and work together on the same canvas. The app works well on both iPhone and iPad devices.

Building this whiteboard opens up many possibilities for your users. Teachers can create interactive lessons with students. Design teams can brainstorm visual ideas together. Support staff can draw diagrams to explain complex concepts.

The whiteboard features you built provide a solid foundation for more advanced tools. You could add shape libraries, image imports, or recording capabilities. Since the core drawing and collaboration work reliably, you can focus on features that make your app unique.

FAQ

Q1: What is an iOS whiteboard app?

It’s a collaborative drawing app that lets users sketch, write, or annotate in real time on iPhones or iPads. It’s widely used in education, remote work, and design.

Q2: What features should a whiteboard app include?

Key features include smooth drawing, eraser, multiple pages, undo/redo, real-time syncing, and multi-user collaboration.

Q3: How much does it cost to develop an iOS whiteboard app?

It depends on whether you use third-party SDKs. Building from scratch may cost $10,000–$30,000+. Using an SDK like ZEGOCLOUD can significantly reduce development time and cost.

Q4: How long does it take to build a whiteboard app?

With full custom development, it may take 4–8 weeks. Using an SDK like ZEGOCLOUD, it can be built in less than a week.

Q5: What tools or SDKs can simplify development?

ZEGOCLOUD provides a whiteboard SDK with built-in drawing tools, synchronization, and cross-device support, saving time and effort.