htmx 4 would rather reshape your page than replace it

The first major htmx since 2.x swaps teardown for morphing: the page updates in place, inheritance happens only when you ask for it, and version 2 stays supported into 2027.

One terracotta vessel shown four times on a walnut workbench, as a wedged lump, a centered mound on a wheel head, a freshly pulled cylinder, and a finished glazed vase, lit by warm window light — 01 WEDGEThe leadhtmx 4.0.0 02 CENTREToolingCursor, Vercel, Monotype 03 PULLTechniqueMotion shaders 04 GLAZEWorkflowFigma to code

SESSION 01 · THE WEDGE

The lead

AUG 28

htmx 4.0.0 is released

The first major htmx release since 2.x landed this morning, and its centerpiece is the morph swap: updates now reshape the existing DOM in place instead of tearing a region down and rebuilding it, so focus, scroll position, and playing media survive the change. Attribute inheritance becomes opt-in with an inherited modifier, events move to one naming grammar, and the internals trade XMLHttpRequest for fetch, which opens native streaming.

The team is in no hurry about any of it: 2.x keeps the npm latest tag until early 2027, and a command-line upgrade checker walks existing sites through the changes. For designers who build interfaces out of attributes rather than frameworks, the in-place update is the whole story. Transitions stop flickering because nothing is being replaced.

SESSION 02 · THE CENTRE

Tooling

AUG 27

Cursor starts a site with no repo at all

Cloud agents in Cursor can now begin from a blank slate: prompt first, and an Origin repo appears in the background once the build is worth keeping. The same release forwards the agent's live environment to your browser for preview and design mode, with publishing to a live URL through a connected Vercel account.

AUG 28

Vercel builds agents from the dashboard

Add New, then Agent: the Vercel dashboard scaffolds the code, creates a private repo, and deploys a chat-ready agent in one pass, with models chosen through AI Gateway and a web chat interface or Slack hookup on the way out.

AUG 27

Monotype's library passes 400,000 font styles

The collection grew by a quarter this year, with non-Latin styles up 75 percent and more than 300 languages covered across 5,000 foundries. Worth a bookmark for the next brief that starts in one script and ships in four.

SESSION 03 · THE PULL

Technique

AUG 18

Shading motion: movement as a shader input

Maxime Heckel's latest study treats motion itself as raw material: frame differencing, decay trails, blob tracking, and optical flow, each built as a WebGPU compute pass you can layer over a scene. It surfaced on Hacker News this morning and earns the visit for the pipeline diagrams alone.

SESSION 04 · THE GLAZE

Workflow

AUG 26

Figma sketches the design-to-code loop

Figma's workflow lab walks one feature from a FigJam flow diagram through the MCP server into a coding agent, with Code Connect mapping design components to production code and a final step pushing new components back onto the canvas for the designer to refine. A tidy statement of where the company thinks the handoff line now sits.

TODAY'S ART DIRECTION

The Throwing Room

A ceramics studio's booking page in slip cream on espresso, one vessel thrown across the hero in four stages.

A class-booking landing page for a working pottery studio, photographed rather than decorated: the hero runs a single vessel through wedge, centre, pull, and glaze on one bench in one raking light, and each stage anchors a section of the page. Sessions are marked with kiln-card labels, items sit in schedule rows with date stamps, and the palette is genuinely photographed, a chart of glaze test tiles standing in for hex chips. The register borrows morph over replace from the day's lead: same clay, new shape.

wheel-thrown sequence
chop stamp
kiln-card sessions
glaze chart
slip cream
raking light
espresso ground

Overhead photograph of six square ceramic glaze test tiles on a dark wooden bench: terracotta, warm cream, pale celadon, dark tenmoku brown, speckled oatmeal, and muted umber — The studio glaze chart doubles as the palette: terracotta, slip cream, celadon, tenmoku, oatmeal, umber.

BORROW THIS PATTERN

The process strip

Photograph one object through its real making stages, in one light on one surface, and run the sequence as a wide rail under the hero, with each stage captioned and linked to the matching section of the page. It sells process businesses better than any beauty shot: bakeries, tailors, print shops, roasters, framers, anyone whose value is the making.

What keeps it honest: a single subject, stages in true order, and captions that name the step rather than sell it. The moment you composite four different products into the rail, it turns back into a stock-photo strip.

FIRING SLIP · PROMPT LAB

Recreate this page

Hand this slip to an AI site builder and fire today's visual system with your own content.

Build a class-booking landing page for a local ceramics studio. Archetype: local service and course hybrid with a hero, a process rail, session listings, and a short booking note. Ground the page in deep espresso brown (#251B15) with warm cream text (#F0E5D4), terracotta accents (#C9703F), and one quiet celadon (#ABBFA6) reserved for the glaze chart. Type: a soft high-contrast serif (Fraunces) for the studio name and headings, an even grotesque (Instrument Sans) for body, a mono (Chivo Mono) for stamps and labels. Masthead: no boxed metadata table; use a small square chop stamp rotated a couple of degrees beside a two-line inline byline. Hero: headline, one-sentence promise, then the signature move: one wide photograph of a single vessel shown four times as real making stages (wedged lump, centered mound, pulled cylinder, glazed vase) on one bench in one warm raking light; caption each stage under the image and link each caption to its matching page section. Mark sections as sessions with a mono kiln-card line (SESSION 01 · THE WEDGE) beside a serif subhead over a hairline rule. List classes as schedule rows: a small mono date stamp in a left column, linked title and two plain sentences right; no identical three-up card grids. Include a photographed glaze chart, a flat lay of glaze test tiles, doubling as the palette legend with a one-line caption. Guardrails: body text at least 19px with line height 1.65 and 60 to 75 character measure, WCAG AA contrast for small labels on the dark ground, no justified text, no purple gradients or glow, card radius 14px or less, no accent left borders, no fake search or filter chrome, no readable text inside generated images, hover transitions near 150ms with a prefers-reduced-motion guard.

Works in Beaver Builder AI, v0, Lovable, and Figma Make.

FIELD NOTE

The morph swap reads like a studio habit written into a release note. When the rim goes wrong you do not throw the pot away; you re-centre and pull again. All day long, the page stays the same clay.