Website Builder Development
A website builder is a SaaS platform allowing users to create websites without code via visual editor. Technically, it's one of the most complex web products: WYSIWYG editor, code generation on-the-fly, hosting and CDN for thousands of user sites, DNS management.
Builder Architecture
Key choice: canvas-based or DOM-based editor.
Canvas (Adobe XD / Figma approach): arbitrary element placement by pixels. Maximum design freedom, but hard to generate responsive HTML.
Block/Section-based (Webflow, Wix approach): site consists of sections, inside — grid (grid/flexbox). Limited design, but generates adaptive code.
Component-based: user works with components (Hero, Features, Pricing, Footer). Simplest approach, similar to landing builder.
Page Data Model
{
"sections": [
{
"id": "hero_1",
"type": "hero",
"props": {
"background": "#1e40af",
"title": "Site Title",
"subtitle": "Subtitle",
"buttonText": "Start",
"buttonLink": "/signup"
}
},
{
"id": "features_1",
"type": "features_grid",
"props": {
"columns": 3,
"items": [...]
}
}
],
"meta": { "title": "...", "description": "..." }
}
On render, JSON config converts to React/HTML components. Changes in editor → JSON update → instant live preview.
Live Preview
Site preview — iframe with user site. Changes applied via postMessage:
// Editor sends updates to iframe
iframe.contentWindow.postMessage({
type: 'UPDATE_SECTION',
sectionId: 'hero_1',
props: { title: 'New Title' }
}, '*');
// iframe listens and updates React component
window.addEventListener('message', ({ data }) => {
if (data.type === 'UPDATE_SECTION') {
setSection(data.sectionId, data.props);
}
});
Multi-tenant Hosting
Each user gets subdomain (username.builder.com) or custom domain. Nginx + wildcard SSL (*.builder.com) via Let's Encrypt + Certbot.
Custom domain: user adds CNAME record → platform issues SSL via Let's Encrypt HTTP-01 challenge.
Site generation and deploy:
- On publish — JSON config converts to static HTML + CSS + JS
- Static files upload to S3/CDN
- CDN set to user subdomain
Themes and Templates
User starts with template choice (category: business, portfolio, restaurant, landing). Template — set of sections with filled examples. Theme switch (color + font) changes CSS variables — instant style change without structure change.
Plan Limits
Free plan: username.builder.com subdomain, limited pages, platform branding in footer. Pro plan: custom domain, no branding, more pages, analytics.
SEO Tools
- Meta title / description — edited directly in builder
- OG image — upload or generate from title
- Robots.txt and Sitemap — auto-generated on publish
Timeline
MVP (block editor, live preview, publish to subdomain, 10–15 section types): 4–6 months. Full builder with custom domains, CSS themes, SEO tools, e-commerce sections: 8–14 months.