Molecule.dev

← All templates

Design Canvas

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

Figma-lite design tool with shapes, layers, text, and image export — with built-in Stripe-backed subscription tiers

Open in Molecule

What is inside

  • auth
  • realtime-collaboration
  • search
  • export
  • layers
  • shapes
  • subscriptions

Screens (14)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Dashboard /dashboard (signed in)
  • Editor /editor/:id (signed in)
  • Templates /templates (signed in)
  • Library /library (signed in)
  • Settings /settings (signed in)
  • Profile /profile (signed in)
  • Team /team (signed in)
  • Notifications /notifications (signed in)
  • Search /search (signed in)

Data model (17 tables)

  • activities — id, actorId, action, resourceType, resourceId, metadata, createdAt
  • activity_seen_status — userId, lastSeenActivityId, updatedAt
  • comments — id, resourceType, resourceId, userId, parentId, body, editedAt, createdAt, …
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • exports — id, project_id, user_id, format, quality, scale, status, download_url, …
  • layers — id, project_id, user_id, name, visible, locked, opacity, position, …
  • project_activities — id, project_id, user_id, action, metadata, created_at
  • project_collaborators — id, project_id, user_id, role, invited_at, accepted_at
  • project_comments — id, project_id, author_id, parent_id, body, x, y, resolved, …
  • projects — id, user_id, team_id, name, width, height, canvas_data, thumbnail_url, …
  • resource_tags — id, tagId, resourceType, resourceId, createdAt
  • shapes — id, project_id, layer_id, user_id, type, x, y, width, …
  • tags — id, name, slug, color, description, createdAt, updatedAt
  • templates — id, name, category, thumbnail_url, canvas_data, is_public, created_at
  • notifications — id, user_id, kind, actor_name, actor_color, sentence, target_label, target_href, …
  • design_tokens — id, section, name, value, role, metadata, created_at
  • user_preferences — user_id, preferences, updated_at

API (14 handlers)

  • \_seed api/src/handlers/_seed.ts
  • activities api/src/handlers/activities.ts
  • collaborators api/src/handlers/collaborators.ts
  • comments api/src/handlers/comments.ts
  • design_tokens api/src/handlers/design_tokens.ts
  • exports api/src/handlers/exports.ts
  • layers api/src/handlers/layers.ts
  • notifications api/src/handlers/notifications.ts
  • profile api/src/handlers/profile.ts
  • projects api/src/handlers/projects.ts
  • search api/src/handlers/search.ts
  • shapes api/src/handlers/shapes.ts
  • team api/src/handlers/team.ts
  • templates api/src/handlers/templates.ts

Subscription tiers

free / pro / team — gated by: maxExports, maxLayers, maxProjects, maxShapes, advancedFeatures, canExport, retentionDays

Built from 23 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

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

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