Documentation versions (currently viewingVaadin 23)
New Acceleration Kits: Observability Kit, SSO Kit, and Swing Kit. Read the blog post.

Creating an In-Project Web Component

In the majority of circumstances, the best way to integrate a public Web Component into Vaadin is to follow the steps in Integrating a Web component.

As an alternative, if you want to create a UI component that’s specific to your application, you can integrate and develop the component within your application project.

This section demonstrates how to do this using the

Creating the Component Template

The first step is to create the JavaScript Lit template in frontend/my-test-element/my-test-element.js

Example: Defining the my-test-element JavaScript template.

import { html, LitElement } from 'lit';

class MyTestElement extends LitElement {
  render() {
    return html`

window.customElements.define('my-test-element', MyTestElement);

Creating the Component Java API

This works in exactly the same way as described in Creating Java API for a Web Component, except that the static files are loaded from your project. You can modify them while creating the Java API.

Example: Defining the matching template class.

public class MyTest extends Component {

    public MyTest(String prop1) {
        getElement().setProperty("prop1", prop1);

Using the Web Component

You can now use the component in other parts of your code.

Example: Using the component in the MainView class.

public class MainView extends VerticalLayout {
    public MainView() {
        add(new MyTest("World"));