Skip to main content

Page

note

This node is not offered directly in the node picker.

The root visual node of a Router page component: declares the page's title, URL pattern and meta tags.

Page is the mandatory root of every page component shown by a Router (Page Router) — a Router only mounts components whose graph contains exactly one Page node. It is not in the node picker because the editor creates it automatically when a page is added to a Router; there is no replacement node, you configure the existing one. Its title sets the document title and the Router's currentPageTitle; its urlPath is the page's URL pattern and may contain {param} placeholders that Page Inputs (PageInputs) nodes read; the remaining inputs are SEO meta tags (description, robots, og:, twitter:, sitemap hints) plus padding and CSS styling for the page surface.

When to use it

Do not add Page from the node picker or use it outside a Router page component — it is created automatically as the root when a page is added to a Router. Edit that existing node to set the page's title, urlPath and meta tags.

At a glance

CategoryVisual
Type namePage
Available inbrowser
SSR compatibilitysafe
Provided bynoodl-viewer-react

Inputs

Values

NameTypeDefaultDescription
cssClassNameString``Extra CSS class names to put on this element, for styling from a stylesheet you supply
descriptionStringSummary search engines show under the page title in results, usually kept under about 160 characters
og:descriptionStringSummary shown beneath the title when this page is shared
og:imageStringImage shown in the share preview; it must be an absolute URL, not a project path
og:image:heightStringHeight of the share image in pixels
og:image:widthStringWidth of the share image in pixels, which lets a preview reserve space before the image loads
og:titleStringTitle shown when this page is shared on Facebook, LinkedIn and most chat apps; falls back to the page title
og:typeStringWhat kind of thing this page is, e.g. website or article, which changes how the preview is laid out
og:urlStringCanonical address of this page, so shares of different URLs are counted as the same page
paddingBottomNumber0Space inside the element's bottom edge, between it and its content
paddingLeftNumber0Space inside the element's left edge, between it and its content
paddingRightNumber0Space inside the element's right edge, between it and its content
paddingTopNumber0Space inside the element's top edge, between it and its content
robotsStringInstructions for search-engine crawlers, e.g. "noindex, nofollow" to keep this page out of results
sitemapChangefreqEnum (always, hourly, daily, weekly, monthly, yearly, never)weeklyHow often this page changes, as a hint to search-engine crawlers in the sitemap
sitemapIncludedBooleantrueLists this page in the generated sitemap
sitemapPriorityNumber0.5This page's importance relative to the rest of the site, from 0 to 1, in the sitemap
styleCssString/* background-color: red; */Raw CSS declarations applied to this element, overriding the styling ports above
twitter:cardStringShape of the preview on X/Twitter, e.g. summary or summary_large_image
twitter:descriptionStringSummary shown when this page is shared on X/Twitter
twitter:imageStringImage shown in the X/Twitter preview; it must be an absolute URL
twitter:titleStringTitle shown when this page is shared on X/Twitter; falls back to the Open Graph title

Signals

NameTypeDefaultDescription
onPageReadySignalPulse this once the page has the data it needs; the SSR server holds the rendered HTML until it fires. Unconnected pages render as soon as the runtime settles

Outputs

Values

NameTypeDefaultDescription
boundingHeightNumberHeight this element actually ended up with after layout, in pixels
boundingWidthNumberWidth this element actually ended up with after layout, in pixels
childIndexNumberThis element's position among its parent's children, counting from 0
childrenCountNumberHow many child elements are currently mounted inside this one
screenPositionXNumberDistance in pixels from the left edge of the window to this element's left edge
screenPositionYNumberDistance in pixels from the top edge of the window to this element's top edge
thisReferenceA reference to this node itself, for ports that take a node rather than a value

Signals

NameTypeDefaultDescription
completedSignalFires after every invocation. This node has no other outcome — no Unchanged and no Failure — so it always fires together with Done, and wiring either one does the same thing. It is here on every action so that reaching for it is never a per-node decision
didMountSignalFires once this element has been added to the page and can be measured
doneSignalFires once the page has announced that it is ready to render
willUnmountSignalFires just before this element is removed from the page, while it still exists

Dynamic ports

This node's port list changes at runtime (runtime-discovered); the tables above may be incomplete for a given instance.

Some ports are discovered at runtime from user code, parameters or connected components, and are pushed to the editor per instance; the static port list below is incomplete for such instances.

Ports at runtime

Runtime-determined inputs (runtime-discovered): title and urlPath are registered per instance by the editor connection, with defaults derived from the component name. The static catalog lists only the meta-tag, sitemap and padding inputs.

Page Router, Navigate, Page Inputs

Generated

This page is generated from node-catalog-enriched.json. Do not edit it by hand — run npm run docs:nodes to regenerate, and fix the source enrichment instead.