We've added two new components to the Pro editor: a before/after slider and a diagram component.

Before/after Slider

The before/after slider lets visitors drag across an image to reveal the difference between two states—a "before" and "after" image in this case. This works well for any situation where you want to show a visual difference, for example, renovations or product comparisons.

The component can be fully styled and customised. Choose a "horizontal" or "vertical" slider and a starting position. You can let visitors drag it themselves, or control it on scroll, if you want to guide the experience. Titles can be included that switch automatically based on which image is more visible.

Diagram

The diagram component helps you visualize timelines, organizational structures, or any hierarchical information. You enter your content in a simple text format (similar to a bulleted list with dashes), and the component generates the visual structure.

There are three diagram types:

• Tree for branching structures
• Organization Chart for hierarchies
• Timeline for sequential steps

You can choose "horizontal" or "vertical" orientation, pick a line style (straight, curved, stepped, etc.), and decide whether text wraps in the nodes or shows in popups on hover.

Nodes can be animated in sequence, and you can style each level differently to create visual hierarchy. The component can be optimized for mobile with a horizontal scrollbar.

Both components are available now in the Pro editor. Questions? Reach out via chat or at info@maglr.com.