PHPackages                             mhsdesign/liveinspectordomchange - 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. [Utility & Helpers](/categories/utility)
4. /
5. mhsdesign/liveinspectordomchange

ActiveNeos-package[Utility & Helpers](/categories/utility)

mhsdesign/liveinspectordomchange
================================

Neos Live Inspector Package, which reflects changes to the dom via MhsDesign.LiveInspectorJsEvents

1.1.0(4y ago)61.2k1[3 issues](https://github.com/mhsdesign/MhsDesign.LiveInspectorDomChange/issues)GPL-3.0+JavaScript

Since Sep 5Pushed 2y ago1 watchersCompare

[ Source](https://github.com/mhsdesign/MhsDesign.LiveInspectorDomChange)[ Packagist](https://packagist.org/packages/mhsdesign/liveinspectordomchange)[ RSS](/packages/mhsdesign-liveinspectordomchange/feed)WikiDiscussions main Synced today

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

Warning

This package is deprecated!

While declarative syntax is cool, the matter is simply too complex to have a seemingles simple framework like this.

Its recommended to create a custom / well suited implemenation with the library instead of relying on this opinionated package.

For a tutorial to use the recommended library see:

This package will likely be not declared compatible with Neos 8 as there are only very little usages left.

Edit your Neos Site with more\* live feedback!
==============================================

[](#edit-your-neos-site-with-more-live-feedback)

\*Neos features already a great inline editor: [www.neos.io](https://www.neos.io/features/inline-editing-true-wysiwyg.html)

**Neos CMS Plugin for live inspector editing:**

MhsDesign.LiveInspectorDomChange
--------------------------------

[](#mhsdesignliveinspectordomchange)

*(the most non-advertising name - but thats what happening)*

### Install this package via composer:

[](#install-this-package-via-composer)

```
composer require mhsdesign/liveinspectordomchange

```

**Demo Video:**[![demo-live-changer-neos (2)](https://user-images.githubusercontent.com/85400359/132108191-da689307-818f-445a-b545-b0f3041a7b99.gif)](https://user-images.githubusercontent.com/85400359/132108191-da689307-818f-445a-b545-b0f3041a7b99.gif)*thanks, @Sebobo for *

Usage
-----

[](#usage)

### Activate live inspector editing in your Fusion component:

[](#activate-live-inspector-editing-in-your-fusion-component)

A basic (standalone) nodeType with a select box (nothing special in here)```
'Vendor.Site:Content.Example':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    icon: 'icon-internet-explorer'
    label: 'Example'
    # this will remove the Neos not inline editable overlay.
    inlineEditable: true
    inspector:
    groups:
      settings:
      label: 'Settings'
  properties:
    height:
    type: string
    ui:
      # not need to explicitly state it since its the default:
      # reloadIfChanged: false
      label: 'Height'
      inspector:
      group: settings
      editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor'
      editorOptions:
        allowEmpty: true
        values:
          # your css classes as key.
          height-sm:
            label: 'Small'
          height-md:
            label: 'Medium'
          height-lg:
            label: 'Large'
```

This Fusion will allow to change the class:

```
prototype(Vendor.Site:Content.Example)