After building many websites and SaaS products, I’ve often come across web page editors. I never really understood how they worked under the hood. In the past couple of days, since one of my own products needed something like this, I decided to do some research with the help of AI.
I even used Codex to analyze Google Stitch’s page code to infer the tech stack it uses.
The conclusion: while there are various approaches to implementing these editors, two mainstream ones stand out — HTML-First and JSON-First.
HTML-First
The HTML-First approach means that during design, the page you see is rendered from HTML, with IDs embedded into DOM nodes following a set of rules. This allows real-time editing of the page through DOM manipulation.
This approach is relatively old-school. It’s simple, but the functionality it can achieve is also fairly limited.
JSON-First
Simply put, the page you see during design is rendered from a JSON object by a renderer. When the user edits page elements, what actually changes is the JSON. Once the JSON changes, the renderer re-renders the HTML, enabling real-time page editing.
This is the mainstream approach today.
独立产品人日记
Notes on indie products, AI tools, growth, and engineering.
Related Articles
Codex + Hyperframes: Make a Product Video with One Sentence
Using the Codex + Hyperframes plugin to generate a product introduction video with just one prompt — no more painful video editing.
Codex + Game Studio: A Great Tool for Making Games
Hands-on experience with Codex's Game Studio plugin for browser game development — covering 2D games with Phaser, 3D experiments, and why this combo stands out.
The Key to AI Agents Is How to Make AI Perform Better
Using the HTML vs JSON architecture decision for an AI UI Designer as a case study, this article argues that in the AI era we must abandon old best practices and design products around one core principle: how to let AI do its best work.