> Markdown version of [In-Project Component](https://vaadin.com/docs/v24/flow/create-ui/web-components/an-in-project-web-component). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# 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](https://vaadin.com/docs/v24/flow/create-ui/web-components.md).

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 <https://start.vaadin.com>.

## <a id="creating-the-component-template"></a>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.

```javascript
import { html, LitElement } from 'lit';

class MyTestElement extends LitElement {

  static get properties() {
    return {
      name: { type: String }
    }
  }

  render() {
    return html`
      <h2>Hello ${this.name}</h2>
    `;
  }
}

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

## <a id="creating-the-component-java-api"></a>Creating the Component Java API

This works in exactly the same way as described in [Creating Java API for a Web Component](https://vaadin.com/docs/v24/flow/create-ui/web-components/java-api-for-a-web-component.md), 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.

```java
@Tag("my-test-element")
@JsModule("my-test-element/my-test-element.js")
public class MyTest extends Component {

    public MyTest(String msg) {
        getElement().setProperty("name", msg);
    }
}
```

## <a id="using-the-web-component"></a>Using the Web Component

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

**Example**: Using the component in the `MainView` class.

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

`F3B26182-6375-44E5-8B83-09BE00801C2A`