BABLIC SDK FOR ASTRO

Translated Astro pages, straight from your server.

The Bablic SDK for Astro translates your pages on the server, so visitors, search engines, and AI crawlers get rendered HTMLs with translations from the first load.

View on npm → How the SDK works

Built for Astro.

Prerendered or on demand

Static pages are translated through one catch-all route. Pages rendered on demand use middleware instead. Mixed sites work too.

Translated JavaScript islands

The server translates the page. In the browser, Bablic translates content your islands render later, without redoing the server's work.

SEO handled for you

Titles, meta tags, Open Graph, and JSON-LD are translated, canonicals point at each language, and a build step adds hreflang to your original pages.

SETUP

Four steps to translated pages.

Your languages and translated URLs come from your Bablic dashboard, so you don't need to list them in code. Change them in Bablic and the SDK picks it up.

1Install

Add the package

Install the SDK from npm in your Astro project.
```
npm install @bablic-io/sdk-astro
```
2Script tag

Keep the Bablic script on every page

Add the tag from your Bablic dashboard to your base layout, with is:inline so it reaches the server HTML.
```
<script is:inline
  src="https://edge.bablic.com/moxie.min.js"
  data-oljs="P0000"
  data-glweb-opacity="1"></script>
```

3Connect

Add a route or middleware

For prerendered pages, add a catch-all route with your project key. For pages rendered on demand, use moxieMiddleware in src/middleware.ts instead.

// src/pages/[...path].ts
import { moxieRoute } from '@bablic-io/sdk-astro';

export const prerender = false;
export const GET = moxieRoute({ project: 'P0000' });
export const HEAD = GET;

4Deploy

Ship and check

Deploy as usual. A translated URL answers with x-moxie: MISS the first time, then HIT from the cache.
```
curl -sI https://example.com/fr-fr/
# x-moxie: MISS, then HIT
```

Before you start

A Bablic project on the Pro plan
Astro 6 with a Node adapter (@astrojs/vercel 10+ on Vercel)
Node.js 22
Translated URLs set as language folders (/fr-fr/) or subdomains

Full setup guide on npm → Visit the Help Center

FAQ · SDK FOR ASTRO

Frequently asked questions.

Which versions of Astro does the SDK support?

The SDK is built for Astro 6 with a Node adapter, and runs on Node.js 22. On Vercel, use @astrojs/vercel version 10 or later.

Does it work with prerendered (static) pages?

Yes, since the SDK runs after the original pages exist. Your original pages stay prerendered, and a catch-all route serves their translated versions under your language folders. Pages rendered on demand are translated by the SDK's middleware instead.

What happens to content rendered by islands?

The server translates everything in the page's HTML. When an island renders new text in the browser, the Bablic script translates it there, without redoing the server's work.

Do I need to list my languages in code?

No. The SDK reads your languages and translated URLs from your Bablic dashboard. When you change them, the SDK picks up the change within about 15 minutes.

Which Bablic plan do I need?

The Bablic SDK is available on the Pro plan at no extra cost.

My site is built with Next.js. Can I use this package?

This package is for Astro only. For Next.js sites, install @bablic-io/sdk-vercel from npm instead.

READY TO INSTALL?

Get the full guide on npm.

The npm page covers every option, plus caching, clearing the cache, preview deployments, and hosting rules.

View on npm → Back to the Bablic SDK

Prerendered and on-demand pages

Languages managed in your Bablic dashboard

Available on the Pro plan, no extra cost