Using a CDN

For the easiest setup, include UIElement directly in your HTML via a CDN. This is ideal for quick projects or testing.

<script src="https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js"></script>

Or use <script type="module"> to import UIElement in your HTML:

<script type="module">
import { UIElement } from 'https://cdn.jsdelivr.net/npm/@efflore/ui-element@latest/index.min.js';

// Your code here
</script>

Using a Self-Hosted Copy

You can include the built UIElement script from a local or hosted path if you prefer to self-host the script. The latest version is available in the Github Repo under https://github.com/efflore/ui-element/blob/main/index.min.js

Remember to keep the hosted file updated to use the latest features and bug fixes.

Installing with NPM

If you are using a bundler like Vite, Rollup, Webpack, or another module system, npm is the best way to install and manage UIElement.

npm install @efflore/ui-element

Then import UIElement in your JavaScript:

import { UIElement } from '@efflore/ui-element';

Use build tools to bundle the library into your project as necessary.

Creating Your First Component

Let's verify your setup by creating an interactive HelloWorld component that updates based on user input.

class HelloWorld extends UIElement {
				connectedCallback() {
				// Update content dynamically based on the 'name' signal
				this.first('.greeting').map(setText('name'));
			
				// Handle user input to change the 'name'
				this.first('input').map(on('input', event => this.set('name', event.target.value)));
				}
			}
			HelloWorld.define('hello-world');

Include it in your HTML (server-rendered):

<hello-world>
				<label for="name-input">Your name</label>
				<input type="text" id="name-input" />
				<p>Hello, <span class="greeting">World</span>!</p>
			</hello-world>

Verifying Installation

To verify your setup:

• CDN & Self-Hosted Users: Check the browser console for any script loading errors and ensure typing in the input field updates the greeting.
• NPM Users: Ensure node_modules contains @efflore/ui-element and your bundler correctly bundles the library.

Next Steps

Now that you've set up UIElement, you're ready to dive deeper into building reactive Web Components. Check out the Core Concepts page to learn more about signals and reactivity, or proceed to the Detailed Walkthrough for building more advanced components.