Facilities
Refurbishment updates
Show the state of a workplace project before and after each phase completes.
Content Creation
Before and After for SharePoint
Show change convincingly by letting readers reveal one image over another, using a pointer or the keyboard.
Before and After places two images behind a divider that readers move with a pointer or the keyboard to compare them.
Interactive preview
Drag the divider, or focus it and use the arrow keys, to reveal the second panel.
Before
After
Drag the control, or focus it and use the arrow keys, to move the divider between “Before” and “After”.
Placeholder artwork stands in for your own images. The divider is fully keyboard operable, so dragging is never required.
Capabilities
What Before and After does
- Two comparison modes
- Split images horizontally or vertically depending on what the subject needs.
- Keyboard slider
- Arrow keys, Home, and End move the divider in precise steps.
- Per-image captions
- Label each side clearly, with separate alternative text for both images.
- Starting position
- Open the comparison at any percentage to highlight the most relevant detail.
- Responsive framing
- Maintains aspect ratio and readable labels from wide desktops to small phones.
- Theme aware
- Divider, handle, and labels follow your SharePoint theme automatically.
Accessibility conformance
Before and After is developed and tested against WCAG 2.2 AA and is suitable for inclusion in an accessibility conformance report.
- The divider is an ARIA slider with
aria-valuenow,aria-valuemin, andaria-valuemax. - Full keyboard control means no dragging is ever required, satisfying Dragging Movements.
- Both images carry meaningful alternative text supplied by the author.
- Handle and divider meet the 3:1 non-text contrast requirement against both images.
- The handle exceeds Target Size (Minimum) at 44 by 44 CSS pixels.
- Movement is instant when the visitor prefers reduced motion.
In practice
Where teams use it
Communications
Redesign announcements
Explain a brand or intranet refresh by letting readers reveal the change themselves.
Product teams
Product and packaging revisions
Set a revision against its predecessor so the difference needs no description.
Operations
Process improvement showcases
Evidence a data quality or process change with the two states side by side.
Live demo
See it in action
The divider below behaves exactly like the web part. Your own images replace the placeholder panels.
Homepage, 2024 compared with 2026
2024 layout
2026 layout
Drag the control, or focus it and use the arrow keys, to move the divider between “2024 layout” and “2026 layout”.
Placeholder artwork. Your own images are stored in your SharePoint libraries and never copied to an external service.
Screenshot placeholder Split direction and caption settings in the property pane. Image to be supplied.
Screenshot placeholder A published comparison with per-image alternative text. Image to be supplied.
Environment
Compatibility and requirements
Items marked To be confirmed are pending final product documentation and are not a statement of support.
| Microsoft 365 | Any Microsoft 365 subscription that includes SharePoint Online. |
|---|---|
| SharePoint | SharePoint Online modern pages, including communication sites and team sites. SharePoint Server support: To be confirmed |
| Microsoft Teams | To be confirmed Availability as a Teams tab has not yet been published. |
| SPFx version | To be confirmed Supplied with the release notes for your package version. |
| Browsers | Current versions of the browsers supported by Microsoft 365 on Windows, macOS, iOS, and Android. |
| Devices | Desktop, tablet, and mobile. Layouts reflow for narrow screens. |
| Permissions to install | A SharePoint administrator uploads the package to the tenant app catalogue. Site owners then add the web part to a page. |
| API permissions requested | To be confirmed The permission set requested at deployment is listed in the installation guide. |
| Other requirements | No server-side components, database, or additional licences beyond your existing Microsoft 365 subscription. |
Trust
Security and privacy
Before and After runs inside your tenant as a SharePoint Framework solution and follows the permissions already assigned to each page.
Data handling
Content and settings are stored with the page in SharePoint. The web part does not create a separate data store.
External services
The web part renders content from your own tenant. Any external service is one your authors choose to embed.
API permissions
Permissions requested at deployment are listed in the installation guide and approved by an administrator before use. Details to be confirmed
Tenant and access control
Content inherits SharePoint permissions. Readers see it only if they can already open the page it sits on.
Getting started
From order to published page
Purchase
Send us your tenant details and user count. We confirm licensing and issue the package and licence key.
Install
A SharePoint administrator uploads the package to the tenant app catalogue and approves the requested permissions.
Configure
Site owners add the web part to a modern page and set its options in the property pane.
Use
Authors edit the content while editing the page. Changes publish with the page, with no further deployment.
Your package
What you receive
Product
The Before and After SPFx package, ready to upload to your tenant app catalogue.
Updates
Fixes and improvements released during your licence term, with release notes for each version.
Support
Email support for installation, configuration, and troubleshooting questions.
Documentation
Installation, configuration, and author guidance written for SharePoint administrators and site owners.
Licence
A tenant licence key and the licence terms for your records and procurement review.
Accessibility evidence
A conformance summary covering WCAG 2.2 AA testing, available for your accessibility reporting.
Answers
Frequently asked questions
Can it be used without a mouse?
Yes. The divider is fully operable with the keyboard and with assistive technology, and touch users can tap anywhere on the image to move it.
Do the images need to be the same size?
Matching dimensions give the best result. If they differ, the web part normalises them to a shared aspect ratio without distortion.
Where are the images stored?
In your own SharePoint libraries. Nothing is copied to an external service.
Show products, software, reports, etc before and after
Tell us about your environment and we will confirm licensing, rollout steps, and an accessibility conformance summary for your records.