The Architectural Renaissance of Native Web Engineering: Advanced HTML-Only Methodologies and Zero-JavaScript State Management

Full report

On this page

The Strategic Realignment of Web Architecture

For over a decade, the architectural trajectory of the web was dominated by a continuous accumulation of client-side logic. Driven by the necessity to deliver highly interactive, stateful, and dynamically rendered user experiences, software engineers defaulted to shipping increasingly massive JavaScript payloads. The resulting ecosystem of Single Page Applications (SPAs) and complex JavaScript frameworks succeeded in delivering application-like fidelity but at a severe cost. The modern web became burdened by significant performance bottlenecks, fragile dependency chains, compromised accessibility, and aggressive network payload requirements. However, a fundamental architectural renaissance is currently redefining web engineering. The "HTML-only" or "Zero-JavaScript" movement is no longer a nostalgic exercise in building static, non-interactive documents. Instead, it represents a highly advanced, performance-driven paradigm that leverages the bleeding-edge specifications of native HTML and CSS to engineer rich, interactive, and stateful web interfaces natively. This movement asserts that the browser's internal rendering engine, operating primarily in optimized C++, is inherently superior at handling specific UI interactions and state transitions than custom JavaScript logic executing on the main thread. The strategic rationale behind minimizing or entirely eliminating JavaScript encompasses several core pillars of software engineering. First, longevity and platform stability present an overwhelming advantage for semantic architectures. The JavaScript ecosystem suffers from extreme churn, where build tools, framework versions, and package dependencies become deprecated at an alarming rate.1 Conversely, HTML and CSS are bound by rigorous standards of backward compatibility. A website engineered purely in semantic markup two decades ago remains functionally flawless on modern hardware, surviving multiple paradigm shifts in operating systems, screen resolutions, and processor architectures.1 Furthermore, zero-JavaScript baselines fundamentally alter the performance characteristics and Search Engine Optimization (SEO) viability of digital properties. When a browser receives a raw HTML document, it immediately initiates parsing the Document Object Model (DOM) and rendering the visual layer without the blocking requirements of downloading, parsing, compiling, and executing client-side scripts.2 This structural efficiency drastically reduces Time to Interactive (TTI) and maximizes Core Web Vitals, metrics heavily prioritized by algorithmic search engine crawlers.3 While search engines have developed mechanisms to execute JavaScript during indexing, raw HTML structures guarantee immediate, error-free indexability, insulating the content from crawler timeouts or client-side rendering failures.2 Crucially, the engineering philosophy of universal accessibility underpins the zero-JavaScript methodology. While the demographic of users who explicitly disable JavaScript is statistically marginal, the incidence rate of "failed JavaScript" is highly significant. Unstable cellular networks, restrictive corporate firewalls, aggressive ad-blocking extensions, and underpowered mobile hardware routinely interrupt script execution.2 By engineering interactivity directly into the HTML and CSS layer, developers enforce progressive enhancement, ensuring that edge-case users are not priced out of digital experiences.2

The Vanguard of Minimalist Interactive Portfolios

The theoretical advantages of zero-JavaScript architectures are vividly demonstrated by a new vanguard of developer portfolios, design showcases, and experiential websites that rely entirely on the native web platform. These digital properties reject the homogenization of the modern web, proving that aesthetic excitement and interactive depth do not require a heavy client-side runtime. A prominent example of this architectural restraint is seen in pure HTML/CSS art portfolios, such as the digital presence of Mario Iliev, which leverages advanced CSS to achieve a highly stylized visual aesthetic without any client-side scripting.6 Similarly, Dave On Design (daveon.design) serves as a primary showcase of minimal, manuscript-style typographic focus, prioritizing pure semantic structure and achieving a lightweight, high-performance delivery.7 Even highly interactive digital experiences are successfully moving toward this paradigm. The website Packabo provides a compelling case study. Upon initial inspection, the site features animated text, custom cursor behaviors, and moving image carousels that suggest the presence of a heavy JavaScript library. However, deep DOM inspection reveals that the vast majority of these complex visual effects are achieved through plain HTML and advanced CSS techniques, resulting in a meticulously clean user interface.8 Similarly, interactive portfolio elements, such as those demonstrating pixel art, have been ingeniously engineered using pure HTML tables and specific, sometimes deprecated, tags to create visually engaging canvases without scripting overhead, as demonstrated on pixel-art.alanwsmith.com.9 To formalize this approach, comprehensive resume frameworks such as Resume Re: UX by developer israelias have been constructed to apply object-oriented principles directly to HTML5 tags and CSS3 selectors.10 The project serves as an interactive, collapsible stack of curriculum vitae data, utilizing native CSS transitions to fully expand document outlines and responsive dashboard menus without a single line of JavaScript.10 By aligning the markup structure with Jesse James Garrett's Five Planes of UX (strategy, scope, structure, skeleton, and surface), the framework proves that information architecture and user-journey pacing can be natively encoded into the DOM.10 The success of these platforms draws a direct philosophical line back to the genesis of the internet itself. The WWW Project (info.cern.ch/hypertext/WWW/TheProject.html), famously published by Tim Berners-Lee in 1991, remains highly regarded by modern developers as the ultimate benchmark of structural purity.12 Loading in less than half a millisecond with a payload of roughly 196 bytes, the original HTML document exemplifies how native semantic headings and anchor tags deliver unparalleled speed, device agnosticism, and perfect SEO out-of-the-box.13

Enterprise Applications: The HTML-Only Interactive B2B Sandbox

