demo · v141
Compose Overlay
An email-style compose field with a Grammarly-style overlay that runs the Proofreader API as you type. Each correction is a clickable strike-through; accept inserts the suggestion. The model runs on-device — no third-party API, no multi-gigabyte download in your bundle.
chrome://flags/#proofreader-api (also needs Chrome's on-device model to be downloaded). On unsupported platforms the demo prints the call payload but won't return live corrections.
the call
const proofreader = await Proofreader.create({
expectedInputLanguages: ["en"],
correctionExplanationLanguage: "en",
});
const result = await proofreader.proofread(text);
// result.correctedInput — the rewritten text
// result.corrections — [{ startIndex, endIndex, correction, explanation, type }]
for (const c of result.corrections) {
console.log(text.slice(c.startIndex, c.endIndex), "→", c.correction, "(", c.type, ")");
}
why this angle
The explainer lists "polishing email drafting" first in the use case list. The compose-overlay pattern (Gmail, Outlook, Substack) is where users most expect proofreading to appear, and where the privacy story matters most — you don't want your unfinished email sentenced to a third-party SaaS API for grammar checking. Running on-device means no network round-trip, no terms of service to argue about with legal, and no per-call billing. This concept fires the API on a real input and patches the corrections into a visible diff overlay so you can see latency and quality firsthand.