OpenPolicy with Astro
The @openpolicy/astro integration wires up the Vite plugin for you and lets you import compiled policy HTML directly into .astro components.
Install
bun add @openpolicy/sdk @openpolicy/astroConfigure the integration
// astro.config.mjs
import { defineConfig } from "astro/config";
import openPolicy from "@openpolicy/astro";
export default defineConfig({
integrations: [
openPolicy({ configs: ["./src/openpolicy.ts"] }),
],
});Define your policy
// src/openpolicy.ts
import { definePrivacyPolicy } from "@openpolicy/sdk";
export default definePrivacyPolicy({
company: { name: "Acme Inc.", website: "https://acme.com" },
contact: { email: "privacy@acme.com" },
compliance: { gdpr: true, ccpa: true },
});Render in a page
---
// src/pages/privacy-policy.astro
import policy from "../privacy-policy.html?raw";
---
<html lang="en">
<head><title>Privacy Policy — Acme</title></head>
<body>
<main set:html={policy} />
</body>
</html>Why OpenPolicy for Astro
- Zero JS by default — the policy compiles to static HTML; no client bundle added
set:htmldirective — Astro’s built-in way to render trusted HTML strings- Seamless Vite integration — the Astro integration handles plugin wiring for you
- Ships with your content — policy lives alongside your Markdown and MDX content, version controlled in git