The capabilities of HTML-centric engineering extend far beyond personal portfolios and art showcases; they are actively disrupting high-value sectors such as enterprise Business-to-Business (B2B) software sales. The modern B2B buyer demands immediate, interactive access to complex software platforms prior to engaging with sales personnel. To meet this demand, a multi-million dollar industry has emerged around "Interactive Demo Platforms".14 Historically, software demonstrations were facilitated via static screenshots, narrated video recordings, or high-fidelity Figma prototypes. However, these formats lack the tactile feedback required for complex software evaluations. Modern interactive demo platforms have resolved this by shifting to "HTML Capture" mechanisms.14 Platforms that utilize high-fidelity HTML captures clone the exact DOM structure, CSS stylesheets, and native interactivity of a live software environment, severing the backend database connection and replacing it with a localized, static HTML sandbox.15 This allows the end-user to experience authentic hover states, precise CSS animations, native text selection, and authentic scroll behaviors that static screenshot-based solutions fundamentally cannot replicate.16 An analysis of the leading B2B demo platforms highlights a strategic divide based on the engineering complexity of generating these HTML structures:

(Data derived from competitive industry analysis 14) The decision to utilize an HTML-only capture engine (such as Walnut or Reprise) over a screenshot engine signifies a commitment to uncompromising interactive fidelity.16 When a marketing team demands an interactive demo that exactly mimics a live SaaS dashboard—where clicking a \<select\> dropdown natively reveals a stylized menu, or hovering over a CSS-grid triggers complex :hover state animations—only a pure HTML clone can deliver the required realism.16 The engineering tradeoff, however, is maintenance overhead. Because the HTML capture freezes the DOM in time, rapid updates to the core software's user interface require the entire HTML capture to be re-engineered or re-recorded, whereas static screenshots can be rapidly swapped.16

The Native Popover API: Redefining Top-Layer Architecture

One of the most consequential advancements in modern web architecture is the introduction of the native HTML Popover API. Historically, engineering a non-modal overlay—such as a complex dropdown menu, an educational tooltip, or a customized toast notification—was an exceedingly complex task requiring extensive JavaScript intervention.19 Previously, developers had to manually architect state management to track whether the overlay was open or closed. They had to inject JavaScript to calculate bounding client rectangles to prevent the overlay from clipping off the screen edge. Furthermore, they were forced into endless "z-index wars," attempting to ensure the overlay appeared visually above all surrounding DOM elements. To meet accessibility standards, extensive scripts were required to trap keyboard focus, bind event listeners to the Escape key, and monitor click events on the window object to simulate "click-outside" dismissal logic.20 The Popover API eradicates these requirements entirely, providing a declarative, highly performant mechanism for managing overlays directly in the HTML markup.19

Top-Layer Promotion and Light-Dismiss Mechanics

The fundamental architecture of the Popover API relies on two HTML attributes: the popover attribute placed on the container element, and the popovertarget attribute placed on the triggering button (which must contain a value matching the id of the popover).19 When the browser parses an element designated as a popover, its rendering engine automatically promotes that element to the "top layer." The top layer is a specialized rendering context that supersedes the standard document flow and stacking contexts. By definition, any element in the top layer is guaranteed to render visually above all other standard DOM nodes, completely negating the need to manipulate z-index properties.20 Simultaneously, the browser natively assumes responsibility for "light-dismiss" functionality.22 When a popover is active, the browser's internal event loop automatically monitors user interactions. If the user clicks anywhere outside the geographical boundaries of the popover, or if they press the Escape key on their keyboard, the rendering engine automatically unmounts the popover and returns focus to the triggering element.20 This entirely eliminates the memory leaks and performance bottlenecks commonly associated with attaching global click event listeners in Single Page Applications.20 Advanced developers have leveraged these capabilities to construct highly cinematic, zero-JavaScript interfaces. A prime example is the Cyberpunk Glitch Upgrade Modal engineered by UI researcher Jhey. This interface transforms a standard confirmation dialog into a deeply immersive, visually distorted cyberpunk overlay. By defining explicit interaction boundaries using the native HTML Popover API, the interface handles state, focus, and dismissal natively, allowing the computational resources to be entirely dedicated to aggressive CSS glitch animations and staggered transitions.21 Similarly, the CyberPopover 2025 project demonstrates how the native \[popover\] attribute can be combined with modern View Transitions to generate intricate, state-driven UI logic built upon @layer and @starting-style architectures, entirely removing the need for heavyweight dependency libraries.21

The Interest Invoker and the Mobile Accessibility Paradox

Advancing the capabilities of the Popover API, recent browser specifications (beginning heavily in Chrome 133\) introduced the ability to trigger these overlays via hover or focus states without relying on JavaScript event listeners.27 By setting popover="hint" and utilizing the interestfor attribute on the trigger element, developers can create highly responsive tooltips and profile preview cards natively.27 To prevent user frustration—where rapidly moving a mouse across a dashboard triggers an overwhelming barrage of tooltips—the CSS specification was expanded to include delay properties. By applying interest-show-delay and interest-hide-delay (or the shorthand interest-delay) directly in CSS, developers can dictate precisely how many milliseconds a user must hover over a target before the browser infers genuine intent and opens the overlay.27 However, the introduction of native hover mechanics generated a severe architectural paradox regarding mobile accessibility. Touch devices fundamentally lack a physical cursor, rendering traditional hover states obsolete. The Open UI working group engaged in extensive debate regarding how to map the interestfor attribute to touch interfaces without sacrificing semantic purity.27 Several divergent architectural proposals were evaluated to resolve this touch-device paradox:

(Analysis based on Open UI proposals and touch-accessibility research 27) Ultimately, the architectural consensus demands that any finalized specification must be accessible by default, enforce uniform execution across rendering engines, and provide unmistakable visual signaling to the user.27

