Skip to content

005 ‐ Components

Jump to bottom
Joshua Amaju edited this page Jan 6, 2026 · 2 revisions

Components

Stack54 ships with a small set of built-in components that support server rendering, development ergonomics, and controlled client-side behaviour.

These components are optional and explicit.

Available components

  • Head – enables asset injection
  • LiveReload – development-only hot reload support
  • ClientOnly – render content only in the browser
  • Await – handle async values during rendering

Head

The Head component is required if your view includes component styles or svelte:head declarations.

It is the explicit boundary where Stack54 is allowed to:

  • inject compiled CSS
  • apply svelte:head tags

If Head is not included, styles and head tags will not be inserted into the rendered document.

<script>
  import { Head } from "stack54/components";
</script>

<html>
  <head>
    <Head />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

You only need to include Head once, typically in a root document component.

LiveReload

LiveReload enables hot reloading during development when using the Stack54 dev server.

It should be included in the document head and is not required in production.

<script>
  import { LiveReload } from "stack54/components";
</script>

<html>
  <head>
    <LiveReload />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

Note LiveReload renders no output in production. It is safe to include unconditionally.

ClientOnly

ClientOnly renders its children only in the browser (requires hydration).

This is useful for:

  • browser-only APIs
  • third-party client libraries
  • components that should not run during SSR
<script>
  import { ClientOnly } from "stack54/components";
</script>

<ClientOnly>
  <SomeBrowserOnlyComponent />
</ClientOnly>

During server rendering, the content is skipped.

Await

Await allows you to work with asynchronous values during rendering.

It must be imported directly from its module path.

<script>
  import Await from "stack54/components/Await";
</script>

<Await promise={dataPromise}>
  <p slot="pending">Loading...</p>
  <p slot="then" let:data>{data}</p>
  <p slot="catch" let:error>{error.message}</p>
</Await>

This is especially useful when composing views that depend on async data without pushing that logic into the server layer.

Summary

Stack54 components are:

  • minimal
  • opt-in
  • focused on rendering and integration concerns

They exist to support the server-rendered templating model, not to introduce a client framework.

Clone this wiki locally