Work with Components

What is a component?

A component is a self-contained object that has its own code: HTML for structure, SCSS for styles, and JS for logic. A component can be very small (for example a single button) or quite large (tabs, spollers, modals, forms, etc.).

Core idea

One component = one folder = predictable structure and easy reuse.

Where components live

All components are located in src/components and are grouped by purpose:

custom/ — your own components (recommended place for custom work).
effects/ — components for effects and animations.
forms/ — components for forms and form elements.
layout/ — layout parts of the site (header, footer, navigation, templates).
wordpress/ — files for WordPress workflows (if you use fullstack mode).

Some components can also have a plugins subfolder for optional features: src/components/layout/header/plugins/...

Using components

Animmaster Vite Template tries to minimize manual JavaScript work. In most cases, to connect a component you only need to add a specific piece of markup — usually a data attribute: data-anim-(folder name).

The build system detects this and automatically connects the component’s JS (and styles, if you import them).

Example: tabs component


<div data-anim-tabs class="tabs">
  ...
</div>

Tip

If a feature requires additional modules (like dynamic adaptive), you’ll usually enable it via its own data attribute as well (example: data-anim-dynamic="...").

Using plugins

Sometimes a component needs small optional features: extra behavior, a tiny script, or a specific effect. For that, Animmaster Vite Template supports a plugins system.

A plugin is considered an addition to a component — it’s not meant to be used alone. A common example is a header scroll effect plugin.

Example: header + scroll plugin


<header data-anim-header data-anim-header-scroll class="header">
  ...
</header>

How it works

When a plugin attribute is detected, the build connects that plugin’s JS/SCSS on top of the base component.

Creating your own component

Custom components should be created inside src/components/custom/. The folder name becomes the component key for “hot connection”.

Create a folder: src/components/custom/<component-name>/
Create files with the same name (only what you need): <component-name>.html, <component-name>.scss, <component-name>.js
If you use SCSS and you have a JS file — import styles in JS: import './<component-name>.scss' (or connect SCSS via HTML <link> if your component doesn’t use JS).

SCSS import inside component JS


import './aside.scss'

export function asideInit() {
  // component logic
}

Naming rules

Use Latin letters, no spaces, no numbers, and no special characters.

For fast scaffolding you can use a helper command:

Terminal

npm run add componentName

This will create the folder and base HTML/SCSS/JS files. The SCSS import is usually already included in the generated JS.

Creating your own plugin

Plugins live inside the component folder: src/components/custom/<component-name>/plugins/<plugin-name>/

Create a plugin folder: .../plugins/<plugin-name>/
Create plugin files (only what you need): <plugin-name>.html, <plugin-name>.scss, <plugin-name>.js
If you use SCSS and you have a JS file — import styles in plugin JS: import './<plugin-name>.scss' (or connect SCSS via HTML <link>).

Plugin connection attribute


<div data-anim-aside data-anim-aside-move class="aside">
  ...
</div>

Rule

Plugin attribute format: data-anim-<component>-<plugin>

Connecting component HTML

If your component has an HTML file that should be inserted into a page, connect it via <include>.

Include component HTML

<include src="@components/custom/aside/aside.html"></include>

Best practice

Keep reusable markup inside the component and connect it via <include>. This way a single edit updates all pages that use it.

Components dev page (playground)

If you develop components before integrating them into real pages, Animmaster Vite Template includes a separate page for comfortable component development and preview.

This page does not go into production build — it exists only for development.

To show it in the developer navigation panel, enable: devcomponents -> enable: true in template.config.js.

Tip

Use the playground to test markup + JS behavior in isolation before placing a component into real pages.

Download

Build faster with a component-first workflow and automatic connection. Download Animmaster Vite Template and start your next project with a clean structure.

Download Animmaster Vite Template Save your time — start now

Components Creating your own components (and plugins)