Framework Directives
A guide to the HTML attributes that power the architecture. These are split between Prisma PHP (Navigation & Lifecycle) and PulsePoint (Reactive DOM Engine).
Prisma PHP: Lifecycle & Navigation
pp-spa
Enables "Soft Navigation" (SPA feel).
By default, <body pp-spa="true"> makes all anchors behave like SPA links. You can toggle this on specific links.
<a href="/logout" pp-spa="false">Logout</a>
pp-loading-content
Defines a placeholder area that is automatically populated with the contents of the file loading.php while Prisma PHP fetches the next page. The markup inside loading.php (skeletons, spinners, or any placeholder HTML) will be injected here to prevent dashboard flicker during navigation.
<div pp-loading-content="true">
<!-- loading.php - file content -->
</div>
pp-reset-scroll
Dashboard HelperForces the scroll container to reset to top during SPA navigation.
scroll-smooth.
overflow-y-auto and
scroll-smooth, the attribute
pp-reset-scroll="true" is unnecessary.
Use the attribute only when you need Prisma PHP to enforce scroll reset on navigation
for custom/non-Tailwind scroll containers.
<main class="flex-1 h-full overflow-y-auto scroll-smooth">
<!-- Page Content -->
</main>
<main class="flex-1 h-full" pp-reset-scroll="true">
<!-- Page Content -->
</main>
PulsePoint: Reactive Engine
pp-component
Core
Marks a DOM element as an isolated component root.
When you write <x-card /> in Prisma PHP, this attribute is automatically added to the output HTML.
pp-for
Reactive list rendering. Iterates over an array in the state.
pp-ref
Assigns a direct DOM reference for manual manipulation via JS.
pp-spread
Dynamically spreads an object of attributes onto the element.
pp-style
Reactive inline CSS. Merged into style at compile time, so editors stop flagging interpolated declarations.
Navigation attributes
These shape what happens during an SPA navigation. They live on the layout, not on the page.
pp-loading-url
Scopes a loading state to a route subtree, so a nested section can show its own placeholder instead of the app-wide one.
pp-loading-transition
JSON with fadeIn and fadeOut timings for the swap. Both default to 250 ms.
pp-scroll-key
An author-defined key for per-element scroll restoration, so a sidebar or a chat pane keeps its position across navigations.
pp-ref-forward
On a component boundary, resolves a parent pp-ref through to the child's real root. Pair it with
pp.imperativeHandle when the child exposes an API.
The full directive list, including the template ones, is on Template Syntax.