getinput

Edit text directly on the page. Feed the changes back to Claude.

Two installation paths, depending on what you're working on.

1. Next.js (App Router)

npx getinput-page

Adds components/InputWidget.tsx, an app/api/input route, an input.json file, and mounts <InputWidget /> in your root layout. Run npm run dev, then edit any text in the browser.

2. Any other website

<script src="https://getinput.io/widget.js"></script>

Works on plain HTML, Vite, Astro, Vue, anything. By default, edits save to localStorage; click the count badge to copy them as JSON.

Optional config via data-*:

<script
  src="https://getinput.io/widget.js"
  data-endpoint="/api/feedback"
  data-hosts="localhost,staging.example.com"
></script>

How it actually works

You	Widget
Click Edit, click a heading	Element becomes contenteditable, you type the new copy
Click Comment, click anything	Type a note about that element
Save / blur	Edit is appended to feedback (localStorage, file, or POSTed to your endpoint)

Then in Claude Code:

/input apply

Claude reads the feedback and rewrites your source files.

Sharing for review

Click the count badge, then Share. You'll get a ?getinput URL that anyone can open — no install required on their end. They click around, edit copy, then Copy feedback and paste the JSON back to you.

Repository layout

Path	Purpose
packages/page/	getinput-page npm package — Next.js install (InputWidget.tsx, route.ts, cli.mjs)
site/public/widget.js	Framework-agnostic widget, served from getinput.io/widget.js
site/	Marketing site (Next.js)
skill.md	Claude Code skill definition

License

MIT