OnsenUI

Onsen UI is "The most beautiful and efficient way to develop HTML5 hybrid and mobile web apps."

The Onsen for Drupal module adds the Onsen UI CSS components and JavaScript framework to your Drupal website, so you can use Onsen UI markup and classes directly in your theme or content.

Features

• Loads Onsen UI CSS and JavaScript from a CDN (unpkg), no local assets required.
• Configuration form at /admin/config/onsen/settings to choose which pages should load the library, using path patterns with wildcard support (e.g. /node/*, /user/*, /my-path).
• Built-in demo page at /onsen-demo showing the main CSS components: switch, checkbox, radio, range, text input, select, buttons, card and toolbar.
• The demo page is always whitelisted and loads the library regardless of the configuration, so it can be used at any time to preview the available components.
• Supports both the CSS-only components (classes like switch, checkbox, button) and the custom elements (tags like <ons-switch>, <ons-list>) provided by the Onsen UI JavaScript framework.
• OOP hooks, compatible with Drupal 11.1+ and Drupal 12.

Requirements

• Drupal 11.1 or later, or Drupal 12.
• No additional Drupal modules required.

Installation

1. Install the module as usual (Composer or manually in modules/contrib/onsen).
2. Enable it at /admin/modules or with drush en onsen.
3. Clear the cache.

Configuration

Go to /admin/config/onsen/settings (Configuration → System → Onsen UI) and enter one path per line in the Pages where Onsen UI should be loaded textarea. Wildcards are supported:

/node/*
/user/*
/my-path

If the textarea is left empty, the library is not loaded on any page, except the demo page which is always whitelisted.

The configuration form also includes a direct link to the demo page.

Demo page

Open /onsen-demo in your browser to see all the available components rendered with the Onsen UI styles. The page is scrollable, and the library is always loaded there, even with an empty configuration.

To use the demo as a starting point, copy the markup you need from the page source and paste it into your own Twig templates or content.

Usage example

Once the library is loaded on a page, you can use Onsen UI classes directly in your Twig templates. For example, a switch:

<label class="switch">
  <input type="checkbox" class="switch__input">
  <div class="switch__toggle">
    <div class="switch__handle"></div>
  </div>
</label>

Or a button:

<button class="button button--cta">Book now</button>

Refer to the Onsen UI CSS Components documentation for the full list of available components and modifiers.

Notes and limitations

• Assets are loaded from the unpkg CDN. If you have a strict Content Security Policy or need to serve assets locally, override the onsen/onsen-ui library in your theme's libraries.yml.
• The demo page is rendered by a controller with inline HTML and is not themable via Twig template overrides. It is intended as a live reference, not as a production page.
• This module is a lightweight integration for traditional Drupal themes. For complex mobile applications, consider a decoupled architecture with Drupal as the backend (JSON:API or GraphQL) and a dedicated frontend (React Native, Flutter, PWA, etc.).

Roadmap

• Optional local asset loading (no CDN) via configuration.
• More granular whitelisting (by content type, by role, by route name).
• Optional dark mode switch for the Onsen UI components.

Issues and feature requests are welcome in the issue queue.