网站和SaaS做多了经常会见到一些web页面编辑器类的产品出现。我其实一直都不知道它们的实现原理。这两天因为自己的一个产品要用到这样的东西所以特意用AI做了个调研。甚至还特意用codex分析Google stitch的页面代码推测它所用的技术栈。最后的结论虽然这类产品的实现原理各有不同但最主流的有两种一种是所谓的HTML-First另一种就是json-first。HTML-First所谓html-first就是在设计时看到的页面是html渲染出来的然后在html的各个节点按一套规则植入了相应的id,这样就能通过Dom的方式实现对页面的实时编辑。这种方式比较古老。也比较简单但能实现的功能也比较简单。Json-First简单点说就是在设计时看到的页面是基于一个json被一个渲染器渲染成了html。当用户编辑页面元素时改变的是这个json而json改变后就会通过渲染器重新渲染html从而实现页面的实时编辑。这种方法是现在的主流。