Updated: 2026-03-24Language: English
WebBuilder Documentation
Split into clear route sections so each panel card has a dedicated page. This keeps the docs easier to scan while still preserving complete technical coverage.

Database Model

TableDescriptionKey Fields
pagesStores each editable page with content JSON, SEO fields, status, layout mode, and custom styling metadata.id (PK), user_id (FK), slug(unique per user), content(JSONB), status, tech_stack, global_css, timestamps
page_versionsStores immutable snapshots created when page content updates. Supports rollback in editor.id (PK), page_id (FK), user_id (FK), content(JSONB snapshot), version_number, created_at
mediaStores uploaded media metadata and file URL references used by components and pages.id (PK), user_id (FK), name, file_path, file_type, file_size, width, height, created_at

Important Files Index

FileResponsibility
app/layout.tsxGlobal layout, metadata, theme provider, toaster, analytics wiring.
app/page.tsxPublic homepage and user redirect logic to dashboard for authenticated sessions.
app/docs/page.tsxDocumentation hub with route cards and visual orientation.
app/docs/getting-started/page.tsxGetting started guide with intro, quick start, and architecture.
app/docs/guides/page.tsxOperational guides for editor workflow, auth flow, and route map.
app/docs/tutorials/page.tsxHands-on tutorials and reusable CSS recipes.
app/docs/reference/page.tsxReference area for database model, file map, and known risks.
middleware.tsSession update middleware and auth-friendly request lifecycle integration.
app/actions/pages.tsServer actions for page CRUD, versions, and page retrieval flows.
app/actions/media.tsServer actions for media list/upload/delete pipeline.
app/dashboard/page.tsxSSR dashboard entry that fetches initial pages/media data.
components/dashboard/dashboard-client.tsxInteractive dashboard shell with tabs and shared state.
components/dashboard/pages-tab.tsxPage creation, listing, template selection, and page operations UI.
components/dashboard/media-tab.tsxMedia management UI with uploads and item controls.
app/editor/[id]/page.tsxSSR editor route and page bootstrap logic.
components/builder/builder.tsxMain editor composition and lifecycle orchestrator.
components/builder/builder-header.tsxSave, preview, mode, export, and global controls.
components/builder/canvas.tsxEditable canvas surface with drag/drop and selection behaviors.
components/builder/component-library.tsxComponent definitions, defaults, and variant factory logic.
components/builder/component-renderers.tsxRuntime rendering for each supported component type.
components/builder/components-panel.tsxLeft panel library browser with add/drag interactions.
components/builder/properties-panel.tsxRight panel for properties, styles, and CSS editing.
components/builder/animation-editor.tsxAdvanced animation controls and trigger configuration.
components/builder/inline-editor.tsxInline content editing experience for selected component blocks.
components/builder/version-history.tsxVersion timeline viewer and restore action controls.
components/builder/media-picker.tsxMedia selection dialog integrated into component editing.
components/builder/page-settings-panel.tsxPage-level settings such as background, theme, and effects.
components/builder/global-css-editor.tsxPage-wide custom CSS authoring panel.
components/builder/domain-settings.tsxDomain and deployment guidance UI.
components/builder/reactbits-panel.tsxPreset advanced visual snippets for rapid enhancement.
lib/builder-store.tsCentral Zustand store for editor state and mutating actions.
lib/types.tsType system defining pages, components, styles, media, and animation objects.
lib/page-templates.tsxStarter templates used during new page creation.
lib/code-generator.tsxExport generation for Next.js/static HTML bundles and helper mappers.
lib/supabase/client.tsBrowser Supabase client setup.
lib/supabase/server.tsSSR Supabase client setup for authenticated server operations.
lib/supabase/proxy.tsMiddleware proxy helper for session synchronization.
app/auth/login/page.tsxLogin, OTP recovery, and password update UX.
app/auth/sign-up/page.tsxSignup workflow and post-signup redirect handoff.
app/auth/callback/route.tsServer callback endpoint for auth code exchange and redirects.
app/auth/sign-up-success/page.tsxVerification waiting state with auth listener fallback button.
app/auth/success/page.tsxActivation feedback page with auto-redirect behavior.
app/auth/error/page.tsxError fallback route for auth edge-case recovery.
app/preview/[id]/page.tsxPreview SSR route for viewing generated page output.
app/preview/[id]/preview-client.tsxClient-side preview and presentation interaction logic.
scripts/001_create_web_builder_tables.sqlInitial DB schema + RLS policies.
scripts/002_add_layout_and_css_columns.sqlMigration for layout_mode/global_css/custom_domain.
scripts/003_add_tech_stack_column.sqlMigration for export target stack column.

Known Risks

  • No first-class undo/redo stack; users rely on saved versions for rollback.
  • Global custom CSS is powerful but can break visual consistency if misused.
  • Large JSONB payloads can grow quickly on pages with high component density.
  • Media deletion can leave stale URLs in existing page content if not manually updated.
  • Auto-save is not fully continuous; save intent still matters for avoiding lost edits.