A Sneek Peek into 9.1 UX Improvements

The Neos Team is working on numerous User Experience improvements for Neos 9.1, including a better editing experience, content element drag&drop, and better link editing. Help us test these changes!

– Written by

Breadcrumbs in Header

SCR-20251022-jywf.png

The selected element from the Inspector top has been moved to a more logical place in the header bar. It can be used to navigate up the content tree.

Balloon Editing for Inline Styles

SCR-20251022-kbef 2-644x254.png

For applying inline styles like bold/italic (and links in the future), this is now possible via a balloon popup which appears once you select some text. This greatly reduces mouse distances and is more aligned to today's editing experiences in modern tools.

Improved Content Element Toolbars

SCR-20251022-knmt.png

In previous Neos versions, the controls around a selected content element were quite limited. In Neos 9.1, this has been greatly enhanced.

On the left, you see a new toolbar for styling:

  • Undo + Redo
  • Paragraph Styles
  • Format paragraph as code
  • format paragraph as list
  • insert table

On the right, you see the controls for the currently selected content element:

  • (when hovering) a button to add content above.
  • a drag handle for drag&drop of content elements
  • a context menu for less common functionality.

Below the content element, an button exists for adding a new content element below.

As usual in Neos, these elements are customizable: Right now, this can be adjusted via the configureToolbar registry in manifest.js. This will later be exposed to YAML configuration as well.

Known Issues

  • Firefox not supported yet (working on it with a Polyfill).

How to install the UI Improvements

1. You need a Neos 9 installation. If you do not have any, you can start with https://github.com/neos/neos-development-distribution.

2. install the pull request, by running composer require, then compiling the UI:

# in the root of your distribution:
composer require "neos/neos-ui:dev-feature/3972-node-toolbars" "neos/neos-ui-compiled:9.1.x-dev as dev-feature/3972-node-toolbars"

# compile Neos UI
cd Packages/Application/Neos.Neos.Ui
make setup

3. set frontendDevelopmentMode: true in Settings.yaml:

Neos:
  Neos:
    Ui:
      frontendDevelopmentMode: true

Further Infos and next steps

If you want to know more about the background ideas driving the above changes, Sebastian and Marc have documented their thoughts in detail in a forum post on discuss.neos.io.

We additionally want to greatly improve the link editor, by including functionality based on Sitegeist.Archaeropteryx into the core.

Feedback can best be given in Slack in #guild-ux! If you want to further support our efforts, you can also help out by becoming a long-term supporter.

A group of Neos core developers and community members, most notably Sebastian Helzle, Marc Henry Schultz, Nicolas Grey and Daniel Kestler, have been working a lot on improving the Neos 9 usability and user experience even further.

For this project, we're using funds of the Neos Foundation e.V. to improve Neos UX.

Read on for a sneek peek into the improvements, and see below how you can test this yourself. We are looking for testers!

Content Element Drag & Drop

SCR-20251022-lehu.png

Finally, Content Drag and Drop is implemented :) :) :)