The `capabilities` Array

In the request payload, we would want to send a list of feature flags These faeature flags are abbreviated to minimize payload size and tampering. We determine the supported functionalities in the client - The client could be a Mobile App, A web view, or web app running inside a browser. We send these to the backend API - Each type code represents a specific capability that the client can handle or is requesting to use.

"capabilities": [{
      "type": "EC"
  },
  {
      "type": "TR"
  },
  {
      "type": "SH"
  },
  {
      "type": "LB"
  },
  {
      "type": "RB"
  },
  {
      "type": "DR"
  },
  {
      "type": "AN"
  },
  {
      "type": "PI"
  },
  {
      "type": "EX"
  },
  {
      "type": "IN"
  },
  {
      "type": "SNB"
  },
  {
      "type": "CO"
  },
  {
      "type": "MI"
  },
  {
      "type": "NC"
  },
  {
      "type": "CL"
  },
  {
      "type": "IN"
  }
],

Breakdown of the codes:

Code	Explanation
`EC`	Edit Capability – ability to edit notes
`TR`	Trash/Restore – support for trashing or restoring notes
`SH`	Sharing – support for sharing notes with others
`LB`	Labels – support for labeling notes
`RB`	Reminders – support for setting reminders
`DR`	Drawing – support for drawing/sketch notes
`AN`	Annotations – support for annotations or comments
`PI`	Pinned Items – support for pinning notes
`EX`	Export – ability to export notes
`IN`	Inline Images – support for embedding images in notes
`SNB`	Sub-notebooks or Sections – hierarchical organization
`CO`	Collaboration – real-time collaboration features
`MI`	Media Integration – support for audio/video/media
`NC`	Note Colors – support for colored notes
`CL`	Checklist – support for checklist-style notes

Why Is This Sent?

This list helps the backend tailor the response to the client’s capabilities.

For example:

If the client doesn’t support drawings (DR), the server might skip sending drawing data.
If the client supports collaboration (CO), the server might include collaborator metadata.

If we are on a browser and want too determine and declare capabilities in the capabilities array (e.g., EC, TR, SH, etc.), Then, we can uses a combination of client-side feature detection, application logic, and browser APIs.

How feature detection works

🧠 1. Feature Detection via JavaScript

Web apps often use feature detection to determine what the browser supports. This is done using:

Native JavaScript APIs
Modernizr (a popular library for feature detection)

Examples:

// Check for canvas support (drawing)
const supportsCanvas = !!window.HTMLCanvasElement;

// Check for WebRTC (collaboration/media)
const supportsWebRTC = !!navigator.mediaDevices;

// Check for local storage (offline support)
const supportsLocalStorage = !!window.localStorage;

🧰 2. Browser APIs That Map to Capabilities

How some of the capabilities might map to browser APIs:

Capability	Feature	Browser API / Detection
`EC` (Edit)	Rich text editing	`contentEditable`, `execCommand` (deprecated), or modern editors
`TR` (Trash)	Local storage or sync	`localStorage`, `IndexedDB`, or service workers
`SH` (Sharing)	Web Share API	`navigator.share`
`LB` (Labels)	UI/UX feature	App logic, not browser-specific
`RB` (Reminders)	Notifications	`Notification`, `setTimeout`, `ServiceWorker`
`DR` (Drawing)	Canvas support	`HTMLCanvasElement`, `CanvasRenderingContext2D`
`AN` (Annotations)	Text selection, overlays	`Selection`, `Range`, DOM APIs
`PI` (Pinning)	UI state	App logic
`EX` (Export)	File APIs	`Blob`, `File`, `download` attribute
`IN` (Inline Images)	Drag/drop, clipboard	`FileReader`, `Clipboard API`
`SNB` (Sub-notebooks)	Hierarchical UI	App logic
`CO` (Collaboration)	WebRTC, WebSockets	`WebSocket`, `RTCDataChannel`
`MI` (Media Integration)	Media APIs	`MediaRecorder`, `getUserMedia`
`NC` (Note Colors)	CSS support	CSS variables, color pickers
`CL` (Checklist)	Form elements	`<input type="checkbox">`

🧩 3. Application-Level Capability Flags

In many cases, these capabilities are not tied to browser APIs, but rather to what the app itself supports. For example:

const capabilities = [];

if (userSettings.enableDrawing) capabilities.push({ type: "DR" });
if (userSettings.enableCollaboration) capabilities.push({ type: "CO" });

These are then sent to the backend so it knows what features to enable or disable in the response.

🧪 4. Why This Matters

Helps the backend optimize responses (e.g., skip drawing data if unsupported).
Enables progressive enhancement — newer clients get more features.
Supports A/B testing or feature rollout strategies.

Todo: Add a code snippet that simulates how a web app might build this capabilities array dynamically based on browser support.

tangoabcdelta/capabilities.md

The capabilities Array