Home / Guides / No-Code Website Builder

Event-Driven Microservices with Serverless Rendering

How to Architect a No-Code Website Builder

This architecture leverages an event-driven microservices pattern to manage the complex interplay between real-time editor state, dynamic site generation, and multi-tenant asset management. It prioritizes scalability, performance, and a highly responsive user experience across both the builder and the generated websites.

Recommended architecture pattern

Recommended tech stack

Frontend

React with Zustand for state management and Konva.js for canvas-based drag-and-drop editor, enabling rich, performant UI interactions.

Backend

Node.js (NestJS framework) for API Gateways and service orchestration, leveraging its non-blocking I/O for real-time communication and API efficiency.

Database

PostgreSQL for structured data (user accounts, site metadata, component configurations) due to its ACID compliance and JSONB support for flexible schemas; AWS S3 for all static assets.

Real-time / Messaging

Apache Kafka for durable event streaming between microservices and AWS IoT Core/WebSockets (Socket.io) for real-time editor collaboration and live updates.

Infrastructure

Kubernetes (EKS/GKE) for orchestrating microservices, autoscaling, and managing deployments; Cloudflare for CDN, DNS, and WAF protection.

Authentication

Auth0 for managed user authentication, authorization (RBAC), and multi-tenancy support, reducing security overhead.

Key third-party services

Stripe for payment processing and subscription management; Cloudinary for image/video optimization and transformations; SendGrid for transactional emails; AWS S3 for raw asset storage.

Core components

Key data model

Entity	Key fields	Notes
User	id, email, password_hash, subscription_plan_id, created_at	Indexes on email and subscription_plan_id
Site	id, user_id, name, subdomain, custom_domain, status, published_version_id	Foreign key to User, unique index on subdomain, custom_domain
SiteVersion	id, site_id, version_number, components_json, styles_json, assets_manifest_json, created_at, status	Foreign key to Site, JSONB for component/style data
Asset	id, user_id, site_id, type, original_url, optimized_url, metadata_json, created_at	Foreign keys to User and Site, stores Cloudinary/S3 URLs
ComponentTemplate	id, name, type, schema_json, default_config_json, preview_image_url	Stores definitions and default properties of draggable components
SubscriptionPlan	id, name, price_monthly, features_json, stripe_product_id	Lookup table for available subscription tiers
PaymentTransaction	id, user_id, subscription_plan_id, amount, currency, status, stripe_charge_id, created_at	Records payment history, foreign keys to User and SubscriptionPlan

Core API endpoints

Method	Endpoint	Purpose
POST	/api/sites	Create a new website project for the authenticated user
GET	/api/sites/{siteId}/editor	Load a specific site's configuration data for the editor UI
PUT	/api/sites/{siteId}/version	Save a new version of the site configuration from the editor
POST	/api/sites/{siteId}/publish	Trigger the site rendering and deployment process to CDN
POST	/api/assets/upload	Upload new media assets (images, videos) to the asset management service
PUT	/api/sites/{siteId}/domain	Configure or update a custom domain for a specific website
GET	/api/templates	Retrieve a list of available website templates for users
POST	/api/auth/register	Register a new user account

Scaling considerations

• Real-time editor collaboration: WebSocket servers must be horizontally scalable and state-aware (e.g., sticky sessions, distributed state management for active document).
• Site generation & publishing: Utilize serverless functions (AWS Lambda/Google Cloud Functions) for rendering tasks to handle burst loads efficiently and cost-effectively.
• Asset storage & delivery: Leverage a global CDN (Cloudflare) with S3 as origin for user-uploaded assets to ensure low latency and high availability worldwide.
• Database contention for site data: Implement read replicas for PostgreSQL and consider sharding or partitioning for `SiteVersion` table as it grows significantly.
• Custom domain management: Automate DNS record provisioning (CNAMEs, A records) and SSL certificate issuance/renewal via a robust DNS provider API.
• Multi-tenancy resource isolation: Implement strict resource quotas and rate limiting per user/site to prevent noisy neighbor issues and abuse.

Security & compliance

• GDPR/CCPA: Implement robust data privacy controls, explicit consent for data collection, and provide clear mechanisms for data access and deletion requests.
• PCI-DSS: Offload all payment processing to a compliant third-party (Stripe) to avoid handling sensitive cardholder data directly.
• XSS/CSRF Protection: Rigorously sanitize all user-generated content (e.g., custom HTML/CSS inputs) and implement CSRF tokens on all state-changing API requests.
• DDoS & Web Application Firewall (WAF): Utilize Cloudflare's WAF and DDoS protection for both the builder platform and all published user sites to mitigate common web attacks.
• Access Control: Implement fine-grained Role-Based Access Control (RBAC) to ensure users can only modify their own sites and assets, and collaborators have appropriate permissions.

Estimated monthly cost

Want a tailored build estimate? Try the free software cost estimator or the tech stack finder.

Suggested build plan

Phase	Timeframe	Deliverables
Phase 1: Core Editor & Basic Site Generation	Weeks 1-8	User authentication, core drag-and-drop editor, basic component library, single-page site saving, static HTML export.
Phase 2: Asset Management, Publishing & Hosting	Weeks 9-16	User asset uploads (images), asset optimization, site publishing to CDN, subdomain hosting, version history.
Phase 3: Custom Domains, Templates & Billing	Weeks 17-24	Custom domain mapping, pre-built site templates, subscription plans, Stripe integration, user dashboard.
Phase 4: Collaboration, SEO & Performance	Weeks 25-32	Real-time editor collaboration, advanced SEO settings, site analytics integration, performance optimizations for generated sites.

Frequently asked questions

How do you handle custom domains for user-generated sites?

We use a dedicated Custom Domain Service that integrates with a DNS provider API (e.g., Cloudflare) to programmatically create CNAME records pointing to our CDN. Users verify domain ownership, and we automate SSL certificate issuance via Let's Encrypt.

How do you ensure the generated websites are fast and SEO-friendly?

The Rendering Engine generates optimized static HTML, CSS, and JavaScript. We implement image optimization (WebP, lazy loading), minify assets, and deploy to a global CDN. For SEO, we allow users to configure meta tags, sitemaps, and ensure semantic HTML output.

What's the strategy for real-time collaboration in the editor?

We use WebSockets (Socket.io) to synchronize editor state across multiple users. Operational Transformation (OT) or Conflict-Free Replicated Data Types (CRDTs) can be implemented on top to handle concurrent changes and prevent data loss, with Kafka backing the event stream for durability.

How are user-uploaded assets managed securely and efficiently?

Assets are uploaded directly to AWS S3 via pre-signed URLs for security and scalability. The Asset Management Service then triggers Cloudinary for optimization, resizing, and format conversion, serving the optimized versions via a CDN for fast delivery.

How does the platform handle the diverse and evolving component structures?

We store component configurations and site layouts as JSONB objects within PostgreSQL. This allows for schema flexibility without requiring constant database migrations as new components or properties are introduced, with a Component Template service defining the valid schemas.

Related guides