Built-in Components

Components that come with JAF.

No imports needed.

Show

Conditional rendering with fallback.

source

<Show when={user} fallback="<p>Not logged in</p>">
  <p>Welcome, {user.name}!</p>
</Show>

<Show when={item} keyed>
  <ItemDetail item={item} />
</Show>

Prop	Type	Description
`when`	any	Condition (truthy shows children)
`fallback`	string	Literal HTML when falsy. An expression in it is a build error
`keyed`	boolean	Re-render on reference change

Full documentation →

For

Declarative list iteration.

source

<For each={items} as="item" key="id" fallback="<p>Empty</p>">
  <li>{item.name}</li>
</For>

<For each={items} as="item" index="i">
  <li>{i}: {item}</li>
</For>

Prop	Type	Description
`each`	array	Array to iterate
`as`	string	Item variable name
`index`	string	Index variable name
`key`	string	Property for keying
`fallback`	string	HTML when empty. The one fallback whose expressions are compiled

Full documentation →

Switch / Match

Multi-branch conditionals.

source

<Switch fallback="<p>Unknown</p>">
  <Match when={status === 'loading'}><Spinner /></Match>
  <Match when={status === 'error'}><Error /></Match>
  <Match when={status === 'success'}><Content /></Match>
</Switch>

Switch Props	Type	Description
`fallback`	string	Literal HTML when no match. An expression in it is a build error

Match Props	Type	Description
`when`	any	Condition (truthy renders)

Full documentation →

Dynamic

Render elements/components dynamically.

source

<Dynamic is="button" class="btn">Click</Dynamic>
<Dynamic is={href ? 'a' : 'button'} href={href}>Action</Dynamic>
<Dynamic is="UserCard" user={user} />

Prop	Type	Description
`is`	string	Tag name or component name
`...rest`	any	Passed to element/component

Full documentation →

Teleport

Render in different DOM location.

source

<Teleport to="body">
  <Modal />
</Teleport>

<Teleport to="#modals" disabled={isMobile}>
  <Dropdown />
</Teleport>

Prop	Type	Description
`to`	string	CSS selector target
`disabled`	boolean	Render in place if true

Full documentation →

Suspense

Show fallback while lazy components load.

source

<Suspense fallback="<p>Loading...</p>">
  <LazyComponent />
</Suspense>

Prop	Type	Description
`fallback`	string	Literal HTML while loading. A component tag or an expression in it is a build error

Full documentation →

ErrorBoundary

Catch errors and show fallback.

source

<ErrorBoundary fallback="<p>Something went wrong</p>">
  <RiskyComponent />
</ErrorBoundary>

Prop	Type	Description
`fallback`	string	Literal HTML on error. A component tag or an expression in it is a build error

Full documentation →

Guard

Protect content with permissions.

source

<Guard access="admins" redirect="/login">
  <AdminPanel />
</Guard>

<Guard access={isLoggedIn}>
  <Dashboard />
</Guard>

<Guard access={["admins", "editors"]}>
  <StaffArea />
</Guard>

Prop	Type	Description
`access`	string \| array \| boolean	Permission check
`redirect`	string	A literal path to navigate to when denied. Omitted, it falls to `guards.redirect` in config, then `/`

Full documentation →

Layout

Extend parent layout (use in nested layout.html).

source

<!-- pages/admin/layout.html -->
<Layout>
  <Sidebar />
  <slot />
</Layout>

Full documentation →

slot

Content projection placeholder.

source

<!-- Default slot -->
<slot />
<slot>Default content</slot>

<!-- Named slot -->
<slot name="header" />
<slot name="footer">Default footer</slot>

Full documentation →