Live component playground
Pick a Druxt component and render it against a live Drupal: this site's, the Umami demo, or your own. Its props are the controls and its examples are presets.
Every change re-renders the component above. The requests list shows what it asked Drupal for, and the markup line is what you copy into your own site. Components marked as rendered by a parent, or as shipped wrappers, appear inside the component that owns them.
To use your own Drupal, choose it in the backend list and paste its origin. The browser
talks to it directly, as an anonymous visitor, so it has to serve JSON:API and allow this
origin with CORS in its services.yml. DruxtRouter needs Decoupled Router,
DruxtMenu needs JSON:API Menu Items and DruxtView needs JSON:API Views. What your Drupal
lacks greys out the components that need it. Nothing you paste is stored and the page only
reads, but a site that is not meant to be public does not belong on this page.
What renders depends on the wrapper components in front of the backend. This site ships wrappers for its own pages, blocks, menus and views, so its content comes out themed. The Umami demo and your own Drupal render through Druxt's default output, which is plain on purpose: a list of fields for an entity, or a plain list for a menu. That is the starting point a wrapper component builds on. Theming shows how.