Out Of Order HTML

New HTML Processing Instructions have dropped in Chrome 150 with polyfills that enable out of order HTML streaming with fallbacks. This has historically been a feature bolted onto UI libraries such as React via inline JS snippets that move elements into place as they arrive.

The new processing instructions <?start name> and <?end>, along with the new <template for> attribute enable native, declarative out of order HTML streaming.

Example

Let's assume the following HTML is streamed to the browser, with a delay before the <template> chunk is sent:

<div>
  <?start name="placeholder-1">
    <p>Loading...</p>
  <?end>
</div>
<p>More content that isn't delayed</p>
<template for="placeholder-1">
  <p>Hello, World!</p>
</template>

Until the <template for="placeholder-1"> arrives the browser will show:

<div>
  <p>Loading...</p>
</div>
<p>More content that isn't delayed</p>

Once the <template> is processed, we are left the the result:

<div>
  <p>Hello, World!</p>
</div>
<p>More content that isn't delayed</p>

So Much More

Declarative Partial Updates are so much more than what I've covered here. We get revamped HTML insertion and streaming methods and DOM preservation mechanisms, along with the <?marker> processing instruction to allow for streaming of list like content.

As always, get that polyfill and start playing with this today. There is so much you can do today without a framework, or even JavaScript for that matter. Combine this with document view transitions, <dialog>, popover and you can build some awesome declarative experiences.