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 works while you develop: admin.inka.sh/login?demo signs you in as its demo account).
  • 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.

Get the bridge

The bridge is one JavaScript file, hydra.js. It is not published to npm, so build it from the Inka repository:

git clone https://github.com/Inkaengine/inka.git
cd inka
make install
pnpm -F @volto-hydra/hydra-js build

This writes packages/hydra-js/hydra.js: a single ES module with its dependencies bundled in. Copy it into your front end. The Nuxt example does this in its sync-hydra script before every build.

The render helpers used on some pages, such as expandListingBlocks and expandTemplates, are in packages/helpers/index.js, a single ES module with no dependencies. Copy it too if you use them. It is safe to import on the server.

These docs import the two files as @hydra-js/hydra.js and @hydra-js/helpers. Those are names you give them yourself, with an alias in your bundler (the Nuxt example sets both in nuxt.config.ts), or import the files by path instead.

The hydra name in the file, the hydra-edit: and hydra-view: iframe names and the <!-- hydra --> comments is Inka's former name, kept for compatibility.

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: