Skip to content

feat: add experience-auditor showcase example [EXT-7476]#11010

Open
Jared Jolton (jjolton-contentful) wants to merge 1 commit into
masterfrom
feat/experience-auditor-showcase
Open

feat: add experience-auditor showcase example [EXT-7476]#11010
Jared Jolton (jjolton-contentful) wants to merge 1 commit into
masterfrom
feat/experience-auditor-showcase

Conversation

@jjolton-contentful
Copy link
Copy Markdown
Contributor

@jjolton-contentful Jared Jolton (jjolton-contentful) commented Jun 3, 2026

EXT-7476 · sibling of EXT-7365 under epic EXT-6925

Summary

  • Adds examples/experience-auditor — a polished, customer-facing showcase app for the ExO toolbar location that goes well beyond the minimal starter (PR feat: add experience-toolbar starter example [EXT-7365] #11009 / EXT-7365). Scaffoldable via npx create-contentful-app --example experience-auditor.
  • Experience Auditor runs inside the Experience Editor toolbar and continuously audits the experience for accessibility, SEO, and content-completeness issues — demonstrating the standout capability of this location: live, selection-aware tooling that reads and mutates the experience tree as the author works.

What it demonstrates

  • Live audit — walks the tree via getRootNodes()getNode()getProperties(), re-running on sdk.exo.experience.onChange().
  • Scored dashboard — 0–100 health score + error/warning/info counts.
  • Locate on canvasselection.set() + selection.highlight(nodeId, { flash, scrollIntoView }) to jump to the offending component (visual mode only; gracefully disabled in form mode).
  • One-click fixes — safe deterministic repairs (e.g. trim stray whitespace in alt text) applied via getNode().setContentProperty(), permission-checked with sdk.access.can() and confirmed via sdk.notifier.
  • Pre-publish gateexperience.publish() blocked while any error-level finding remains.

Design

Audit rules are pure functions over an SDK-independent CollectedNode shape (src/audit/rules.ts), so they're fully unit-tested without a live SDK. The only SDK-coupled piece is a thin collector (src/audit/collect.ts). This keeps all the interesting logic testable in isolation. Adding a rule = dropping another AuditRule into AUDIT_RULES.

Typed with ExperienceEditorToolbarAppSDK from @contentful/app-sdk@4.58.0. Follows repo conventions (React + TS + Vite + Vitest + Forma 36), mirroring examples/typescript.

Verification status

  • tsc --noEmit clean against the published 4.58.0 types.
  • vite build clean.
  • 19/19 tests pass: 13 rule/scoring + 2 collector + 4 toolbar integration (locate, fix, publish-gate, form-mode disabling).
  • ⚠️ Not runtime-verified inside a live ExO editor — the host renderer serving sdk.exo is still rolling out (EXT-7363/EXT-7364). README states this. API shapes match the published types exactly.

Test plan

  • npm install && npm run build in examples/experience-auditor succeeds
  • npm run test:ci passes
  • npx create-contentful-app --example experience-auditor scaffolds a working project (after merge to master)
  • (When host renderer lands) install, register the experience-toolbar location, open an experience with a missing-alt-text image, confirm the finding appears, Locate highlights the node, the fix writes back, and publish unblocks once errors are resolved

Generated with Claude Code

Add a polished, customer-facing example app for the ExO toolbar location
that goes beyond the minimal starter (EXT-7365). Experience Auditor runs
inside the Experience Editor toolbar and continuously audits the
experience for accessibility, SEO, and content-completeness issues.

It demonstrates the standout capability of the toolbar location: live,
selection-aware tooling that reads and mutates the experience tree. A
scored dashboard lists findings; clicking one locates the offending
component on the canvas (selection.set + selection.highlight), safe
deterministic fixes apply in place via setContentProperty (permission-
checked, with notifier feedback), and publish is gated on outstanding
errors.

Audit rules are pure functions over an SDK-independent node shape, fully
unit-tested without a live SDK; the SDK boundary is isolated in a thin
collector. Typed with ExperienceEditorToolbarAppSDK (app-sdk@4.58.0).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant