Introducing

The website & app framework that thinks like you do.

Get started

  <!-- header.html component -->
  <x-header></x-header>

  <main class="col gap-4 p-4">

    <!-- Greeting + search toggle -->
    <div class="row gap-2 items-center">
      <strong x-show="!searchOpen" class="grow" x-text="$x.t.greeting[$locale]"></strong>
      <input x-show="searchOpen" type="search" class="sm no-focus" x-model="search" :placeholder="$x.t.search[$locale]">
      <button class="sm ghost" @click="searchOpen = !searchOpen; searchOpen ? $nextTick(() => $el.parentElement.querySelector('input').focus()) : (search = '')" :aria-label="searchOpen ? 'Close search' : 'Open search'" x-icon="searchOpen ? 'lucide:x' : 'lucide:search'"></button>
    </div>

    <!-- Products -->
    <div class="col gap-4">
      <template x-for="p in $x.products.filter(p => !search || [p.name, p.price, String(p.stock)].some(f => f.toLowerCase().includes(search.toLowerCase())))" :key="p.name">
        <div class="card">
          <figure><span x-icon="p.icon"></span></figure>
          <div>
            <strong x-text="p.name"></strong>
            <small x-text="p.price"></small>
          </div>
          <span class="badge ms-auto" x-text="p.stock"></span>
        </div>
      </template>
    </div>

  </main>

</body>

Welcome back, James

Steel rebar coil $4,200

Coffee beans $3,150

215

Cotton textile $890

Solar panel $310

412

Hydraulic pump $1,840

Copper wire $670

156

Everything a project needs. Nothing it doesn't.

Plus

And more

Trusted by AI and developers. Powering products in production.

Playcom

Ortus Advisors

Andrew Matlock

Your Next Project

Get the Starter Project

Comparison

Familiar pieces. Fewer steps.

Manifest is an HTML-native runtime with routing, components, reactive data, localization, and an optional cloud backend built in — no build step required.

Aspect	Manifest	React	Vue	HTMX	Astro	Alpine.js

Common questions

Start your project

Introduction to Manifest