UI API — Page Template

apiClient.ui.pageTemplate retrieves page template configurations — combined records that pair a page definition with its associated Nunjucks template. This is a read-only service; page templates are managed via the Page and Template services separately.

Methods

get

Fetch a page template configuration by slug. Returns null if no matching configuration is found.

const pageTemplate = await apiClient.ui.pageTemplate.get({ slug: 'jobs-list' })

if (pageTemplate) {
  console.log(pageTemplate.page.name) // Page definition
  console.log(pageTemplate.template.content) // Nunjucks template string
}

Page Template Type

The returned object contains a resolved page and template pair:

React Example

Security note: dangerouslySetInnerHTML renders Nunjucks template output directly into the DOM. Ensure all values in data come from trusted sources, or sanitize the rendered HTML with a library like DOMPurify before rendering. Enable Nunjucks autoescaping (nunjucks.configure({ autoescape: true })) to escape template variables by default.

import { useApiClient } from '@skedulo/horizon-core'
import { useEffect, useState } from 'react'
import nunjucks from 'nunjucks'

const PageTemplateRenderer = ({ slug, data }) => {
  const apiClient = useApiClient()
  const [html, setHtml] = useState('')

  useEffect(() => {
    let mounted = true
    apiClient?.ui.pageTemplate.get({ slug }).then((pageTemplate) => {
      if (!mounted || !pageTemplate) return
      try {
        setHtml(nunjucks.renderString(pageTemplate.template.content, data))
      } catch (err) {
        console.error('Template render error:', err)
      }
    })
    return () => {
      mounted = false
    }
  }, [apiClient, slug, data])

  return <div dangerouslySetInnerHTML={{ __html: html }} />
}

Relationship to Page and Template

pageTemplate.get is a convenience method that combines fetching from /v1/page-templates with a single slug query. To create or update a page template you must work with the underlying Page and Template services directly.