Starter Guide

The fastest way to start building with Element is using our official starter template. This template includes Vite for fast development, TypeScript support, and a well-structured project layout.

Creating a New Project

Clone the starter template and get started immediately:

# Clone the starter template
git clone https://github.com/dmnchzl/elementstarter my-project

# Navigate to the project directory
cd my-project

# Install dependencies
npm install

# Start the development server
npm run dev

Project Structure

The starter template provides a well-organized project structure that scales from simple applications to complex projects.

my-project/
├── public/
│   ├── favicon.svg
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.spec.ts
│   ├── App.ts
│   ├── index.css
│   ├── main.ts
│   └── vite-env.d.ts
├── index.html
├── package.json
├── README.md
├── tsconfig.json
└── vitest.config.json

Key Files

src/App.ts

The main application component:

import { createSignal, html } from "@dmnchzl/element";
import "./App.css";

export default function App() {
  const [count, setCount] = createSignal(0);

  return html`
    <div>
      <a href="https://vite.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://github.com/dmnchzl/element" target="_blank">
        <img src="/favicon.svg" class="logo element" alt="Element logo" />
      </a>
    </div>
    <h1>Vite + Element</h1>
    <div class="card">
      <button onclick="${() => setCount(count() + 1)}">
        Count is ${count}
      </button>
      <p>Edit <code>src/App.ts</code> and save to test HMR</p>
    </div>
    <p class="read-the-docs">
      Click on the Vite and Element logos to learn more
    </p>
  `;
}

src/App.spec.ts

Some component unit tests:

import { fireEvent, getByRole, getByText } from "@testing-library/dom";
import { describe, expect, it } from "vitest";
import App from "./App";

const render = (node: Node): HTMLElement => {
  const container = document.createElement("div");
  container.appendChild(node);
  return container;
};

describe("App", () => {
  it("should renders", () => {
    const container = render(App());
    expect(getByText(container, "Vite + Element")).toBeDefined();
  });

  it("should triggers event", () => {
    const container = render(App());
    const btn = getByRole(container, "button", { name: "Count is 0" });
    fireEvent.click(btn);
    expect(getByText(container, "Count is 1")).toBeDefined();
  });
});

Development Features

Hot Module Replacement (HMR)

The starter template includes HMR support, so your changes are reflected immediately without losing application state.

Testing with Vitest and Testing Library

The project comes preconfigured for testing with Vitest and Testing Library. You can write and run tests for your Element components with full TypeScript support.