Scripts
Sovrium pages are server-rendered, then progressively enhanced. Most interactivity needs no JavaScript from you — see Interactions. When you do need your own, a page's scripts block declares it: external or inline.
pages:
- name: Dashboard
path: /dashboard
scripts:
externalScripts:
- { src: 'https://plausible.io/js/script.js', defer: true, position: head }
- { src: 'https://cdn.example.com/widget.js', async: true, position: body-end }
features: { betaPanel: true }
components:
- { type: text, element: h1, content: 'Dashboard' }Page scripts
scripts is a page property. There is no app-wide scripts block: a script that belongs on every page is declared on every page that needs it, which keeps the page config the single place you look to know what a page loads.
| Property | Description |
|---|---|
externalScripts |
External dependencies. external is accepted as an alias. |
inlineScripts |
Inline JavaScript snippets. |
features |
Client-side toggles — a boolean per feature, or { enabled, config }. |
config |
Arbitrary client-side configuration data exposed to scripts. |
The inline key is inlineScripts, not inline. Because unknown keys are dropped rather than rejected, a page declaring inline: validates cleanly and then ships no script at all.
External Script Attributes
| Attribute | Description |
|---|---|
src |
Required. Script source URL. |
async |
Load asynchronously, without blocking parsing. |
defer |
Defer execution until the DOM is parsed. |
module |
Load as an ES module (type="module"). |
integrity |
Subresource-integrity hash. |
crossorigin |
anonymous or use-credentials. |
position |
head, body-start, or body-end. |
Inline Script Attributes
| Attribute | Description |
|---|---|
code |
Required. The JavaScript source. |
position |
head, body-start, or body-end. |
async |
Wrap the code in an async IIFE, so it may use top-level await. |
Feature Flags
features exposes named toggles to the client without shipping a second config channel:
scripts:
features:
darkMode: true
liveChat: { enabled: true, config: { provider: intercom, appId: abc123 } }A feature is either a bare boolean or an object with enabled and a free-form config.
customHTML
Embed raw HTML — inline or from a file — in a sandboxed context that can read theme CSS variables but not reach the parent page's JavaScript.
| Property | Description |
|---|---|
content |
Inline HTML string. |
htmlSrc |
Path to an HTML file, relative to the project root. Takes precedence over content. |
- type: customHTML
content: '<div style="color: var(--color-primary)">Custom block</div>'An htmlSrc that cannot be read renders a clear error in place rather than failing the page.
The type literal is customHTML, exactly. custom-html is not a component type and will not render.
interactions
The interactions module moved to Interactions & Auto-Save.
Actions & response handlers
action, onSuccess and onError moved to Interactions & Auto-Save.
Auto-Save
Inline-edit auto-save moved to Interactions & Auto-Save.
reorderable-list
reorderable-list moved to Interactions & Auto-Save.
Related Pages
- Interactions — declarative behavior that needs no scripts.
- The Component Model — where
customHTMLsits among the types. - Pages Overview — the page-level
scriptsandvarsproperties. - Security Hardening — integrity hashes and third-party scripts.
Last updated August 11, 2026
This documentation was written with AI, so errors or outdated content are possible. Sovrium is in beta. Contributions and corrections are welcome.