Pasukuru “Coco Robo” page builder

Drag-and-drop block-based page composer. Powers tenant-customizable storefronts on *.pasukuru.cocon-lab.com (multi-tenant ecommerce).

Deep-dive doc 2026-04-30 (memory id: pasukuru-page-builder-architecture-deep-dive).

Stack

  • Next.js 16 + TypeScript (FE: /var/www/pasukuru-dev/fe, repo pasukuru-fe)
  • React + dnd-kit (drag-and-drop primitive)
  • Block-system pattern (composable component schema)

Block model

Each block = { id, type, props, children? }. Types include text, hero, grid, product-card, image, video, embed, divider, custom.

Blocks render via lookup: BLOCK_REGISTRY[type] → React component. New block types register without core changes.

Editor surface

  • Left: block palette (drag source)
  • Center: live canvas (drop zone, sortable via dnd-kit SortableContext)
  • Right: inspector panel (props editor for selected block)
  • Top: device-frame switcher (mobile/tablet/desktop)

Persistence

  • Block tree serialized to JSON
  • Stored on backend (NestJS BE on :3201) per tenant
  • Versioning via timestamps + soft-delete

Multi-tenant isolation

Subdomain → tenant resolution at edge. Each tenant’s block tree scoped by tenant_id. Wildcard SSL cert covers all *.pasukuru.cocon-lab.com.

Stripe + PayPay integration

Checkout block uses tenant-scoped Stripe Connect account or PayPay merchant ID. Payment receipt block renders post-purchase.

PASS-121 merged 2026-04-30:

  • BE PR #11 + FE PR #19 → dev
  • Stripe receipt + tax handling
  • PayPay integration end-to-end

Cross-refs