3 The User Interface
This chapter covers
- Designing for every surface, screenless agents, SEO, and AI-optimized content.
- The core web metadata that you need on every document.
- Using the semantic and accessible HTML content.
- Prioritizing native rich UI controls with declarative HTML and CSS.
The user interface (UI) is clearly one of the most essential features of your app. It’s what the user will see and with the experience they will interact with. When creating Vanilla Web apps, we won’t advocate for any specific UI or UX (User Experience). Still, we will encourage the use of the platform to maximize reachability, accessibility, and usability, ensuring future-proofing.
We prefer declarative code for our user interface in Vanilla Web. Declarative means describing what you want the UI to be, rather than writing step-by-step instructions for how to build or update it.
HTML and CSS are inherently declarative: you express structure, meaning, and presentation, and the browser handles the logic, state, rendering, accessibility, and edge cases. This matters because declarative interfaces are more resilient, easier to maintain, and far more accessible by default. When you rely on native, declarative controls, you get built-in keyboard support, focus management, semantics, and accessibility behaviors for free, all without hand-crafting fragile JavaScript to imitate what the platform already does well.