PHPackages                             formatd/hotspot-content - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. formatd/hotspot-content

ActiveNeos-package[Templating & Views](/categories/templating)

formatd/hotspot-content
=======================

Hotspot Content Element for Neos CMS

v3.0.0(1mo ago)075MITJavaScript

Since Feb 16Pushed 2y ago1 watchersCompare

[ Source](https://github.com/Format-D/FormatD.HotspotContent)[ Packagist](https://packagist.org/packages/formatd/hotspot-content)[ RSS](/packages/formatd-hotspot-content/feed)WikiDiscussions main Synced 2w ago

READMEChangelog (2)Dependencies (5)Versions (3)Used By (0)

FormatD.HotspotContent
======================

[](#formatdhotspotcontent)

This package provides an image content element with hotspots. The Neos editor can create and drag hotspots on the image and provide labels and other descriptions. It can also be used to place hotspots on any content (not only images) by copying the `FormatD.HotspotContent:Content.ImageWithHotspots` prototype and replacing `renderer.content` with another content.

Compatibility
-------------

[](#compatibility)

Versioning scheme:

```
 1.0.0
 | | |
 | | Bugfix Releases (non breaking)
 | Neos Compatibility Releases (non breaking)
 Feature Releases (breaking)

```

Releases and compatibility:

Package-VersionNeos CMS VersionNotes3.0.x>= 9.0Neos 9 compatibility2.0.x>= 8.3 < 9There is no Version 1.0 to be matching with formatd/hotspot-editor versionsSee [CHANGELOG.md](CHANGELOG.md) for breaking changes and upgrade notes.

Screencast
----------

[](#screencast)

    hotspot-with-image-backend.mp4    Frontend asset handling
-----------------------

[](#frontend-asset-handling)

This package is **self-contained**: it has no runtime dependency on any asset bundler. It works in two modes.

### 1. Standalone ("just install")

[](#1-standalone-just-install)

Out of the box the package ships pre-built assets in `Resources/Public/HotspotContent/`(`Main.js`, `Main.css`) and auto-includes them in the page head.

The auto-includes can be toggled via settings (defaults shown):

```
FormatD:
  HotspotContent:
    includeJS: true
    includeCSS: true
```

### 2. With a project asset bundler / FormatD.ComponentLoader

[](#2-with-a-project-asset-bundler--formatdcomponentloader)

If your project bundles assets itself (e.g. via Vite) and/or uses `formatd/componentloader`() to load and re-initialize components on demand, **disable the auto-includes** (see above). This is required: with the auto-includes off the shipped bundle is not loaded, so its bootstrap never runs and there is no double-initialization.

The controller (`ContentWithHotspots.ts`, default export) exposes `initialize(domSection)` / `dispose()`. Wrap it in your own component manager and register it for `FormatD.HotspotContent:Molecule.ContentWithHotspots`.

For on-demand backend reloads, attach the component registration in your project Fusion with an override:

```
prototype(FormatD.HotspotContent:Molecule.ContentWithHotspots) {
    renderer.@process.augmentWithComponentRegistration {
        expression = FormatD.ComponentLoader:Meta.Processor.Component {
            fusionObjectName = 'FormatD.HotspotContent:Molecule.ContentWithHotspots'
        }
        @position = 'end'
    }
}

```

Extensibility and Customization
-------------------------------

[](#extensibility-and-customization)

This package is based on `formatd/hotspot-editor`() and provides a concrete implementation. Instead of using this package directly, it can also make sense to use it as an example of how to build your own hotspot elements in Neos.

### Customizing `ContentWithHotspots` via subclass

[](#customizing-contentwithhotspots-via-subclass)

Subclass `ContentWithHotspots` to keep project-specific behavior out of this package.

Protected extension points:

MethodDefaultOverride to…`createPortalWrapper()```Customize the portal container element`onLayerDidOpen(layer, hotspot, container)`noopReact after a layer becomes visible`onBeforeLayerHidden(layer, finish)`calls `finish()` immediatelyDelay hide until an animation completes — call `finish()` when done`onLayerDidClose(layer, hotspot, container)`noopReact after a layer is fully hiddenAlso accessible to subclasses: `isBackend`, `getLayer()`, `closeOtherShowroomHotspots()`, `hotspotsMap`.

#### Example

[](#example)

```
import ContentWithHotspots from './path/to/ContentWithHotspots';

class MyContentWithHotspots extends ContentWithHotspots {
    protected onBeforeLayerHidden(layer: HTMLElement, finish: () => void): void {
        layer.addEventListener('transitionend', finish, { once: true });
    }
}

const controller = new MyContentWithHotspots();
document.querySelectorAll('.content-with-hotspots').forEach((section) => {
    controller.initialize(section);
});
```

Contribution
------------

[](#contribution)

Please maintain a clean and consistent coding style.

To rebuild the assets (Node >= 24), run:

```
cd Resources/Private/Scripts/HotspotContentFrontend
npm install
npm run build
# or:
npm run watch
```

License
-------

[](#license)

See [LICENSE](LICENSE) (MIT)

###  Health Score

31

—

LowBetter than 65% of packages

Maintenance52

Moderate activity, may be stable

Popularity13

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 90.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~879 days

Total

2

Last Release

34d ago

Major Versions

v2.0.0 → v3.0.02026-07-15

### Community

Maintainers

![](https://www.gravatar.com/avatar/bb327c5b80466d2d0236e188879eb7bfefe44330e56fe7cc27b5417a5b9689ea?d=identicon)[formatd](/maintainers/formatd)

---

Top Contributors

[![bweinzierl](https://avatars.githubusercontent.com/u/30659291?v=4)](https://github.com/bweinzierl "bweinzierl (10 commits)")[![PetraWeinmueller](https://avatars.githubusercontent.com/u/42027350?v=4)](https://github.com/PetraWeinmueller "PetraWeinmueller (1 commits)")

### Embed Badge

![Health badge](/badges/formatd-hotspot-content/health.svg)

```
[![Health](https://phpackages.com/badges/formatd-hotspot-content/health.svg)](https://phpackages.com/packages/formatd-hotspot-content)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3841.2M](/packages/limenius-react-bundle)[neos/demo

Site package for the Neos Demo Site

18191.3k12](/packages/neos-demo)[wbrowar/guide

A CMS Guide for Craft CMS.

6154.7k1](/packages/wbrowar-guide)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)