# DruxtJS demos

> Live demos of decoupled Drupal: a Drupal backend serving JSON:API and a Nuxt frontend rendering it with Druxt. Each one is open source and runs from a public repository you can read, fork and run yourself.

Decoupled Drupal, end to end: a Drupal backend serving JSON:API and a Nuxt frontend rendering it with Druxt, which maps Drupal entities, view modes, views and menus onto Vue components. Each demo runs from a public repository, so the code behind any screen here can be read and run.

## DruxtJS documentation site

The druxtjs.org documentation site is built with Druxt itself. The header, footer and menus are Drupal blocks and menus, every tutorial and how-to page is a Drupal node rendered through the DruxtSite module, and the site also hosts the live component playground.

- [Playground](https://druxtjs.org/playground?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Draft authoring](https://github.com/druxt/druxtjs.org/blob/develop/docs/backend.md?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Frontend](https://druxtjs.org/?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Storybook](https://storybook.druxtjs.org/?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Source code](https://github.com/druxt/druxtjs.org?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)

## Umami food magazine

Drupal’s own demonstration profile, rendered by DruxtSite in English and Spanish. Umami Go deals a card game from the magazine’s recipes, and the Entity Explorer shows the JSON:API request behind any render.

- [Umami Go](https://umami.demo.druxtjs.org/play?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Frontend](https://umami.demo.druxtjs.org/?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Entity Explorer](https://umami.demo.druxtjs.org/entity-explorer?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Storybook](https://storybook.umami.demo.druxtjs.org/?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)
- [Source code](https://github.com/druxt/umami.demo.druxtjs.org?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication)

## About

- [Druxt documentation](https://druxtjs.org/?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The framework these demos are built with
- [Druxt on Drupal.org](https://www.drupal.org/project/druxt?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The Drupal module
- [Source on GitHub](https://github.com/druxt/druxt.js?utm_source=llms-txt&utm_medium=ai&utm_campaign=syndication): The Nuxt packages