Declarative Control Flow: The HTML Invoker Commands API

While popovers and overlays handle a massive portion of user interface logic, modern web applications rely on a vast array of other interactive elements: modal dialogs, native pickers, customized media players, and numeric steppers. Historically, every single one of these actions required the developer to write an imperative JavaScript function and explicitly bind it to a DOM node using addEventListener. The "HTML Invoker Commands" API represents a paradigm shift, entirely eliminating this requirement by migrating state and event handling from the imperative JavaScript layer directly into the declarative HTML layer.29 This API achieved baseline support across all major browsers, allowing developers to shift implementation significantly to the left of the technology stack.30

Core Syntax and Modality

The Invoker Commands API revolves around two new attributes for the \<button\> element: commandfor and command.29 The commandfor attribute operates similarly to the for attribute on a label, taking the unique id of the target element (the "invokee").29 The command attribute explicitly defines the built-in browser action to execute upon the target.29 By offloading this relationship to the DOM, the browser's engine natively assumes responsibility for executing the logic, trapping focus, and automatically updating critical accessibility states (such as toggling aria-expanded attributes).32 For example, interacting with a \<dialog\> element previously required querying the DOM in JavaScript and firing the .showModal() or .close() methods. With the Invoker Commands API, this becomes purely declarative:

HTML \<button commandfor\="system-configuration" command\="show-modal"\>Open Settings\</button\> \<dialog id\="system-configuration"\> \<h2\>Configuration\</h2\> \<p\>Adjust system parameters.\</p\> \<button commandfor\="system-configuration" command\="close"\>Dismiss\</button\> \</dialog\>

Furthermore, managing backdrop dismissals for dialogs is handled declaratively. By utilizing the new closedby attribute on the dialog, developers can specify closedby="any". This instructs the browser to automatically dismiss the modal if the user clicks the external ::backdrop pseudo-element or strikes the Escape key, completely eradicating the need for complex JavaScript backdrop-detection scripts.27 Similarly, Invoker Commands can directly target popovers by mapping commandfor to the popover ID and setting the command to toggle-popover, show-popover, or hide-popover.29 If an element contains both a legacy popovertarget and a new commandfor attribute, the rendering engine prioritizes commandfor.27

Standardizing Multimedia and Form Interfaces

The scope of Invoker Commands deeply penetrates common UI friction points, providing native solutions for previously complex interactions 27:

1. Native Input Pickers: Customizing the trigger mechanism for a native \<input type="date"\> or \<input type="color"\> usually required hiding the input and building a JavaScript proxy to forward click events. By applying command="show-picker" to a highly styled custom button, developers can natively invoke the operating system's calendar, color wheel, or \<datalist\> dropdown seamlessly.27
2. Constrained Number Steppers: E-commerce quantities and data inputs frequently require increment/decrement controls. By assigning command="step-up" and command="step-down" to custom buttons targeting an \<input type="number"\>, the browser natively adjusts the value. Crucially, this execution natively respects the min, max, and step constraints defined on the input, preventing illegal state conditions without any validation logic.27
3. Multimedia Controllers: Engineering custom interfaces for \<video\> or \<audio\> elements is a notorious pain point. The Invoker API standardizes media control natively, allowing developers to build custom buttons that trigger play, pause, play-pause, toggle-muted, and request-fullscreen directly through HTML attributes.27

Custom Command Dispatching for Web Components

Recognizing that native commands cannot cover proprietary business logic, the Invoker API includes a mechanism for custom event dispatching. By prefixing the command attribute with a double dash (e.g., command="--process-transaction"), the button bypasses native behaviors and instead fires a specialized command event on the target element.27 While capturing this event requires JavaScript, the architectural efficiency is profound. Rather than attaching individual event listeners to dozens of disparate buttons across a user interface, a developer can attach a single listener to a parent Web Component. When a nested button is clicked, it declaratively passes the \--process-transaction command and its value up to the parent. This mirrors the lexical scoping behavior of CSS custom properties and empowers component authors to ship declarative, highly portable APIs to their consumers.27

The Evolution of Form Architecture: Re-engineering Selects and Ranges

Forms remain the foundational conduit for user data on the internet. However, specific native inputs have heavily resisted deep styling and layout modifications due to their deep integration with operating system rendering engines. This historical limitation forced developers to build fragile, highly inaccessible JavaScript replicas. The latest HTML specifications are systematically dismantling these barriers.

The Customizable Select API

The native \<select\> element has long been the primary source of form-based frustration. Because the dropdown menu (\<option\> tags) is rendered by the operating system rather than the browser's CSS engine, modifying its layout, typography, or internal structure was impossible. Consequently, developers engineered convoluted JavaScript components utilizing nested \<ul\> and \<li\> lists, which consistently failed to replicate native keyboard navigation schemas and critical screen-reader ARIA announcements.27 The Customizable Select API resolves this architectural flaw by permitting developers to opt-in to advanced styling using a CSS feature query. By wrapping the CSS declarations in @supports (appearance: base-select) and applying appearance: base-select to both the \<select\> element and its internal ::picker(select) pseudo-element, the browser relinquishes control of the shadow DOM and yields rendering authority to the CSS engine.27 This transfer of rendering authority unlocks profound capabilities:

