Components

Etcher components are an abstraction for Web Components that require no JavaScript boilerplate.

Components are written in etcher’s extended markup format: XTML

Your first component.

We’ll go ahead and open up the components directory and create a new file called Navigation.xtml

Inside, we’ll create a basic navbar.

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<style>
    nav {
        background: #111111;
        color: var(--text-accent);
    }
    
    nav ul {
        display: flex;
        list-style: none;
        padding: 0;
    }

    nav li {
        padding: 1rem;
    }

    nav a {
        color: var(--text-accent);
        text-decoration: none;
    }
</style>

If we then include this component in a page, we’ll see the navbar appear.

<etcher-Navigation></etcher-Navigation>

Using your component

When you’re done with your component, you can include it on any page by just using the tag name.

<etcher-Navigation></etcher-Navigation>

And just like that, you’ve created your first component.