Demos

The media of the example components is generated by demo/capture.mjs (Playwright). The DevTools pane is the real Chromium DevTools, Network tab filtered by Fetch/XHR.

Page builder: the assistant, parameters, a paragraph

The AI assistant composes a landing page from the theme's components and adds an FAQ on request; then the hero, a button, a section and the call to action are changed by hand, a paragraph is dragged in and filled in its own form, and the page is published. Recorded in the sandbox with scripted answers in place of a model. Every feature as a screenshot: Gallery.

Recipe explorer with DevTools

Search, difficulty, category and preparation time filters, sorting and pager. Every change is one fetch to /api/recipes (a views_better_rest display). The state is mirrored in the URL.

Node list: table, filter and "Edit in Modal"

The table is a React component, the "Edit in Modal" link is plain Drupal ajax (use-ajax) inside the React markup. DevTools shows the node?... fetches and the edit?_wrapper_format=drupal_modal XHR.

Screenshots

Regenerate

The recorder is in the repository only (demo/ is not part of release archives). With a git checkout of the base theme, the example subtheme built and enabled on a site that has the demo_umami content (see Getting started):

cd frame/demo
npm install
npx playwright install chromium
BASE_URL=https://your-site.example npm run capture
# or from the base theme folder: BASE_URL=... npm run demo

Needs ffmpeg. The modal demo logs in as admin / admin, so create that user on your demo site. Output goes to docs/public/media.