# Frontend Overview

The Frontend package renders Capell pages and handles frontend request loading, cache behaviour, public HTML safety, render hooks, and asset integration.

<span class="theme-aware-image">
  <img class="theme-aware-image__light" src="images/screenshots/frontend-published-page.png" alt="Published Capell frontend page" loading="lazy" />
  <img class="theme-aware-image__dark" src="images/screenshots/frontend-published-page-dark.png" alt="Published Capell frontend page" loading="lazy" />
</span>

## Responsibilities

- Resolve the current site, page, language, theme, and layout.
- Render frontend Blade and Livewire page surfaces.
- Coordinate page cache and static-site output support.
- Provide frontend render hooks and asset integration points.

Frontend rendering is configured through the same package-aware settings surfaces used by the admin and core packages.

<span class="theme-aware-image">
  <img class="theme-aware-image__light" src="images/screenshots/frontend-settings.png" alt="Frontend settings in the Capell admin" loading="lazy" />
  <img class="theme-aware-image__dark" src="images/screenshots/frontend-settings-dark.png" alt="Frontend settings in the Capell admin" loading="lazy" />
</span>

Theme UI and default frontend components are owned by `capell-app/foundation-theme`.

SEO metadata is owned by `capell-app/seo-suite`. Sitemap generation and discovery files are owned by `capell-app/site-discovery`. Neither belongs in the Frontend package.

## Read Next

| Need                                            | Read                                                                 |
| ----------------------------------------------- | -------------------------------------------------------------------- |
| Understand site/page/language loading           | [Page and site loading](page-site-loading.md)                        |
| Keep public output safe                         | [Public HTML safety](../../../docs/frontend/public-html-safety.md)   |
| Register render hooks                           | [Extending render hooks](extending-render-hooks.md)                  |
| Build package frontend extensions               | [Frontend extensions](../../../docs/packages/frontend-extensions.md) |
| Register widget resources and delivery settings | [Presentation delivery](presentation-delivery.md)                    |
| Build lazy widget and fragment interactions      | [Capell Interactions](../../../docs/getting-started/capell-interactions.md) |
| Configure server static-cache fallback          | [Server config](server-config.md)                                    |
| Register package Tailwind sources               | [Tailwind assets](tailwind-assets.md)                                |
| Test frontend behavior                          | [Testing frontend](testing-frontend.md)                              |
| Review package-specific frontend security notes | [Security](security.md)                                              |