• Rich Media Integration: Standard \<option\> elements are no longer restricted to plain text strings. They can now contain complex HTML nodes, including SVG icons, secondary descriptive paragraphs, and profile images, creating highly contextual dropdowns.21
• The \<selectedcontent\> Synchronization: A persistent issue with custom JavaScript dropdowns is the necessity of writing logic to mirror the rich HTML of a selected option back into the closed button state. By placing a \<selectedcontent\> tag inside a \<button\> nested within the \<select\>, the browser natively clones the inner HTML of the actively selected \<option\> into the button face, achieving perfect synchronization without JavaScript.27
• Advanced \<optgroup\> Grid Layouts: Dropdowns categorizing large datasets can now be styled as expansive, multi-column mega-menus. CSS properties such as columns: 2, break-inside: avoid, and break-before: avoid can be applied directly to \<option\> and \<optgroup\> elements. This prevents awkward line breaks and ensures that \<optgroup\> headers stay visually tethered to their child elements within complex grid layouts, a feat previously inconceivable for native inputs.27
• The size="1" Multiselect Paradigm: The native multiple select box (a scrolling list of options) is highly unintuitive, often requiring users to discover they must hold the Ctrl or Cmd key to select multiple elements. Under the Customizable Select specification, combining the multiple attribute with size="1" transforms the cumbersome list box into a sleek, accessible dropdown menu. The CSS engine allows developers to style native ::checkmark pseudo-elements on selected items, allowing users to toggle multiple options with simple single-clicks, vastly improving the baseline UX.27

Native Multi-Handle Range Sliders (<rangegroup>)

A parallel effort within the Open UI community addresses the multi-handle range slider problem. Advanced user interfaces—such as filtering e-commerce prices, defining time-slots, or setting minimum/maximum analytics thresholds—frequently require a slider with two or more draggable thumbs. Because the native \<input type="range"\> strictly supports a single thumb, developers have been forced to import massive JavaScript libraries that mathematically calculate thumb positions to prevent overlapping and manage complex state changes.27 The proposed \<rangegroup\> HTML element introduces a semantic wrapper designed to house multiple \<input type="range"\> elements simultaneously.27 By defining this group natively, the browser's internal engine handles all boundary validation, ensuring that a minimum thumb cannot mathematically cross a maximum thumb on the track. Crucially, the \<rangegroup\> standardizes accessibility out-of-the-box. The browser constructs a layered screen-reader announcement model, broadcasting the overall constraints of the group first, followed by the localized context of each focused thumb.27 Furthermore, it utilizes a fieldset-style propagation model for state management. Applying the disabled attribute directly to the parent \<rangegroup\> instantly locks every nested range input, removing them all from the tab-order and excluding them from the form submission payload simultaneously, simplifying state management code significantly.27

Cinematic Interfaces: View Transitions, Anchor Positioning, and @starting-style

The aesthetic allure of premium web applications is heavily dependent on smooth animations, dynamic positioning, and graceful state transitions. Historically, animating an element as it entered the DOM, or transitioning it into and out of display: none, was impossible using pure CSS. The CSS mathematical interpolation engine requires a defined "before" and "after" state to calculate a transition frame-by-frame. Because the display property is "discrete"—meaning an element is either entirely present or entirely unrendered—elements would abruptly snap into existence. To circumvent this, developers used JavaScript to manually toggle .is-entering classes and manage precise setTimeout functions to wait for animations to finish before removing an element.27

@starting-style and Discrete Property Execution

CSS Transitions Level 2 solves this fundamental limitation. By utilizing the property transition-behavior: allow-discrete, the CSS rendering engine is explicitly instructed to maintain the element's block rendering state just long enough for the visual opacity and transform transitions to finish their curves, only then snapping the display to none.21 To manage the inverse—the entry animation of newly rendered elements—CSS introduces the @starting-style rule. This block defines the exact visual parameters an element must possess at the exact microsecond it is instantiated into the DOM or switched from display: none to a visible block.27 By defining @starting-style { opacity: 0; transform: translateY(-30px); } and transitioning to a baseline opacity of 1, elements glide seamlessly into view upon rendering.27 When paired with the native Popover API's :popover-open pseudo-class or the \<dialog\> element's \[open\] attribute, @starting-style enables cinematic, zero-JavaScript entrance and exit animations for top-layer elements.21 The browser natively handles the complex micro-timing required to fade an overlay out perfectly before completely garbage-collecting its rendering context.27

Anchor Positioning and Circular Architecture

Another transformative leap in layout engineering is the Anchor Positioning API. In traditional UI development, ensuring a dynamic tooltip or a dropdown menu stayed visually glued to its triggering button required JavaScript libraries (such as PopperJS) to continuously poll the bounding client rectangles of both elements, calculating absolute pixel coordinates upon every scroll or window resize event.34 CSS Anchor Positioning allows the rendering engine to tether elements together natively.34 By declaring top: anchor(center) on an overlay, the browser automatically recalculates the position on the GPU thread, keeping the overlay perfectly pinned to the center of its anchor without executing a single line of JavaScript.27 The full potential of this API is showcased when combined with Customizable Selects and CSS mathematical functions. UI research firm Utilitybend demonstrated an experimental custom "Potion Selector" utilizing these specifications.21 By targeting the ::picker(select) pseudo-element and applying anchor(center), the dropdown menu spawns precisely over the trigger button.27 Then, utilizing CSS variables paired with the forthcoming sibling-count() and sibling-index() functions, the developer achieved a complex radial "fan-out" menu. The CSS engine dynamically calculates the angular division for each nested \<option\>: $ \\text{Angle} \= 360^{\\circ} / \\text{sibling-count()} $ It then applies a multi-stage transform: rotate() translate() rotate() sequence based on the element's index.27 The result is a highly interactive, fluidly animated circular interface—evocative of radial weapon-selection wheels in modern video games—rendered, positioned, and animated natively by the browser.21

Scroll-State Container Queries and Gamification

