my blog https://overreacted.io
wip
+22
-8
+22
-8
public/untitled/index.md
+22
-8
public/untitled/index.md
···
1
1
---
2
-
title: Composable HTML
2
+
title: Imaginary HTML
3
3
date: '2025-05-01'
4
4
spoiler: Tags on both sides.
5
5
---
···
16
16
17
17
Suppose it was the only piece of HTML you've ever seen in your life. If you had complete freedom, which features would you add to HTML, and in what order?
18
18
19
-
How would you evolve the *HTML itself?*
19
+
How would you reimagine the *HTML itself?*
20
20
21
21
---
22
22
23
23
### Components
24
24
25
-
Personally, I'd like to start by adding a way to define our own custom HTML tags.
25
+
Personally, I'd like to start by adding a way to define my own custom HTML tags.
26
26
27
27
It doesn't need to be complicated. We can just use JavaScript functions:
28
28
···
111
111
</html>
112
112
```
113
113
114
-
But what should we do with the `style={{ color: '...' }}` objects? If we wanted to translate our "imaginary" HTML into "real" HTML, we'd stringify them:
114
+
Still, we haven't gotten rid of all objects.
115
+
116
+
What should we do with those `{ color: '...' }` objects?
117
+
118
+
---
119
+
120
+
### Objects
121
+
122
+
The "real" HTML we know and love has no first-class notion of objects. If we wanted to output some "real" HTML, we'd have to turn them into `style` strings:
115
123
116
124
```js {3,4}
117
125
<html>
···
124
132
125
133
But we don't *have to* turn our "imaginary" HTML into "real" HTML right away. We can stay in the imaginary land for a bit longer by turning *the entire thing* into JSON.
126
134
127
-
Note how in this case, `style` can remain completely intact as an object within:
135
+
Note how, in this format, `style` can remain completely intact as an object within:
128
136
129
137
```js {6,10}
130
138
["html", {
···
145
153
146
154
We can *then* easily turn this JSON into the "real" HTML if we want. But JSON is a *richer* representation because it preserves objects in a way that is easy to parse.
147
155
148
-
This isn't particularly interesting or useful yet.
156
+
This strange JSON representation isn't particularly interesting or useful yet. But going forward, we'll co-evolve these two representations. In fact, we'll consider the JSON representation to be the primary one because it preserves the most original information--notably, *it preserves objects.* We'll think of the "real" HTML representation as secondary because it can always be computed from that JSON.
157
+
158
+
In other words, we have a little pipeline:
159
+
160
+
1. *Imaginary HTML:* The language we are inventing.
161
+
1. *JSON:* The primary output format of our language.
162
+
1. *Real HTML:* What browsers can handle directly.
149
163
150
-
But going forward, we'll co-evolve these two representations.
164
+
Let's see how each piece evolves with new requirements.
151
165
152
166
---
153
167
···
227
241
}]
228
242
```
229
243
230
-
Or, in the "real" HTML form:
244
+
(which, as you might recall, can always be converted to the "real" HTML:)
231
245
232
246
```js
233
247
<html>