Nexsas
HTML

Customization

Learn how to customize Nexsas in production and development mode.

This guide walks you through customizing your Nexsas template, whether you're editing production build output or working in development source files.

Production files

To customize production files:

  1. Open the project root folder in your code editor
  2. Locate the files you want to modify
  3. Make your changes to HTML, CSS, or JavaScript
  4. Save

Development files

Component structure

Page content is managed through a modular component system inside src/components:

  • src/components/pages: Page-specific components (organized by page name)
  • src/components/shared: Reusable components used throughout the project

Example: to customize the hero section of crypto marketing, edit src/components/pages/hero.htm.

CSS architecture

Nexsas is built with Tailwind CSS v4 and custom utility classes. Styles live in src/styles and are imported into src/styles/main.css.

CSS file organization

  • header.css: Header and navigation utility classes
  • badge.css: Badge utilities (badge-green, badge-blur, badge-primary, etc.)
  • button.css: Button variants and styling
  • base.css: Typography and base styles
  • custom-swiper.css: Customized Swiper styles
  • common.css: Shared utilities
  • variable.css: CSS custom properties and Inter Tight font configuration
The project uses the Inter Tight font. You can customize it in variable.css.

Asset management

Images

Images are stored in public/images. To replace an image:

  1. Open public/images
  2. Replace the existing file
  3. Keep the same filename/format (or update references)

Icons

Custom icons are stored in public/icons. Follow the same process as images.

JavaScript customization

Custom JavaScript is organized in src/js/main.js and modularized into multiple files. To customize behavior:

  1. Open the relevant JS file
  2. Find the function you need
  3. Update it while keeping existing function signatures intact

Adding animations

  • Create new files in src/js/animation/
  • Import and initialize them in src/main.js

Creating new pages

Create the HTML file

Create a new HTML file at the project root. The filename becomes the route.

Example new-page.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <Component src="src/components/shared/head-links.htm" />
    <title>New Page - Nexsas</title>
  </head>
  <body>
    <Component src="src/components/shared/header.htm" />
    <main>
      <!-- Page content will be added here -->
    </main>
    <Component src="src/components/shared/footer.htm" />
  </body>
</html>

Create the component directory

  1. Create src/components/pages/new-page/
  2. Put page-specific components for that page inside this folder

Create page components

Example hero.htm:

<section>
  <div>
    <h1>New Page Hero</h1>
  </div>
</section>

Import components

Import components into your HTML file:

<main>
  <Component src="src/components/pages/new-page/hero.htm" />
  <!-- Add additional components as needed -->
</main>

Add additional sections

Continue creating components for other sections (features, testimonials, pricing, etc.) and import them into the page.

Render your page

Open http://localhost:5173 and append your page name, for example http://localhost:5173/new-page.html.

SEO and head meta

Global SEO tags live in src/components/shared/head-links.htm. Edit that file to change site-wide metadata:

  • Meta title: update meta[name="title"]
<meta name="title" content="Your Page or Site Title" />
  • Meta description: update meta[name="description"]
<meta name="description" content="A short description for search engines and link previews." />
  • Open Graph image: update meta[property="og:image"] (optionally width/height/alt)
<meta property="og:image" content="/images/og/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descriptive image alt text" />
  • Twitter image: keep in sync with OG image (or set a different one)
<meta name="twitter:image" content="/images/og/og-image.jpg" />
  • Favicons and app icons: replace files in public/ and ensure links point to them
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
  • Canonical URL: update the canonical link
<link rel="canonical" href="https://your-domain.com/" />

Per-page overrides: if a page needs different metadata, add or override the relevant tags in that page’s <head> section. Tags in the page take precedence when placed after the shared component.

Best practices

  • Component organization: keep components modular with descriptive names and consistent structure
  • CSS customization: use Tailwind utilities, prefer CSS custom properties for theme values, keep custom CSS minimal
  • Asset management: optimize images, use consistent naming, keep folders organized

Support

  • Email: hello@pixels71.com

Folder Structure

Understand how the Nexsas HTML project is organized.

Update Icons

Use Nexsas icon classes in your HTML templates.

Copyright © 2026