In many of my SharePoint projects, clients often ask for a simple way to display important upcoming dates directly on their intranet home page. Sometimes it’s a product launch, a company-wide event, a compliance deadline, an employee engagement program, or even a major organizational announcement. A countdown timer is one of those small features that can significantly improve visibility and user engagement.
Recently, while working on an SPFx-based intranet portal, I needed a customizable countdown timer that could be managed directly from SharePoint. Although SharePoint Online provides a built-in Countdown Timer web part, it doesn’t always meet every business requirement. In several projects, I found myself building custom solutions using SharePoint Framework (SPFx) and React to provide additional flexibility, branding options, and dynamic functionality.
In this tutorial, I’ll share both approaches that I commonly use in real-world SharePoint implementations:
- Using the built-in Countdown Timer web part in SharePoint Online (no coding required)
- Building a custom Countdown Timer web part using SPFx and React for advanced customization
I’ll walk you through each method step by step, including the complete SPFx code, deployment process, and practical implementation guidance. By the end of this article, you’ll have a fully functional countdown timer running on your SharePoint site and a solid understanding of when to use the out-of-the-box solution versus a custom SPFx web part.
SPFx stands for SharePoint Framework. It’s Microsoft’s recommended way to build custom web parts and extensions for SharePoint Online and Microsoft Teams. You write code in TypeScript and React, and it runs client-side directly in the browser.
The great thing about SPFx is that your custom web parts look and behave just like native SharePoint web parts — they show up in the web part toolbox, support the property pane, and they’re fully responsive.
Method 1: The Built-in Countdown Timer Web Part
Before you write a single line of code, it’s worth knowing that SharePoint Online already ships with a Countdown Timer web part out of the box. If this covers your needs, you don’t need to build anything from scratch.
Here’s how to use it:
- Open the SharePoint page you want to edit and click Edit in the top-right corner.
- Click the + icon where you want to place the timer.
- Search for Countdown Timer and select it.
- Click the pencil icon (edit) on the web part to open the property pane.
- Set your:
- Title — what the countdown is for (e.g., “Product Launch in”)
- End date and time — the target datetime
- Display format — days only, or days + hours + minutes + seconds
- Count direction — countdown or count up
- Call-to-action button — optional link you can attach
- Background image — to make it look more polished
- Click Republish to save.
That’s it. For most use cases — company events, deadline reminders, open enrollment windows — this works perfectly.
When should you stop here?
The built-in web part is great if:
- You need a simple countdown with basic branding
- You don’t want to maintain custom code
- Non-technical users will be managing the timer
When should you build a custom one?
Move to Method 2 if you need:
- Auto-repeating timers
- Custom styling that matches your exact brand guidelines
- Multiple timers with different behaviors on one page
- Logic like “show a message when the timer hits zero”
Method 2: Build a Custom SPFx Countdown Timer
Now let’s get into the fun part — building your own countdown timer web part from scratch using SPFx and React.
Prerequisites
Before you start, make sure you have the following installed:
- Node.js v18 LTS — this is the currently recommended version for SPFx v1.20+
- Visual Studio Code (or any editor you prefer)
- A Microsoft 365 developer tenant or a SharePoint Online environment you can deploy to
To check if Node is installed:
node --version
Step 1: Set Up Your Development Environment
Open your terminal and install the global tools you need:
npm install @rushstack/heft yo @microsoft/generator-sharepoint --global
This installs:
- @rushstack/heft — the task runner SPFx uses to build and serve your project
- yo&