Components
Frame
A region of the page that updates independently. Links and forms inside fetch and swap content without full page reload.
Usage
<st-frame id="stats" src="/dashboard/stats">
<!-- initial server-rendered content -->
<div>Active users: 1,234</div>
<a href="/dashboard/stats?period=week">View weekly</a>
</st-frame>
When a link inside the frame is clicked, the component fetches the target URL, finds an <st-frame> with the same id in the response, and swaps its content. The browser URL updates via history.pushState.
Attributes
| Attribute | Required | Description |
|---|---|---|
| id | Yes | Unique identifier to match frames between pages |
| src | No | Initial URL the frame represents. Updated automatically as frame navigates. |
Server Response Requirements
The server must return a complete HTML document containing an <st-frame> with the same id. The simplest approach is to render the full page as normal — the component extracts the matching frame and ignores everything else.
For Laravel apps: Your dashboard route can render the full layout (sidebar, header, frame content) and the frame component will pull out only the frame portion from the response. No need for a separate "frame-only" route.
Events
All events bubble.
| Event | Cancellable | Detail |
|---|---|---|
| st-frame:before-load | Yes | { url, method } |
| st-frame:load | No | { url } |
| st-frame:error | No | { status, statusText, url } |
| st-frame:missing | No | { url } - Response didn't contain matching frame |
Loading State
While fetching, data-loading="true" is set on the host element. Default styling reduces opacity and disables pointer events. Customize via CSS:
st-frame[data-loading="true"] {
opacity: 0.4;
position: relative;
}
st-frame[data-loading="true"]::after {
content: 'Loading...';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}Opting Out
A link can opt out of interception with data-st-frame-passthrough:
<st-frame id="stats">
<a href="/dashboard/stats?period=day">Day</a> <!-- intercepted -->
<a href="/help" data-st-frame-passthrough>Help</a> <!-- normal navigation -->
</st-frame>
External links (different origin), links with target="_blank", and links with the download attribute are never intercepted.
No-JavaScript Fallback
If JavaScript is disabled or hasn't loaded yet, links and forms inside the frame work as normal navigation — full page reloads. The frame degrades gracefully; nothing breaks.