Molecule.dev

← All templates

3D Model Viewer

Creative Tools · React + Node (Express) · 14 @molecule/* packages

Sketchfab-like 3D model viewer with WebGL, rotate, annotate, and embed

Open in Molecule

What is inside

  • auth
  • webgl
  • annotations
  • embed
  • search
  • comments

Screens (14)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Dashboard /dashboard (signed in)
  • ModelLibrary /models (signed in)
  • ModelViewer /models/:id (signed in)
  • Upload /upload (signed in)
  • Embed /models/:id/embed (signed in)
  • Settings /settings (signed in)
  • Annotations /models/:id/annotations (signed in)
  • ModelEdit /models/:id/edit (signed in)
  • Notifications /notifications (signed in)

Data model (9 tables)

  • activity_feed — id, user_id, model_id, action, metadata, created_at
  • annotations — id, user_id, model_id, title, description, x, y, z, …
  • comments — id, resourceType, resourceId, userId, parentId, body, editedAt, createdAt, …
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • embeds — id, user_id, model_id, width, height, auto_rotate, show_annotations, theme, …
  • models — id, user_id, name, description, file_url, file_size, format, thumbnail_url, …
  • notifications — id, user_id, type, body, href, unread, created_at
  • resource_tags — id, tagId, resourceType, resourceId, createdAt
  • tags — id, name, slug, color, description, createdAt, updatedAt

API (7 handlers)

  • activity api/src/handlers/activity.ts
  • annotations api/src/handlers/annotations.ts
  • auth api/src/handlers/auth.ts
  • avatar api/src/handlers/avatar.ts
  • embeds api/src/handlers/embeds.ts
  • models api/src/handlers/models.ts
  • notifications api/src/handlers/notifications.ts

Subscription tiers

free / pro / team — gated by: maxAnnotations, maxEmbeds, maxModels, advancedFeatures, canExport, retentionDays

Built from 14 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • S3_BUCKET S3 bucket for model storage

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