template-kit/require-island-editor

Every island declares whether it hydrates in the editor canvas. There is no default.

Rule

A file is an island when its directive prologue says "use client" and it has a default export (see server vs client). Every island must carry:

export const editor = { live: true };

live must be written as true or false literally. A computed value reports.

Two files are exempt, and neither is a loophole:

• A module with no "use client" — it is server-rendered code, not an island.
• A "use client" module with no default export — the platform’s codemod only turns a default-exported client module into an island, so this file never becomes one.

Reason

live controls one thing: whether the editor canvas hydrates your island, or leaves it as the static HTML the server rendered. Both answers are legitimate. A gallery lightbox wants live: true so an author can see it behave; a scroll-triggered animation wants live: false so it does not fire while someone is editing copy.

The rule exists because the answer used to be expressed by saying nothing. An island with no editor export simply never hydrated in the canvas — which meant “I have not thought about this” and “I want static HTML here” produced identical code. They are not the same statement, and the difference is invisible in review.

live is read once, when your module loads. That is why it must be a literal: a value computed at runtime cannot change the answer, so a non-literal is never a working declaration — only a misleading one.

Fix

Declare it. If you are unsure, live: false is the safe answer: it is exactly what your island does today, now written down.

Before

sections/gallery/Lightbox.tsx

"use client";

import { useState } from "react";

export default function Lightbox({ headline }: { headline: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open gallery</button>
      {open && <p>{headline}</p>}
    </div>
  );
}

After

sections/gallery/Lightbox.tsx

"use client";

import { useState } from "react";

// Authors open the lightbox in the canvas to check it, so hydrate it there.
export const editor = { live: true };

export default function Lightbox({ headline }: { headline: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open gallery</button>
      {open && <p>{headline}</p>}
    </div>
  );
}

Type it if you want the editor to check the shape:

import type { IslandEditor } from "@homepages/template-kit";

export const editor = { live: true } satisfies IslandEditor;

See also

• Islands — the full editor contract: shieldMode, liveSurface, props.
• Server vs client — the directive, the prologue, and what an island may do.