In today’s fast-paced digital environment, getting the right message across at the right time is crucial. Whether you’re rolling out a critical update, announcing a new feature, or sharing an important internal communication, users often miss static announcements placed deep inside a page.

To solve this, I built the Notification Marquee SPFx Web Part — a lightweight, stylish, and highly configurable scrolling marquee for SharePoint modern sites and Microsoft Teams!

What is the Notification Marquee SPFx Web Part?

The Notification Marquee is a SharePoint Framework (SPFx) React Web Part that displays scrolling text messages to capture users’ attention instantly. Designed for modern communication sites, team sites, and Teams Tabs, this web part is ideal for broadcasting important notices in a non-intrusive yet highly visible manner.

It’s simple to deploy, easy to configure, and completely customizable.

Key Features

• Lightweight and Fast: Minimal code, efficient animation, and no unnecessary bloat.
• Customizable Message: Update your announcement message anytime via the Web Part property pane without touching the code.
• Modern UI: Smooth, professional scrolling animation that fits seamlessly into modern SharePoint and Teams designs.
• Responsive: Works beautifully across devices — desktop, tablet, or mobile.
• Multi-Host Support: Deploy as a SharePoint WebPart, Teams Tab, or Teams Personal App.
• Theme Support: Adapts to SharePoint themes automatically for better user experience.

How It Helps

• Increases Visibility: Scrolling content catches the eye immediately compared to static text boxes.
• Improves Communication: Share critical information, updates, and announcements effectively without disrupting user workflows.
• Enhances UX: Adds a dynamic, live feel to otherwise static communication pages.

Whether you want to notify users of a scheduled downtime, company announcement, compliance policy, or a team achievement — this Web Part makes sure no one misses it!

Project Structure

/src/webparts/notificationMarquee/
├── components/
│   ├── INotificationMarqueeProps.ts
│   ├── NotificationMarquee.module.scss
│   ├── NotificationMarquee.tsx
│
├── NotificationMarqueeWebPart.ts
├── NotificationMarqueeWebPart.manifest.json
├── config/
├── gulpfile.js
├── package.json
├── tsconfig.json

Clean structure, clean code, built with React Functional Components and TypeScript.

How to Install and Package

1. Clone the Repository:

git clone https://github.com/Dips97/Notification-Marquee.git

cd notification-marquee-spfx

2. Install Dependencies:

npm install

3. Set Your SharePoint Domain: Update the config/serve.json file:

"initialPage": "https://<yourtenant>.sharepoint.com/_layouts/workbench.aspx"

4. Run Locally:

gulp serve

5. Package for Production:

gulp clean
gulp build
gulp bundle --ship
gulp package-solution –ship

6. Upload .sppkg file to the App Catalog and deploy!

Demo

Privacy Policy

We take user privacy very seriously.
Please review the full Privacy Policy to understand how data is handled when using the Notification Marquee Web Part.

• No personal data is collected.
• The Web Part operates solely on user-inputted messages configured inside your SharePoint site.

Terms of Use

By deploying or using the Notification Marquee Web Part, you agree to the Terms of Use.
The web part is provided as-is without any warranties, and users must ensure compliance with their organization’s SharePoint governance policies when deploying custom solutions.

Support This Project

If you find this project useful, please consider giving it a star on GitHub! It helps others discover the project and motivates further development.

Download the Webpart

Github: Download here

Contact

Have a question, feedback, or want to contribute?

• ✉️ Email me: dipak@powersolution.dev
• 🔗 Connect with me on LinkedIn

Let’s keep building amazing things together!