Website Toolkit

The sample page has the toolkit running on it. Open it from the button on the page, change some type, and the patch shows up below.

Nothing yet. Change something on the page.

• -One button on your page, in its own Shadow DOM, so its styles and yours never meet.
• -Pick text and change its font, size and weight, live. Google Fonts load as you pick them, with no key.
• -It never touches your files. It writes down what changed: a selector, the source file when it can tell, and the old and new values.
• -Copy that to Claude Code, Cursor or any agent, and it makes the change in your code.
• -For development only. Keep it behind a dev check.

It isn't on npm yet, and the name website-toolkit there is another package. Build it from its repo and add it from there.

# in the toolkit's repo
npm install
npm run build

# in your app
npm install -D path/to/claude-website-toolkit/packages/website-toolkit

import { WebsiteToolkit } from "website-toolkit/react";

export default function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === "development" && <WebsiteToolkit />}
    </>
  );
}

import { initToolkit } from "website-toolkit";

if (import.meta.env.DEV) {
  initToolkit();
}

const toolkit = initToolkit({
  fonts: ["Inter", "Poppins"], // only these in the picker
  onChange: (changes) => {},   // on every edit
  onExport: (markdown) => {},  // when it's copied
});

toolkit.toMarkdown(); // the patch, for an agent
toolkit.clear();
toolkit.destroy();

• →Restyle a page by voice: "make it calmer".
• →Two people restyling one page at once, cursors and all.
• →Pick a palette from any image on the page.

Want one of these, or something wilder? Let's make it.