🧩 Introducing Design2Liferay Elements
Design2Liferay Elements is a powerful toolset that lets you visually extract, organize, and convert HTML components from any webpage into reusable Liferay Fragments — in just a few clicks.
🔍 Explore the Extension UI
Here's a quick look at the tools you'll use inside the Elements tab:

Full interface showing all available tools

Element Picker – select HTML nodes visually

Extract Panel – preview and adjust component structure

Export Options – ready-to-use ZIP for Liferay
⚙️ How Design2Liferay Elements Works
- 🔍 Visually select any HTML element on the page
- 🛠️ Organize components into groups/fragments
- 🎯 Apply styling tokens or retain existing CSS
- 📦 Export as a ready-to-import Liferay Fragment
🚀 Get Started Quickly
Once the extension is installed, navigate to any webpage, click the "Elements" tab in the Design2Liferay extension popup, and start selecting your components. No setup, no code — just visual design extraction and conversion.