These Nodes dynamically manage page metadata, structured data, and UI elements for search engine optimization and progressive web apps. They enable runtime control of HTML head elements, URL parameters, and navigation components.

HTML Head Management

These Nodes control elements in the HTML document head, primarily for PWA and web applications.

• Set Link Tag: Dynamically injects or modifies link tags in the HTML head (for canonical URLs, preconnect, favicons).
• Set Schema Markup: Injects JSON-LD structured data into the page for SEO rich results.

URL & Navigation UI

These Nodes manage URL state and navigation bar elements.

• Update Query: Updates URL query parameters without triggering a full page navigation or reload.
• Update Top Bar: Dynamically modifies the app's top navigation/header bar properties at runtime.

Visual Indicators

This Node manages notification badges and visual indicators on navigation elements.

• Set Tab Badge: Sets a badge indicator (number or dot) on a tab bar item.

Set Link Tag

This Node dynamically injects or modifies <link> tags in the HTML document head. Link tags define relationships between the current document and external resources, commonly used for canonical URLs, preconnecting to external domains, and specifying alternate versions of pages.

To configure Set Link Tag, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Rel (Relationship): The relationship type of the linked resource:
• • canonical: Specifies the preferred URL for the current page (prevents duplicate content issues)
  • preconnect: Establishes early connection to external domain (improves performance)
  • dns-prefetch: Resolves DNS for external domain ahead of time
  • preload: Prioritizes loading of critical resources
  • alternate: Specifies alternate versions (e.g., different languages, mobile versions)
  • icon / apple-touch-icon: Specifies favicon or app icons
  • manifest: Links to web app manifest file
• Href: The URL of the linked resource.
• Additional Attributes: Optional attributes specific to the relationship type:
• • hreflang: Language code for alternate language versions (e.g., en, es, fr)
  • media: Media query for conditional application (e.g., (max-width: 768px))
  • type: MIME type of the linked resource
  • sizes: Icon dimensions for icon relationship types (e.g., 32x32, 180x180)

Common Use Cases:

• Setting canonical URLs to prevent duplicate content penalties
• Preconnecting to CDNs or API domains to reduce latency
• Specifying alternate language versions for international SEO
• Dynamically setting favicons based on application state
• Adding web app manifest for PWA installation

💡💡💡 Tip 💡💡💡

Use preconnect for external domains that you'll definitely use on the page (fonts, APIs, CDNs). Use dns-prefetch for domains you might use. Preconnect does more work but provides better performance when the resource is needed.

📍📍📍 Note 📍📍📍

This Node is only functional in PWA and web applications. Native mobile applications do not use HTML <link> tags for resource management.

Set Schema Markup

This Node injects JSON-LD structured data into the page, enabling search engines to better understand page content and display rich results in search listings (rich snippets, knowledge panels, enhanced search features).

To configure Set Schema Markup, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Schema Type: The type of structured data to inject, following schema.org vocabulary:
• • Product: E-commerce products with price, availability, reviews
  • Article: News articles, blog posts, editorial content
  • LocalBusiness: Business information, hours, location, contact
  • Organization: Company information, logo, social profiles
  • Person: Individual profiles, roles, affiliations
  • Event: Event details, dates, location, tickets
  • Recipe: Cooking recipes with ingredients, instructions, nutrition
  • VideoObject: Video content with duration, thumbnail, description
  • BreadcrumbList: Navigation breadcrumbs showing page hierarchy
  • FAQPage: Frequently asked questions and answers
• Schema Data: The structured data in JSON-LD format. This must conform to the schema.org specification for the selected type.

Common Use Cases:

• Adding Product schema to e-commerce product pages for price and availability in search results
• Including Article schema on blog posts for featured snippets and article cards
• Adding LocalBusiness schema for "near me" searches and Google Maps integration
• Implementing BreadcrumbList schema for enhanced search result navigation
• Adding Recipe schema for recipe cards in search results with ratings and cook time

💡💡💡 Tip 💡💡💡

Use Google's Rich Results Test tool (search.google.com/test/rich-results) to validate your schema markup before deploying. Invalid schema can prevent rich results from appearing in search.

📍📍📍 Note 📍📍📍

JSON-LD structured data is embedded in a <script type="application/ld+json"> tag in the HTML head. Multiple schema types can coexist on the same page by calling Set Schema Markup multiple times with different schema types.

💡💡💡 Tip 💡💡💡

For e-commerce sites, combine Product schema with AggregateRating and Offer types to display star ratings and pricing directly in search results. This can significantly improve click-through rates from search engines.

Set Tab Badge