Further diminishing the reliance on JavaScript for cinematic interfaces, Scroll-Driven Animations and Scroll-State Queries empower UI elements to react dynamically to the viewport's scroll position without attaching performance-heavy event listeners to the window.onscroll object.26 An advanced implementation of this is seen in the "Monster Hunter" horizontal item wheel recreated by Utilitybend.27 By applying scroll-snap-type: x mandatory to a flex container, and utilizing the experimental @container scroll-state(snapped: inline) query on its child elements, developers can engineer interfaces that physically react when an item locks into the direct center of the viewport.27 In this architecture, whichever element is actively snapped to the center automatically scales up by 150%, while the surrounding unfocused elements scale down.27 This creates a rich, gamified selection wheel utilizing pure HTML and CSS. Because the state changes are driven by CSS queries rather than JavaScript intersection observers, the animation frame rates remain remarkably high, as the calculations are deferred entirely to the browser's hardware-accelerated compositor thread.27

Turing Completeness and 3D DOM Manipulation

To genuinely appreciate the computational depth of modern HTML and CSS, one must analyze the extreme edge cases where security researchers and specialized developers force the browser to execute complex logic, game states, and fully navigable 3D environments strictly without JavaScript. These extreme implementations serve as profound proofs-of-concept, confirming that the native web platform possesses computational capabilities far exceeding its original design as a document viewer.

The Checkbox Hack and CSS State Engines

The foundational mechanism that enables complex logic in a zero-JavaScript environment is known as the "checkbox hack." Because CSS cannot store or mutate localized variables in the traditional programming sense, developers utilize hidden HTML \<input type="checkbox"\> and \<input type="radio"\> elements as binary state machines.42 By strategically injecting a matrix of hidden inputs at the absolute top of the DOM structure, and mapping them to visual \<label\> elements dispersed throughout the user interface, a user clicking a label inherently toggles the hidden input's :checked pseudo-class.43 Using CSS general sibling combinators (\~) or adjacent sibling combinators (+), the CSS engine can read this :checked state globally and conditionally apply styles, keyframe animations, or display properties to entirely separate sections of the page.43 This precise state-engine mechanism has been utilized to engineer fully playable, zero-JavaScript clones of classic games such as Tic-Tac-Toe, Snake, and Flappy Bird.45 In the CSS architecture of Flappy Bird, for example, infinite CSS keyframe animations drive the continuous forward motion of the background and the persistent downward pull of gravity. The :active or :checked state of a massive, screen-covering label momentarily triggers an overriding, negative translateY animation with a custom cubic-bezier easing curve to simulate the bird's jump.45

Constructing First-Person 3D Architectures

Security researchers and experimental frontend engineers, notably Gareth Heyes and Ben Evans, have stretched this methodology to its absolute breaking point by constructing fully traversable, first-person 3D environments using nothing but HTML and CSS.42 To render a 3D world without the aid of a WebGL canvas, the entire DOM must be warped into a 3D spatial grid. A master container (\<div class="scene"\>) is granted profound CSS perspective properties, forcibly altering the visual vanishing point of the viewport.53 Inside this container, standard HTML elements representing the floor, ceiling, and individual walls are manipulated using hardware-accelerated 3D transforms: rotate3d(), rotateX(), rotateY(), and translateZ().53 For user locomotion within these environments, Evans' "CSS Backrooms" project utilizes a sprawling matrix of hidden radio buttons representing specific X and Z coordinates on a grid (e.g., X-1, Z-1).42 When the user clicks an on-screen directional arrow (which is semantically a \<label\>), the CSS engine updates to the next sequential radio button's :checked state.43 This state change cascades down the CSSOM, targeting the master scene container and altering its global translateX and translateZ coordinates. By applying a smooth transition property to these transforms, the browser effortlessly interpolates the movement between coordinates, generating the highly convincing illusion of walking through a physical, three-dimensional maze.42 The only JavaScript required in these intricate environments is often a minimal, one-line script strictly used to trigger audio files, as HTML5 currently lacks a declarative mechanism to fire audio playback based on CSS state changes.42

The Security Implications of CSS Engines

While constructing 3D games in CSS demonstrates unparalleled mastery of the platform, it simultaneously exposes severe security implications. The revelation that CSS can operate as a functional state engine implies that CSS can be weaponized. Security analysts have repeatedly demonstrated "Blind CSS Exfiltration" attacks. In this vector, incredibly complex CSS attribute selectors are injected into a compromised page to match specific characters of hidden, sensitive data, such as Cross-Site Request Forgery (CSRF) tokens or personal information.52 When the CSS engine successfully matches a character (e.g., input\[value^="a"\]), it executes a rule to load an external background image from an attacker-controlled server, appending the matched character to the URL string. Through this process, the CSS engine systematically exfiltrates sensitive data bit by bit, entirely bypassing JavaScript sandboxes, Content Security Policies (CSP) aimed at scripts, and traditional Cross-Site Scripting (XSS) defenses.52 This vulnerability serves as a stark reminder that modern HTML and CSS are computationally powerful enough to execute logic that was previously thought to reside strictly within the domain of imperative, Turing-complete programming languages.

Server-Side Generation and the Return of the No-JS Dashboard

While constructing complex state machines using CSS checkboxes is largely reserved for experimental showcases and security research, the philosophical core of the zero-JavaScript movement has profoundly influenced modern, production-grade web frameworks. The software industry is witnessing a massive, strategic pivot away from default client-side rendering (the hallmark of SPAs like early React and Angular) toward server-centric architectures that output highly optimized, static HTML.

Astro and the Islands Architecture

