行业动态
dev.to ·
@Idehweb
用 React 构建可视化建站工具：Webruno 页面编辑器的架构设计
Webruno 团队复盘其可视化页面编辑器的架构：放弃保存原始 HTML，改为存储组件化的页面结构（type/props/children 的 JSON 表示），编辑器修改数据、渲染器将其转为真实网站。系统核心是组件注册表，每个组件包含唯一标识、默认属性、可编辑设置、渲染逻辑与响应式规则，新增组件不影响已有站点。响应式设置作为组件配置的一部分，而非逐页手写 CSS。作者强调拖拽本身并不难，真正的难点是保持页面结构合法、管理嵌套组件、防止布局损坏、兼容旧版本以及保证渲染一致，并提到版本化与数据迁移的挑战。
AI推荐理由 Webruno 团队分享可视化建站编辑器的架构经验，具体信息包括：不存原始 HTML 而存组件化页面结构（type/props/children 的 JSON 表示）、组件注册表（唯一标识、默认属性、可编辑设置、渲染逻辑、响应式规则）、响应式配置随组件而非逐页写 CSS，并指出拖拽并非难点，难点在结构合法性、嵌套组件、旧版本兼容与渲染一致性。属于一线工程实践，对做低代码/页面搭建和 AI 生成页面的开发者有参考价值；但为单一产品的经验自述，无基准数据或对比验证，且正文在版本迁移部分被截断，信息完整度有限。
62
正文
Building a visual website builder looks simple from the outside.
Users drag a section, change some text, upload an image, click save, and expect a website to appear.
The reality is much harder.
A website builder is not just a frontend editor. It is a system that needs to store layouts, manage components, handle responsive behavior, support different business types, and render thousands of possible combinations reliably.
While building Webruno, one of our biggest engineering challenges was creating a flexible page builder architecture.
The problem with storing raw HTML
The simplest approach would be saving generated HTML.
For example:
Build your business online
Start Now
But this creates many problems:
Editing becomes difficult
Components cannot be reused
Responsive changes become complicated
AI generation becomes harder
Maintaining old pages becomes risky
A website builder needs a more structured approach.
Component-based page structure
Instead of storing HTML, we store a representation of the page.
A simplified example:
{
"type": "section",
"props": {
"background": "white"
},
"children": [
{
"type": "heading",
"props": {
"text": "Create your website"
}
},
{
"type": "button",
"props": {
"label": "Get Started"
}
}
]
}
The editor modifies this data.
The renderer converts it into a real website.
The page becomes a structured application state instead of a static document.
The component registry
A key part of the system is the component registry.
Each component has:
A unique identifier
Default properties
Editable settings
Rendering logic
Responsive rules
Example:
const components = {
heading: HeadingComponent,
image: ImageComponent,
button: ButtonComponent,
productGrid: ProductGridComponent
};
When a page loads, the renderer reads the structure and maps each component to its React implementation.
This allows us to add new components without changing existing websites.
Handling responsive design
Responsive websites create another challenge.
A user expects the same design to work on:
Desktop
Tablet
Mobile
But every component can behave differently.
A heading may need:
Different font sizes
Different spacing
Different alignment
An image may need:
Different dimensions
Different cropping
Different positioning
We handle responsive settings as part of the component configuration rather than manually writing CSS for every page.
Drag and drop is the easy part
Many people think the hardest part of a website builder is drag and drop.
It is not.
Moving a block from one position to another is relatively simple.
The difficult parts are:
Keeping the page structure valid
Managing nested components
Preventing broken layouts
Supporting old versions
Keeping rendering consistent
A good editor needs rules.
Without rules, users can create layouts that cannot be rendered correctly.
Versioning and data migration
SaaS products evolve.
A component created today may not have the same structure two years later.
For example:
Old:
{
"type": "button",
"text": "Buy"
}
New:
{
"type": "button",
"label": "Buy",
"style": {
"variant": "primary"
}
}
Changing data structures requires migration strategies.
Otherwise, old customer websites can break after platform updates.
AI and structured websites
One advantage of having structured pages is that AI can work with them.
Instead of asking AI to generate thousands of lines of HTML and CSS, we can ask it to generate a website structure using available components.
Example:
Business:
Restaurant
AI output:
Hero Section
Menu Section
Gallery
Reservation Form
Contact Section
The platform then builds the actual page using validated components.
The AI suggests the structure.
The application controls the result.
Lessons learned
Building a website builder taught us that flexibility and control must be balanced.
Too much freedom creates unstable websites.
Too many restrictions create a frustrating editor.
The best systems provide users with creative freedom while maintaining technical boundaries.
Final thoughts
A visual website builder is closer to building an operating system for websites than building a simple page editor.
The difficult engineering problems are not visible to users.
They are hidden in data models, rendering systems, component architecture, migrations, and scalability.
That is where most of the work happens.
Webruno:
https://webruno.com