Localess
Astro

Content

Fetch and render content dynamically by schema with the Astro SDK for Localess, under both static and server output.

Fetching content

Fetch content in a page's frontmatter with getLocalessClient():

---
// src/pages/[...path]/index.astro
import { getLocalessClient } from '@localess/astro';

const content = await getLocalessClient().getContentBySlug('home');
---

getLocalessClient() returns the LocalessClient built by the localess() integration — it throws if the integration isn't configured in astro.config.mjs. See Error handling for handling a missing slug.

Static output

Under static output (Astro's default), fetch content at build time inside getStaticPathslivePreview isn't available, but enableSync still works for a reload-based preview loop in development:

---
// src/pages/[...path]/index.astro
import { getLocalessClient } from '@localess/astro';
import LocalessDocument from '@localess/astro/LocalessDocument.astro';

export async function getStaticPaths() {
  const client = getLocalessClient();
  const links = await client.getLinks({ kind: 'DOCUMENT' });
  return Object.values(links).map(link => ({
    params: { path: link.fullSlug },
    props: { slug: link.fullSlug },
  }));
}

const { slug } = Astro.props;
const content = await getLocalessClient().getContentBySlug(slug);
---

<LocalessDocument document={content} />

Rendering content

Render fetched content with LocalessDocument:

---
import { getLocalessClient } from '@localess/astro';
import LocalessDocument from '@localess/astro/LocalessDocument.astro';

const content = await getLocalessClient().getContentBySlug('home');
---

<LocalessDocument document={content} />

LocalessDocument resolves the component registered for document.data._schema and renders it, forwarding links, references, and assets.

To render a nested block directly — e.g. a list of body blocks inside a custom component — use LocalessComponent:

---
import { LocalessComponent } from '@localess/astro';
---

{data.body.map(item => (
  <LocalessComponent data={item} links={content.links} references={content.references} />
))}

Import paths: LocalessComponent, LocalessDocument, LocalessRichText, and FallbackComponent are .astro files and cannot be imported from the package's default entry point. Import them from their dedicated subpaths (@localess/astro/LocalessDocument.astro, etc.) as shown above. Everything else — localess, getLocalessClient, getLivePayload, resolveAsset, localessEditable, localessEditableField, handleLocalessMessage, toCamelCase, LocalessApiError, content types, isBrowser/isIframe — imports from the default @localess/astro entry point.

On this page