skills.rest
marcushellberg
marcushellbergCOMMUNITY
Explore all skills by this author →
GitHub

client-side-views

Build client-side Vaadin 25 views with React or Hilla.

6|1|Updated Feb 24, 2026
Search Tags:#frontend#react#routing#client-side#vaadin-25#hilla
One-click install
npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill client-side-views-marcushellberg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: client-side-views
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/client-side-views
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill client-side-views-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vaadin 25 projects often require browser-based, client-side UIs to deliver rich interactivity, offline capabilities, and precise control over rendering. This guide provides a structured approach to building client-side views using React or Hilla, enabling smooth integration with Java endpoints and a cohesive routing model.

Core Features & Use Cases

  • Client-side views run in the browser and communicate with Java endpoints over HTTP.
  • Use the Vaadin MCP tools to look up the latest documentation; always set vaadin_version to '25' and ui_language to 'react'.
  • Supports file-based routing (src/main/frontend/views) and ViewConfig-driven navigation, layouts, and security.

Quick Start

Create a Vaadin 25 React/Hilla client-side view by mapping routes in src/main/frontend/views and calling generated endpoints from Frontend/generated/endpoints.

Frequently Asked Questions about client-side-views

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build client-side views with React in Vaadin 25?▼

Vaadin 25 supports client-side views by using React or Hilla to map routes within the src/main/frontend/views directory. This approach enables browser-based rendering, file-based routing, and HTTP communication with Java endpoints.

What is file-based routing in Hilla and how does it work?▼

File-based routing in Hilla maps browser navigation directly to files under src/main/frontend/views. It utilizes ViewConfig-driven navigation to automatically handle layouts, security parameters, and UI rendering without manual route configuration.

Can I use React components with Java server endpoints in Vaadin?▼

Yes, client-side React components can communicate with Java server endpoints in Vaadin. The system relies on generated endpoint files located in Frontend/generated/endpoints to handle HTTP requests and data exchange between the browser and backend.

Does Vaadin 25 require a specific version setting for React and Hilla UI development?▼

Yes, Vaadin 25 requires setting vaadin_version to '25' and ui_language to 'react' during development. This ensures the framework correctly applies browser-based rendering rules and integrates MCP documentation tools.

How do I call generated endpoints from a Hilla client-side view?▼

To call generated endpoints from a Hilla client-side view, import the server definitions from Frontend/generated/endpoints into your React components. This allows your browser-based UI to execute HTTP calls to the Java backend seamlessly.

When should I choose client-side rendering over server-side in Vaadin?▼

Choose client-side rendering in Vaadin when you need rich browser interactivity, offline capabilities, and precise control over the UI rendering lifecycle. It runs views in the browser and communicates with Java endpoints over HTTP.

Related Skills

Explore More Software Engineering Skills→
vaadinvaadin
11

client-side-views

Build client-side React/Hilla views with file-based routing and type-safe Java endpoints.

Official
Advanced
wovosoftwovosoft

wayfinder-development

Generate type-safe Laravel route helpers for frontend TypeScript components.

Community
Intermediate
aura-farmingaura-farming
3

team-init

Detect the connected GTM stack and write a custom CLAUDE.md file.

Community
Intermediate
grvpanchalgrvpanchal
1

server-ssr

Coordinates SSR HTML generation, hydration, and data fetching for Next.js and Express applications.

Community
Advanced