@wolfigs/weblay

Install the Weblay 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 Weblay'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/weblay

You need a site key from your Weblay 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 { Weblay } from "@wolfigs/weblay/react";

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

Pages Router: drop <Weblay 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 { WeblayPlugin } from "@wolfigs/weblay/vue";
app.use(WeblayPlugin, { siteKey: "ilk_yourkey" });

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

Vanilla / framework-agnostic

import { initWeblay } from "@wolfigs/weblay";

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

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

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

Options

| Option | Type | Default | Notes | | --- | --- | --- | --- | | siteKey | string | — | Required. From your dashboard. | | dataServer | string | Weblay's data plane | Only for self-hosted / custom data planes. | | src | string | https://cdn.wolfigs.com/weblay.js | Override the connector URL. | | loader | "none" \| "bar" \| "overlay" \| "skeleton" \| "custom" | "none" | Instant loading indicator while content arrives. | | loaderAccent / loaderBg / loaderText / loaderLogo | string | — | Style the bar / overlay loaders. | | loaderEl | string | #my-loader | Your own loader element, when loader: "custom". | | nonce | string | — | CSP nonce stamped on the injected <script>. | | target | "head" \| "body" | "head" | Where the tag is inserted. |

Notes

• SSR-safe. initWeblay / <Weblay/> / useWeblay 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 Weblay project.