AEM Component Generator — User Guide

This tool scaffolds a complete Adobe Experience Manager component from a short form: the HTL template, Touch UI dialog, Sling Model, optional JUnit test, clientlib, README, i18n dictionary, and even an installable content package. Everything runs in your browser — nothing is uploaded.

Quick start

Pick a preset (Hero, Teaser, Card, Accordion, Carousel, CTA) or start from scratch — or Import an existing dialog.
Set the component basics — app name, component name, title, group, and Java package.
Add fields and choose a type for each. Reorder by dragging the handle or with the up/down arrows; duplicate with the copy icon.
Toggle the options you need (Sling Model, Exporter, package output, …). Hover any option for a hint.
Copy the active file or Download .zip, then drop it into your project.

The preview updates live as you type, with one tab per generated file, and your work is auto-saved in the browser so a refresh won't lose it.

What it generates

For a component named heroBanner in app myproject:

apps/myproject/components/heroBanner/.content.xml — component definition
apps/myproject/components/heroBanner/heroBanner.html — HTL template
apps/myproject/components/heroBanner/_cq_dialog/.content.xml — Touch UI dialog
core/.../HeroBannerModel.java — Sling Model (plus an *Impl in interface mode)
optional: _cq_editConfig.xml, _cq_design_dialog, a JUnit test, a clientlib, a README.md, an i18n/en.json dictionary, and item models for multifields

Field types

Each field maps to a Touch UI widget, a Sling Model member, and an HTL snippet:

Text — single-line text → String
Rich Text — RTE → String (rendered with @ context='html')
Path / Link — path picker → String
Image — file upload (DAM reference) → String
Checkbox — boolean → boolean
Dropdown / Radio — option list → String
Number — numeric → long
Date — date picker → Calendar
Tags — tag field → String[]
Color — color picker → String
Fragment Ref — content-fragment path → String
Multifield — a repeatable list of sub-fields → List<XItem> with a generated item model

Field name and label placeholders adapt to the chosen type, and auto-fill while you haven't customised them.

Managing fields

Reorder — drag the grip handle, or use the up/down arrows (keyboard-friendly).
Duplicate — the copy icon clones a field (its name gets a Copy suffix).
Advanced (chevron) — set the field's dialog tab, show/hide behaviour, dropdown options, or multifield sub-fields.

Validation

If anything would produce broken output, a banner lists the issues — empty, invalid (spaces/special characters), or duplicate field names, and an invalid component name. Offending fields are outlined in amber. Click Fix names to auto-convert everything to valid camelCase JCR names and de-duplicate them.

Import an existing component

Click Import dialog and paste a Touch UI dialog .content.xml. The tool reverse-engineers it into editable fields — widget type, property name, label, required flag, dropdown options, tabs, and multifield sub-fields — so you can tweak or extend an existing component instead of starting over. (Best-effort: unusual or custom widgets fall back to a text field.)

Options explained

Sling Model — generate the Java model. Turn it off and the HTL falls back to ${properties.x} (and ${resource.items} for multifields) with no Java emitted.
Model style — Concrete vs Interface + Impl — a single class, or the enterprise interface + *Impl convention.
Model Exporter (JSON) — adds @Exporter (Jackson) so the component serialises to JSON for SPA / headless.
Delegate to Core model — when extending a Core Component, injects the core model via @Self @Via(ResourceSuperType.class) (Teaser, Image, Title, …).
JUnit 5 test — an AemContext-based test that adapts the model and asserts every value field.
Container — the component accepts child components (a responsivegrid).
Edit config — emits _cq_editConfig.xml (edit-bar actions).
Clientlib / BEM SCSS — a clientlib stub; SCSS uses BEM nesting.
Data Layer — adds the Adobe Client Data Layer attribute to the HTL and a getData() scaffold on the model (via DataLayerBuilder, with @SlingObject resource).
Design dialog — emits _cq_design_dialog for template-level configuration.
i18n dictionary — emits apps/<app>/i18n/en.json keyed by your dialog labels.
README.md — a component README with a fields table and usage notes.
Output — Raw files vs Install pkg — raw file tree, or a ready-to-install content package (jcr_root/ + META-INF/vault/filter.xml).

Tabs & show/hide

Dialog tab — set a tab name on any field (under Advanced) to group fields into Touch UI tabs.
Show/hide — mark a Dropdown as a show/hide controller, then set Show when controller = value on dependent fields. The tool wires the Granite cq-dialog-dropdown-showhide pattern for you.

Installing the package in AEM

With Output: Install pkg, the .zip is a valid content package:

Open CRX Package Manager (/crx/packmgr).
Upload the downloaded .zip, then Install.
The component appears under /apps/<app>/components/<name>.

The Java model and test live under core/src/... — copy those into your bundle module and rebuild.

Share link — encodes the whole configuration into the URL; anyone who opens it sees your exact setup.
Save — stores named configurations in your browser (localStorage) to reload later.
Export / Import .json — download the configuration as a file (to version in your repo) and load it back later.
Auto-restore — your in-progress configuration is saved automatically and restored when you return.

Limitations

Data Layer generates a working getData() scaffold, but full ACDL parity (id strategy, parent context) is project-specific.
Dialog import is best-effort — unusual or custom widgets map to a text field; review the result.
i18n emits the dictionary; wiring the sling:Folder + jcr:language root is a manual step.
Generated code targets AEM as a Cloud Service / 6.5 conventions; the JUnit stub assumes the io.wcm AEM Mocks dependency is on your project.

Need a full component library, a migration, or a headless setup? Get in touch.