@wolfigs/webnak

@wolfigs/webnak

Install the Webnak visual-editor connector in any JavaScript app, the idiomatic way, with framework bindings and SSR safety.

It injects the same tiny loader the plain <script> install uses, served from Webnak's CDN. The editor itself is loaded on demand from the CDN, so this package adds ~0 KB of editor weight to your bundle and updates centrally.

npm i @wolfigs/webnak

You need a site key from your Webnak dashboard (looks like ilk_…). Add your site's origin to the site's allowed origins in the dashboard, or the editor won't open.

React / Next.js

import { Webnak } from "@wolfigs/webnak/react";

// Next.js App Router, app/layout.tsx (inside <body>):
export default function RootLayout({ children }) {
  return (
    <html><body>
      {children}
      <Webnak siteKey="ilk_yourkey" />
    </body></html>
  );
}

Pages Router: drop <Webnak siteKey="…" /> in pages/_app.tsx. Works the same in Remix, Vite, and CRA, render it once, high in the tree.

Vue 3 / Nuxt

// As a plugin (main.ts):
import { WebnakPlugin } from "@wolfigs/webnak/vue";
app.use(WebnakPlugin, { siteKey: "ilk_yourkey" });

<!-- Or as a composable, in any component's <script setup>: -->
<script setup>
import { useWebnak } from "@wolfigs/webnak/vue";
useWebnak({ siteKey: "ilk_yourkey" });
</script>

Vanilla / framework-agnostic

import { initWebnak } from "@wolfigs/webnak";

const stop = initWebnak({ siteKey: "ilk_yourkey" });
// stop() removes the injected script (e.g. on teardown).

For SSR head strings you can also render the tag directly:

import { webnakScriptTag } from "@wolfigs/webnak";
const html = webnakScriptTag({ siteKey: "ilk_yourkey" });

Options

Notes

• SSR-safe. initWebnak / <Webnak/> / useWebnak do nothing on the server and only inject in the browser.
• Idempotent. If a connector for the same site key is already on the page (including a hand-written tag), injection is skipped.
• No editor in your bundle. Only the small loader tag is added; the editor is fetched from the CDN when someone opens edit mode.

Apache-2.0. Part of the Wolfigs Webnak project.