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 getStaticPaths — livePreview 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, andFallbackComponentare.astrofiles 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/astroentry point.
Getting Started
Astro SDK for Localess — dynamic component rendering by content schema, rich text rendering, asset management, and Visual Editor integration for static and server-rendered Astro projects.
Visual Editor
Reload-based and SSR live-preview Visual Editor sync tiers for the Astro SDK for Localess.