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

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!

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.

Content Element Drag & Drop

SCR-20251022-lehu.png

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

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.

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

Known Issues

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

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.