Editor Guide
The editor runtime is centered around components/builder/builder.tsx and lib/builder-store.ts. It tracks selected components, layout mode, panel state, preview mode, and save state.
Left panel: component library and presets. Center: editable canvas with flow/freeform behavior. Right panel: properties, styles, and global CSS controls.
For production workflows: save regularly, use version history before major changes, and test desktop/tablet/mobile preview widths before exporting.
Authentication Flow
- 1. User signs up on /auth/sign-up with email and password.
- 2. Supabase sends verification and redirects through /auth/callback.
- 3. Callback route exchanges code for session and forwards to /auth/success or /auth/error.
- 4. Success/sign-up-success screens poll auth state and redirect to /dashboard when confirmed.
- 5. Login supports OTP-based password recovery: request code, verify code, set new password.
- 6. Middleware refreshes sessions and keeps auth cookies synchronized across app transitions.
Routes Reference
| Route | Access | Purpose |
|---|---|---|
| / | Public | Marketing homepage and CTA entry point. |
| /docs | Public | Documentation portal for product and engineering teams. |
| /auth/login | Public | Sign-in with password and OTP recovery flow. |
| /auth/sign-up | Public | Sign-up and confirmation handoff. |
| /auth/sign-up-success | Public | Verification waiting state with auto session listener. |
| /auth/success | Public | Account activation success and redirect state. |
| /auth/error | Public | Auth fallback with retry and diagnostics message. |
| /auth/callback | Public | Supabase code-exchange endpoint. |
| /dashboard | Protected | Pages and media management center. |
| /editor/[id] | Protected | Main no-code editor and configuration workspace. |
| /preview/[id] | Public/Owner | Read-only preview and presentation mode route. |