Installation
Adding Inka to a frontend is a small script and a few HTML attributes — there is no SDK to adopt and no framework to switch to. This page covers getting the bridge in; the Quick Start has a copy-paste starter for each framework.
Prerequisites
- A running Inka admin and content backend for editors to log into (the hosted demo at https://admin.inka.sh works while you develop).
- A frontend that renders your content — any framework, or none. The bridge only runs when the page is opened inside the admin's edit iframe.
Load hydra.js
Pull the bridge into the page — from a bundler, or as a plain module script with no build step.
import { initBridge } from '@hydra-js/hydra.js';Make a page editable
Call initBridge() once during page setup. Outside the editor it is a no-op, so it is safe to leave in every page.
const bridge = initBridge({
onEditChange: (updatedPage) => {
// re-render your page from updatedPage — this is what makes edits live
},
});That is the whole install. From here:
- Build a frontend — framework-specific code for Nuxt, Next.js, and more.
- Live preview — how
onEditChangeand the two-way channel work. - Server-rendered frontends — the pattern for Astro, PHP, Django and other no-JS stacks.
- Custom blocks — the full
initBridge()options reference.