The Astro web framework stands at the absolute forefront of this architectural realignment, gaining immense industry traction by enforcing a strict "zero-JavaScript by default" paradigm.3 Unlike traditional SPAs that force the client to download and parse massive JavaScript runtimes regardless of the page's actual complexity, Astro operates as a modern Multi-Page Application (MPA) generator.57 During the build process, Astro evaluates all UI components on the server, strips away the JavaScript runtime, and ships pure, static HTML and CSS directly to the browser.57 This approach instantly eradicates the performance bottlenecks associated with client-side hydration, delivering near-instantaneous load times.3 However, modern applications still demand localized interactivity. Astro accommodates this through the "Islands Architecture".4 Developers explicitly define isolated pockets of interactivity—referred to as "islands"—using specific directives such as client:load or client:visible. The framework preserves the vast majority of the page as static HTML but selectively hydrates only the specific components (such as an interactive data table or an image lightbox) that strictly require JavaScript.3 This methodology allows development teams to utilize popular UI component libraries (like React, Vue, or Svelte) without passing the catastrophic performance tax of a full-page runtime down to the user.57 Showcase templates, such as the highly popular neobrutalist "Brutal" theme developed by Astro core team member Eliancodes, prove that highly stylized, SEO-optimized, and visually striking applications can be deployed without executing a single line of client-side JavaScript by default.60

HTMX and Server-Driven Interactivity

Operating parallel to Astro is the rapid adoption of HTMX, a library specifically designed to extend HTML's capabilities and entirely eliminate the need for complex client-side state management architectures like Redux or Context API. Traditional SPAs intercept user actions, process JSON data via an external REST or GraphQL API, and utilize a local JavaScript templating engine to update the DOM. HTMX completely circumvents this convoluted process by returning localized HTML snippets directly from the server. When a user interacts with a dashboard, HTMX issues an asynchronous request based on specialized HTML attributes (hx-get, hx-post).66 The server calculates the new application state and responds with a small, pre-rendered piece of HTML. HTMX then seamlessly swaps this exact snippet into the live DOM without triggering a full page reload.66 This architecture empowers developers to engineer highly complex, real-time interactive dashboards entirely in backend languages. For instance, developers can construct streaming financial data visualizations utilizing Plotly entirely in Python.66 The server generates the complex SVG charting code, and the client browser merely renders the updated HTML snippets.66 From the perspective of the front-end developer, the application operates under a strict "No-JS" philosophy.66 By forcefully migrating state management back to the server, the client architecture remains incredibly thin, performant, and permanently immune to the spiraling complexities of modern JavaScript bundle optimization and dependency hell.67

Component Encapsulation via Native Web Components

Finally, the push for native implementation has revitalized the adoption of standard Web Components. For years, developers relied on framework-specific components (e.g., React .jsx files) to encapsulate UI logic. Native Web Components, utilizing the Custom Elements API and the Shadow DOM, provide a framework-agnostic method to achieve the same encapsulation purely through native browser APIs. By leveraging lightweight tooling such as Lit and Vite alongside TypeScript, developers can author incredibly efficient custom HTML tags.27 An illustrative example is the creation of a \<for-love\> web component, designed to natively render an animated cascade of hearts across the viewport.27 The architecture of such a component demonstrates how native specifications have matured. By utilizing Lit's @property decorators and custom getters/setters, the component strictly types its inputs and prevents performance overloads (e.g., capping the maximum number of rendered elements).27 Furthermore, by leveraging the :host CSS pseudo-class, the component perfectly encapsulates its styling, allowing it to define internal CSS variables (--\_color, \--\_size) while providing a clean API for external style overrides.27 Critically, this native approach respects system-level accessibility settings natively. By including an @media (prefers-reduced-motion) query directly inside the Web Component's encapsulated CSS, the animation logic elegantly disables itself without requiring complex JavaScript context providers or global event listeners, proving that advanced, empathetic UI design is best achieved closest to the metal of the browser.27 The evolution of the web platform indicates a decisive, irreversible shift in architectural best practices. The limitations of early HTML and CSS that forced the engineering community into a heavy reliance on JavaScript have been systematically dismantled. The maturation of native browser APIs—from the Popover API and HTML Invoker Commands to CSS Anchor Positioning and Customizable Selects—has fundamentally altered the equilibrium of web development. By delegating complex UI state management, exact positioning mathematics, overlay bounding logic, and focus trapping directly to the browser's highly optimized native rendering engine, developers can achieve performance metrics, visual fidelity, and baseline accessibility that are nearly impossible to replicate with custom JavaScript. Coupled with server-first rendering frameworks and HTML-extending protocols, the industry is embracing a paradigm where the browser itself is the ultimate framework. The most advanced, exciting, and resilient websites globally are now those that ship the least amount of executable code, proving that an expert application of raw HTML and CSS remains the pinnacle of modern web architecture.

Works cited

