> Markdown version of [Importing HTML and JavaScript](https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-importing). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Importing JavaScript, JavaScript modules, and HTML

You can add classic JavaScript source files, JavaScript modules, and HTML imports (compatibility mode) to your host page directly from your Java classes.

> **Note:** Polymer 3 templates should be imported using `@JsModule` (see [Creating Polymer Templates](https://vaadin.com/docs/v14/flow/templates/polymer-templates/tutorial-template-basic.md) for more information).

> **Note:** HTML imports are no longer supported from Vaadin 14.12 onwards.

There are two ways to add JavaScript and HTML files. Both have the same effect and you can use whichever suits you best.

1. Using the `@JavaScript`, `@JsModule`, and `@HtmlImport` annotations.

   **Example**: Importing HTML and JavaScript files into `CustomComponent`.

   ```java
   @Tag("div")
   @JsModule("./src/my-module.js")
   @JavaScript("/js/script.js")
   @HtmlImport("/html/htmlimport.html")
   static class CustomComponent extends Component
           implements HasText {
     // implementation omitted
   }
   ```

   - All the resource annotations are repeatable. Add one annotation for each file you need to add.

2. Using the `addJavaScript(String url)` and `addHtmlImport(String url)` methods from the `Page` class. The `Page` class also has method `addJsModule(String url)` but it is meant to be used to add an external JavaScript module.

   **Example**: Using the `addJavaScript(String url)` and `addHtmlImport(String url)` methods to import HTML and JavaScript files.

   ```java
     private void addDependencies() {
       UI.getCurrent().getPage()
               .addJavaScript("/js/script.js");
       UI.getCurrent().getPage()
               .addHtmlImport("/html/htmlimport.html");
       // external JavaScript module
       UI.getCurrent().getPage()
               .addJsModule("https://unpkg.com/lodash@4.17.15");
     }
   ```

See [Storing and Loading Resources](https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.md) for more on storing your resources, configuring advanced resource loading, and resource load ordering.

`C567F89C-9DD2-4652-AA4C-BBA762BEC5B8`