BoardAPI Documentation

Appearance

Component Development ​

Advanced - 1 hour

Prerequisites: HTML, CSS, JavaScript, understanding of real-time sync concepts

Build custom interactive components for BoardAPI whiteboards.

What are Components? ​

BoardAPI components are custom UI elements that you can add to your whiteboards. They can be:

  • Interactive cards (vocabulary cards, quiz questions, polls)
  • Data visualizations (charts, graphs, dashboards)
  • Embedded tools (calculators, timers, games)
  • CRM integrations (student profiles, lesson data)

Key Features ​

  • Easy to build - Just HTML, CSS, and JavaScript
  • Framework agnostic - Use vanilla JS, Vue, React, or any framework
  • Real-time sync - Changes sync automatically to all participants
  • CRM integration - Fetch data from your backend via webhooks
  • Sandbox mode - Test with mock data before going live

How It Works ​

mermaid
graph LR
    A[Build Component] --> B[Package as ZIP]
    B --> C[Upload to BoardAPI]
    C --> D[Add to Board]
    D --> E[Use in Whiteboard]
  1. Build your component locally (HTML + CSS + JS)
  2. Package it as a ZIP with manifest.json
  3. Upload via API endpoint
  4. Add to any board via config
  5. Use it in your whiteboard!

Quick Example ​

Here's a minimal component:

manifest.json

json
{
  "name": "hello-card",
  "version": "1.0.0",
  "entry": "index.html",
  "component": {
    "width": 200,
    "height": 150
  }
}

index.html

html
<!DOCTYPE html>
<html>
<body>
  <div style="padding: 20px; background: #667eea; color: white; border-radius: 8px;">
    <h2>Hello World!</h2>
    <p>My first component</p>
  </div>
</body>
</html>

That's it! Package as ZIP and upload.

Next Steps ​

Ready to build?

Follow our 15-minute Quick Start Tutorial to create and deploy your first component!

Progressive Learning Path ​

We've designed a step-by-step learning path that builds your skills progressively:

Level 1: Fundamentals

  1. Quick Start Tutorial (15 min) - Build your first "Hello World" component

Level 2: Interactivity 2. Balloon Game Tutorial (30 min) - Add animations, state management, and event handling

Level 3: External Data 3. Restaurant Menu Tutorial (45 min) - Integrate external APIs with sandbox testing

Level 4: Production 4. Production Integration Guide (60 min) - Deploy with webhooks, monitoring, and best practices

Reference Materials

Use Cases ​

Educational Platforms ​

  • Vocabulary flashcards for language learning
  • Interactive quiz questions
  • Student progress dashboards

Business Tools ​

  • Kanban task cards
  • Customer feedback widgets
  • Sales pipeline visualizations

Creative Collaboration ​

  • Mood board images with annotations
  • Design component libraries
  • Interactive prototypes

Requirements ​

  • Basic HTML, CSS, JavaScript knowledge
  • API key from BoardAPI (get one at app.boardapi.io)
  • Node.js (optional, for local development)

Ready to start? Head to the Quick Start Tutorial →