This Node sets a badge indicator on a tab bar item, typically used to display notification counts or indicate new content availability. Badges appear as small circles containing numbers or dots overlaid on tab icons.

To configure Set Tab Badge, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Tab Index: The zero-based index of the tab to badge (e.g., 0 for the first tab, 1 for the second tab).

Alternative Configuration:

• Tab ID: The unique identifier of the tab, as defined in Project Settings under App Navigation.
• Badge Value: The content to display in the badge:
• • Number: Display a count (e.g., 5 for 5 notifications)
  • Null / Empty: Remove the badge entirely
  • Dot / Boolean: Display a simple indicator dot without a number
• Badge Color: Optional color for the badge background (platform default is typically red).

Common Use Cases:

• Displaying unread message counts on messaging tabs
• Showing cart item counts on shopping tabs
• Indicating new content availability on feed or activity tabs
• Alerting users to pending actions or notifications
• Removing badges after user views the content

💡💡💡 Tip 💡💡💡

Update tab badges in real-time as content changes. For example, increment the badge when a new message arrives and decrement it when messages are read. This creates a responsive, native-feeling experience.

📍📍📍 Note 📍📍📍

Tab badges are only functional in native applications with Bottom Bar (Tab Bar) navigation. PWAs and web applications typically use alternative notification indicators like header badges or notification bells.

💡💡💡 Tip 💡💡💡

For large counts (100+), consider displaying "99+" instead of the exact number to prevent badge overflow on smaller screens. Most platforms have conventions for this (iOS shows "99+" automatically, Android may require manual formatting).

Update Query

This Node updates URL query parameters without triggering a full page navigation or reload. This allows you to modify the browser's address bar and history while maintaining the current page state, useful for bookmarkable filter states and shareable URLs.

To configure Update Query, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Query Parameters: Key-value pairs to add or update in the URL:
• • Add/Update: Provide a value to add a new parameter or update an existing one
  • Remove: Set value to null or empty string to remove a parameter
• Update Method:
• • Push: Adds a new entry to browser history (user can press back to previous query state)
  • Replace: Modifies the current history entry (no back button navigation to previous state)

Common Use Cases:

• Updating filter parameters as users apply search filters without page reload
• Creating bookmarkable/shareable states for filtered product lists
• Tracking pagination state in the URL
• Implementing tab switching that updates the URL
• Building shareable configuration URLs for customizable views

💡💡💡 Tip 💡💡💡

Use Push method when query changes represent distinct user actions (applying filters, changing pages). Use Replace method for transient state changes that shouldn't clutter history (typing in search box, minor UI adjustments).

📍📍📍 Note 📍📍📍

This Node modifies the URL without triggering Route changes or Layout navigation. The current Layout remains active, and query parameters become accessible through the RouteData data source.

💡💡💡 Tip 💡💡💡

Combine Update Query with RouteData to create filter UIs that persist across page reloads. When users bookmark or share the URL, the filters are preserved in the query parameters and automatically applied on page load.

Update Top Bar

This Node dynamically modifies the app's top navigation/header bar properties at runtime. This allows context-specific customization of the navigation bar based on page content or user actions.

To configure Update Top Bar, select the Node on the Canvas and then open the Settings cog in the Right Sidebar.

• Title: The text displayed in the center of the top bar (typically the current page or screen title).
• Background Color: The background color of the top bar (hex, RGB, or named color).
• Title Color: The color of the title text.
• Show Back Button: Boolean toggle to show or hide the back button (typically on the left side).
• Right Action Button: Optional button configuration for the right side of the bar:
• • Icon: Icon to display (if using icon button)
  • Text: Text to display (if using text button)
  • Action: Flow to trigger when button is pressed
• Show / Hide: Boolean to show or hide the entire top bar.

Common Use Cases:

• Updating the title to reflect current content (e.g., product name on detail page)
• Changing top bar color to match branding or page theme
• Showing contextual action buttons (Save, Edit, Share) on specific pages
• Hiding the top bar for immersive content (video playback, image galleries)
• Customizing back button visibility based on navigation context

💡💡💡 Tip 💡💡💡

Use Update Top Bar on Layout initialization (via On Initialize interaction) to set context-specific navigation bars. This ensures the top bar reflects the current content immediately when users navigate to the page.

📍📍📍 Note 📍📍📍

This Node primarily affects native applications where the top navigation bar (Action Bar on Android, Navigation Bar on iOS) is managed by the system. For PWAs, consider using custom header Components that can be controlled through Set State or Update Props.

💡💡💡 Tip 💡💡💡

When hiding the top bar for immersive content, provide an alternative way for users to exit (e.g., tap/swipe gestures, overlay controls). Avoid trapping users in full-screen views with no escape mechanism.