1. No CSS, No Javascript. Longevity on the web., accessed June 28, 2026, https://jch.github.io/posts/2025-09-18-no-css-no-js.html
2. Is Supporting Zero-JavaScript Users Worth It in 2026? : r/webdev \- Reddit, accessed June 28, 2026, https://www.reddit.com/r/webdev/comments/1r2oxz2/is\_supporting\_zerojavascript\_users\_worth\_it\_in/
3. What is Astro and Why Use it \- Strapi, accessed June 28, 2026, https://strapi.io/blog/what-is-astro
4. Astro, accessed June 28, 2026, https://astro.build/
5. Is there a tiny market for websites without js? : r/webdev \- Reddit, accessed June 28, 2026, https://www.reddit.com/r/webdev/comments/17jo8od/is\_there\_a\_tiny\_market\_for\_websites\_without\_js/
6. Art portfolio \- entire design is pure CSS. I hope you like it and get inspired \- Reddit, accessed June 28, 2026, https://www.reddit.com/r/css/comments/tp7g25/art\_portfolio\_entire\_design\_is\_pure\_css\_i\_hope/
7. Tiny Awards for Small Websites | Hacker News, accessed June 28, 2026, https://news.ycombinator.com/item?id=36267362
8. 14 Stunning HTML Websites \[+ How They Work\] \- HubSpot Blog, accessed June 28, 2026, https://blog.hubspot.com/website/html-websites
9. HTML is all you need to make a website \- Salma Alam-Naylor, accessed June 28, 2026, https://whitep4nth3r.com/blog/html-is-all-you-need-to-make-a-website/
10. GitHub \- israelias/resume-ux: An interactive website with no JavaScript, with advanced CSS3, with applied object-orientation to HTML5, accessed June 28, 2026, https://github.com/israelias/resume-ux
11. html-structure · GitHub Topics, accessed June 28, 2026, https://github.com/topics/html-structure?o=asc\&s=updated
12. HTML only websites in 2024 \- Web Designer Forum, accessed June 28, 2026, https://www.webdesignerforum.co.uk/topic/97490-html-only-websites-in-2024/
13. Reviewing 3 HTML-Only Websites: Developer Insights on Speed Optimization and Minimalist Design \- DEV Community, accessed June 28, 2026, https://dev.to/mr\_nova/reviewing-3-html-only-websites-developer-insights-on-speed-optimization-and-minimalist-design-2lo2
14. 6 Best HowdyGo Alternatives in 2026 (Tested & Compared) | Supademo Blog, accessed June 28, 2026, https://supademo.com/blog/howdygo-alternatives
15. Best Interactive Demo Platforms for B2B Sales Enablement (2026) \- SyncGTM, accessed June 28, 2026, https://syncgtm.com/blog/what-are-the-best-interactive-demo-platforms-for-b2b-sales-enablement
16. The 8 best Storylane alternatives in 2026 \- Saltfish, accessed June 28, 2026, https://saltfish.ai/blog/storylane-alternatives
17. Best Interactive Demo Software of 2026 (Tested & Compared) \- HowdyGo, accessed June 28, 2026, https://www.howdygo.com/blog/interactive-product-demo-comparison
18. Walnut vs Storylane Comparison, accessed June 28, 2026, https://www.walnut.io/blog/product-demos/walnut-vs-storylane-comparison/
19. Popover API \- MDN Web Docs, accessed June 28, 2026, https://developer.mozilla.org/en-US/docs/Web/API/Popover\_API
20. Introducing the popover API | Blog \- Chrome for Developers, accessed June 28, 2026, https://developer.chrome.com/blog/introducing-popover-api
21. 10+ Popover API Examples \- FreeFrontend, accessed June 28, 2026, https://freefrontend.com/html-popover-api/
22. Popover API lands in Baseline | Blog \- web.dev, accessed June 28, 2026, https://web.dev/blog/popover-api
23. 70+ CSS Modal Windows \- FreeFrontend, accessed June 28, 2026, https://freefrontend.com/css-modal-windows/
24. 10+ CSS clamp() Example \- FreeFrontend, accessed June 28, 2026, https://freefrontend.com/css-clamp/
25. 20+ CSS Glitch Effects: Free Code Snippets & Examples \- FreeFrontend, accessed June 28, 2026, https://freefrontend.com/css-glitch-effects/
26. 20+ View Transition API \- FreeFrontend, accessed June 28, 2026, https://freefrontend.com/view-transition-api/
27. html | utilitybend, accessed June 28, 2026, https://utilitybend.com/category/html
28. HTML popovers shown on interest should be accessible on mobile devices | utilitybend, accessed June 28, 2026, https://utilitybend.com/blog/html-popovers-shown-on-interest-should-be-accessible-on-mobile-devices
29. Invoker Commands API \- MDN Web Docs, accessed June 28, 2026, https://developer.mozilla.org/en-US/docs/Web/API/Invoker\_Commands\_API
30. HTML Invoker Commands Achieve Baseline Support across All Major Browsers \- InfoQ, accessed June 28, 2026, https://www.infoq.com/news/2026/01/html-invoker-commands/
31. command and commandfor: the Invoker Commands API, accessed June 28, 2026, https://webinista.com/updates/command-and-commandfor-invoker-commands-api/
32. Introducing command and commandfor | Blog \- Chrome for Developers, accessed June 28, 2026, https://developer.chrome.com/blog/command-and-commandfor
33. Invoker Commands (Explainer) \- Open UI, accessed June 28, 2026, https://open-ui.org/components/invokers.explainer/
34. CSS Wrapped: 2023\! | Blog | Chrome for Developers, accessed June 28, 2026, https://developer.chrome.com/blog/css-wrapped-2023
35. Chris' Corner: All Together Now \- CodePen Blog, accessed June 28, 2026, https://blog.codepen.io/2026/02/16/chris-corner-all-together-now/
36. Chris' Corner: Little Bits of CSS \- CodePen Blog, accessed June 28, 2026, https://blog.codepen.io/2025/09/22/chris-corner-little-bits-of-css/
37. Advanced Form Control Styling With Selectmenu And Anchoring API \- Smashing Magazine, accessed June 28, 2026, https://www.smashingmagazine.com/2023/06/advanced-form-control-styling-selectmenu-anchoring-api/
38. Starting to write CSS in 2023 will be different | by w3cplus \- Medium, accessed June 28, 2026, https://w3cplus.medium.com/starting-to-write-css-in-2023-will-be-different-9aba143a6160
39. Popover API | Hacker News, accessed June 28, 2026, https://news.ycombinator.com/item?id=40317740
40. ux \- utilitybend, accessed June 28, 2026, https://utilitybend.com/category/ux
41. Portfolio Pure CSS Scroll Snapping Tutorial \- YouTube, accessed June 28, 2026, https://www.youtube.com/watch?v=pNPkVQD7vlM
42. A Pure CSS Game \- Ben Evans, accessed June 28, 2026, https://www.tinydesign.co.uk/ben-evans-portfolio/css-games.html
43. A Pure CSS 3D Maze\! \- Chrome only \- DEV Community, accessed June 28, 2026, https://dev.to/ivorjetski/a-pure-css-3d-maze-chrome-only-5c80
44. 30 Open Source HTML/CSS Projects from CodePen \- DzineBlog.com, accessed June 28, 2026, https://dzineblog.com/30-html-css-projects-from-codepen/
45. NoJS 3 \- The dawn of Flappy Bird. Making a Flappy Bird clone using pure HTML and CSS, no JavaScript, accessed June 28, 2026, https://blog.scottlogic.com/2026/03/09/noJS-3-flappy-bird.html
46. What are some examples of websites that use only CSS and HTML, without JavaScript or frameworks? \- Quora, accessed June 28, 2026, https://www.quora.com/What-are-some-examples-of-websites-that-use-only-CSS-and-HTML-without-JavaScript-or-frameworks
47. Pure HTML playable TicTacToe game (no CSS nor JavaScript) in 367KB \- GitHub Gist, accessed June 28, 2026, https://gist.github.com/p4bl0-/abf4960f07045d7a443230a46e73b849
48. Snake...in pure HTML⁉️ \[no JS, no CSS, no images\!\!\] \- DEV Community, accessed June 28, 2026, https://dev.to/grahamthedev/snakein-pure-html-no-js-no-css-no-images-2ccg
49. Flappy Bird Clone in Pure HTML and CSS (no JavaScript) : r/webdev \- Reddit, accessed June 28, 2026, https://www.reddit.com/r/webdev/comments/1rtgp0l/flappy\_bird\_clone\_in\_pure\_html\_and\_css\_no/
50. NoJS 2 \- Stochastic Boogaloo. Making a tic-tac-toe game with 'randomness' using pure HTML and CSS. Without JavaScript\! \- Scott Logic Blog, accessed June 28, 2026, https://blog.scottlogic.com/2024/05/17/noJS-2-stochastic-boogaloo.html
51. Pure CSS first person 3D website portfolio without any JavaScript : r/programming \- Reddit, accessed June 28, 2026, https://www.reddit.com/r/programming/comments/wbto75/pure\_css\_first\_person\_3d\_website\_portfolio/
52. Researcher \- Gareth Heyes \- PortSwigger, accessed June 28, 2026, https://portswigger.net/research/gareth-heyes
53. Creating a 3D world in pure CSS | PortSwigger Research, accessed June 28, 2026, https://portswigger.net/research/creating-a-3d-world-in-pure-css
54. The Backrooms \- CSS Edition \- Ben Evans, accessed June 28, 2026, https://tinydesign.co.uk/css-backrooms-smlr/
55. Blind CSS Exfiltration: exfiltrate unknown web pages | PortSwigger Research, accessed June 28, 2026, https://portswigger.net/research/blind-css-exfiltration
56. Our Favorite XSS Filters/IDS and how to Attack Them \- Black Hat, accessed June 28, 2026, https://blackhat.com/presentations/bh-usa-09/VELANAVA/BHUSA09-VelaNava-FavoriteXSS-SLIDES.pdf
57. Shipping Zero JavaScript with Astro \- Senvio, accessed June 28, 2026, https://www.senvio.com/blog/shipping-zero-javascript-with-astro
58. Astro Web Development Agency | Static Site Development, accessed June 28, 2026, https://opace.agency/services/web-design/astro-development/
59. Astro Development Agency | Content-First Sites \- ComCreate, accessed June 28, 2026, https://comcreate.io/stack/astro
60. 5 Portfolio Templates You Can Deploy Tonight (No React Experience Required), accessed June 28, 2026, https://dev.to/srbhr/-5-portfolio-templates-you-can-deploy-tonight-no-react-experience-required-4d5k
61. Brutal \- Astro, accessed June 28, 2026, https://astro.build/themes/details/brutal/
62. my-astro-project-using-bun \- CodeSandbox, accessed June 28, 2026, https://codesandbox.io/p/github/mingderwang/my-astro-project-using-bun
63. ElianCodes/brutal: A neobrutalism Astro starter theme \- GitHub, accessed June 28, 2026, https://github.com/eliancodes/brutal
64. Brutal: A theme for Astro \- Elian Codes, accessed June 28, 2026, https://www.elian.codes/blog/23-03-01-publishing-brutal-theme/
65. Brutal | Astro Themes & Templates, accessed June 28, 2026, https://www.astrothemes.dev/theme/eliancodes-brutal/
66. I Built This Dashboard Without JavaScript \- YouTube, accessed June 28, 2026, https://www.youtube.com/watch?v=RzpgzbKVKqA
67. Interactive Server-Rendered Webapps: You Don't Need JavaScript \- ⚡️ Blixt Dev ⚡️, accessed June 28, 2026, https://blixtdev.com/you-dont-need-javascript-to-build-rich-interactive-webapps/
68. Plotly vs. Bokeh: Interactive Python Visualisation Pros and Cons | Dr. Paul IACOMI, accessed June 28, 2026, https://pauliacomi.com/2020/06/07/plotly-v-bokeh.html