What Are Client Extensions?
Client Extensions are a modern, decoupled way to extend and customize Liferay without touching the core codebase or deploying OSGi modules. Unlike traditional plugins, they allow developers to inject CSS, JavaScript, custom elements, and even full applications in a clean, modular way—often hosted externally.
Advantages of Client Extension
- No need for redeploys: Changes can be made and reflected instantly without restarting the server.
- Decoupled and maintainable: Reduces dependency on Liferay’s internal APIs, minimizing upgrade headaches.
- Cloud-native ready: Perfect for Liferay's cloud environments and headless architectures.
- Multiple types: From custom CSS and JS to widgets, remote apps, theme styles, and global JS injections.
Types of Client Extensions
| Category | Extension Name | Key (JSON type) | Description / Use Case |
|---|---|---|---|
| UI & Frontend | Custom Element | customElement | Embed custom UI components (e.g., React/Vue) as Web Components into Liferay pages. |
| IFrame App | iframe | Embed external applications or tools via iframe. | |
| Global JavaScript | globalJS | Inject JavaScript globally, e.g., for analytics or UI customization. | |
| Global CSS | globalCSS | Inject CSS across all pages (site-wide styling). | |
| Theme CSS | themeCSS | Extend or override the theme's built-in styles. | |
| Theme Favicon | themeFavicon | Customize the favicon shown in the browser tab. | |
| Theme Spritemap | themeSpritemap | Replace Liferay’s default icon set with a custom spritemap. | |
| Static HTML Content | staticContent | Serve predefined HTML or static content blocks in the UI. | |
| Language Keys / Translations | i18n | Add or override localized strings for multilingual support. | |
| Frontend Data Set Filter | frontendDataSetFilter | Add custom filters to frontend data tables or lists. | |
| Frontend Data Set Renderer / View | frontendDataSetView, cellRenderer | Customize how frontend datasets render rows or fields. | |
| Editor Config Contributor | editorConfigContributor | Modify WYSIWYG editor settings (e.g., toolbar, plugins). | |
| Configuration & Platform | Instance Settings Configuration | instanceSettings | Define or override portal-wide instance settings (e.g., default language, company name). |
| System Settings Contributor | systemSettingsContributor | Customize OSGi-level configuration settings. | |
| OAuth2 App for Headless Integration | oauth2ApplicationHeadlessServer | Register an OAuth2 application for headless API authentication. | |
| OAuth2 App for Web or SPA Clients | oauth2ApplicationUserAgent | Register OAuth2 for browser apps using authorization code flow. | |
| Settings Icon / Menu Item | settingsIcon | Add entries to the Liferay Control Panel or site menus. | |
| Panel App Contributor | panelApp | Create custom Control Panel applications or site administration entries. | |
| Blueprints (Search Tuning) | blueprint | Add or configure search blueprints for Liferay Search Experiences. | |
| Microservices & Backend | Object Action | objectAction | Add custom logic or behavior to Liferay Object triggers. |
| Object Validation | objectValidation | Apply custom validation rules to object fields before saving. | |
| Object Entry Manager | objectEntryManager | Customize how entries are managed through APIs. | |
| Workflow Action | workflowAction | Define custom actions in workflow processes. | |
| Notification Type | notificationType | Create new notification channels like Slack, Webhooks, or SMS. | |
| Batch & Initialization | Batch Import/Export | batch | Import/export large datasets using CSV or JSON. |
| Site Initializer | siteInitializer | Preconfigure and deploy a full site (layouts, content, roles) automatically. |
For more information related to types you can also visit here.
Why Use Client Extensions Over OSGi?
OSGi modules are powerful, but tightly coupled to Liferay’s internal implementation. CXs, on the other hand, are
- Easier to maintain across upgrades
- Faster to deploy and test
- Friendlier to front-end developers with less Liferay-specific knowledge
In short, they let you focus on experience delivery rather than infrastructure concerns.
Example: A Simple Custom Element CE
{
"name": "my-react-widget",
"type": "customElement",
"url": "https://yourcdn.com/my-widget/index.js",
"htmlElementName": "my-react-widget"
}This would allow you to drop a <my-react-widget></my-react-widget> tag anywhere in a Liferay page, pulling in your external React widget.
How to Deploy Client Extensions
- 1. Create your CE config (JSON or YAML).
- 2. Package and deploy using Liferay’s liferay-client-extension CLI or manually via the control panel
- 3. Test and iterate without the need to restart the server.
Client Extensions work seamlessly with both Liferay’s traditional UI and modern headless experiences.
The Future of Liferay Customization
Liferay Client Extensions are not just a “nice to have”—they’re the future of customizing Liferay DXP in a cloud-native, upgrade-friendly, and developer-centric way. Whether you’re building simple design tweaks or integrating full micro frontends, CEs offer a robust and scalable path forward.
