Molecule.dev

← All templates

Whiteboard

Communication · React + Node (Express) · 16 @molecule/* packages

Miro-like collaborative canvas with shapes, sticky notes, drawing, and real-time cursors — with built-in Stripe-backed subscription tiers

Open in Molecule

What is inside

  • auth
  • realtime
  • canvas
  • collaboration
  • sharing
  • subscriptions

Screens (17)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Boards /boards (signed in)
  • BoardCanvas /board/:id (signed in)
  • Templates /templates (signed in)
  • Shared /shared (signed in)
  • Settings /settings (signed in)
  • TemplateDetail /templates/:id (signed in)
  • Notifications /notifications (signed in)
  • Profile /profile (signed in)
  • Workspace /workspace (signed in)
  • Billing /billing (signed in)
  • VersionHistory /board/:id/history (signed in)
  • PresentationMode /board/:id/present (signed in)

Data model (8 tables)

  • board_collaborators — id, board_id, user_id, email, role, accepted_at, created_at, updated_at
  • board_elements — id, board_id, user_id, type, x, y, width, height, …
  • board_frames — id, board_id, user_id, name, viewport, order_index, created_at, updated_at
  • board_templates — id, owner_id, user_id, name, description, snapshot, is_system, created_at, …
  • board_versions — id, board_id, user_id, snapshot, change_summary, created_by, created_at
  • boards — id, owner_id, user_id, title, description, background, is_public, public_slug, …
  • comments — id, resourceType, resourceId, userId, parentId, body, editedAt, createdAt, …
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription

API (6 handlers)

  • boards api/src/handlers/boards.ts
  • collaborators api/src/handlers/collaborators.ts
  • elements api/src/handlers/elements.ts
  • frames api/src/handlers/frames.ts
  • templates api/src/handlers/templates.ts
  • versions api/src/handlers/versions.ts

Subscription tiers

free / pro / team — gated by: maxBoards, maxCollaborators, maxElements, advancedFeatures, canExport, retentionDays

Built from 16 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • S3_BUCKET S3 bucket for board assets
  • MAILGUN_API_KEY Mailgun API key for sharing invites

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing