How to Build Reactive Declarative UI in Vanilla JavaScript

Summary

Declarative Reactive Interfaces Without Frameworks January, 12th 2026 5 min read Table of Contents The Target Behavior Declarative Usage Example Declarative Takeaways Core Building Block: DOM Utility Layer Reactive State via Proxy Polling Logic as a Reusable Abstraction Modal Orchestrator Observations & Takeaways Conclusion Modern UI frameworks offer abstraction layers that make user interfaces declarative and reactive. However, the web platform itself exposes primitives that can be composed to achieve similar patterns without introducing a dedicated UI library. This article demonstrates an experimental approach for creating a reactive, declarative UI flow using only vanilla JavaScript, Web APIs, and Proxy-based state tracking. The purpose of the experiment is to examine how far native capabilities can be pushed without framework-level abstractions and to illustrate architectural benefits of declarative behavior in UI code: improved clarity, maintainability, and reduced coupling. The Target Behavior The experiment focuses on a practical business scenario: Display a modal dialog that performs periodic polling of an API endpoint. The dialog should remain open until a specific condition is met, then resolve or reject accordingly. The modal dynamically: mounts itself into the DOM starts and manages a polling process exposes reactive internal state updates based on the polling result closes automatically when finished provides optional developer controls The primary requirement is that consumer code defines what should happen, not how to wire it. Declarative Usage Example Example invocation: uiModalEngine.showPollingDialog({ endpoint: `${getServiceBaseUrl()}/process/wait_for/confirmation`, requestPayload: () => ({ taskId: currentTask.id, mode: "rapid", includeAudit: true, }), requestOptions: { method: "POST", headers: { "Content-Type": "application/json" }, }, shouldContinue: (response) => response.ok && response.pending === true, intervalMs: 1000, buildContent: (mountNo...