An event countdown in Bubble displays the time remaining until a specific date using dynamic expressions that calculate the difference between the target date and the current time. You use date math operators to extract days, hours, minutes, and seconds, refresh the display every second with a scheduled workflow, and auto-hide or change the display when the event arrives. This is perfect for product launches, sales, and event registration deadlines.
Overview: Event Countdown in Bubble
This tutorial shows you how to build a countdown widget that displays the time remaining until a specific event. You will use Bubble's date math operators, create a real-time ticking display, handle the zero state, and optionally make the countdown shareable via URL parameters.
Prerequisites
- A Bubble app with a page to display the countdown
- An event date to count down to (static or from a database record)
- Basic understanding of dynamic expressions and custom states
Step-by-step guide
Set up the target date and countdown container
Set up the target date and countdown container
On your page, decide where the countdown goes. Add a Group to contain the countdown elements. Create a custom state on the page called 'target_date' (type: date). Set it to your event date — either hardcoded, from a URL parameter, or from a database record. For a database-driven countdown, pass the event ID in the URL and set target_date to 'Get data from page URL's event's start_date'.
Expected result: A container Group is placed with a target_date custom state ready for countdown calculations.
Calculate and display days, hours, minutes, seconds
Calculate and display days, hours, minutes, seconds
Inside the countdown Group, add four pairs of text elements — one for the number and one for the label (Days, Hours, Minutes, Seconds). For Days: set the text to '(page's target_date minus Current date/time):extract days'. For Hours: '(page's target_date minus Current date/time):extract hours'. For Minutes: 'extract minutes'. For Seconds: 'extract seconds'. Note that the extract operators return the component, not total — so extract hours returns 0-23, not total hours remaining.
Expected result: Four number-label pairs display the countdown components (days, hours, minutes, seconds).
Make the countdown tick every second
Make the countdown tick every second
To make the seconds tick down in real time, add a 'Do every 1 second' workflow event. In the workflow, toggle a dummy custom state (e.g., a yes/no state called 'tick') between yes and no. This forces Bubble to recalculate all dynamic expressions on the page, updating the countdown display. Without this refresh trigger, the countdown only updates on page load.
Pro tip: The 'Do every 1 second' approach uses minimal WUs since it only forces a client-side recalculation, not a database query.
Expected result: The countdown ticks down every second in real time, showing a live decrease in the seconds component.
Handle countdown expiry
Handle countdown expiry
Add a conditional on the countdown Group: 'When page's target_date is less than Current date/time' → set 'This element is visible' to no. Below the countdown Group, add a text element saying 'The event has started!' or 'This offer has expired!' with the opposite conditional (visible when target_date < now). This automatically switches the display when the countdown reaches zero.
Expected result: When the countdown reaches zero, the numbers disappear and a 'started' or 'expired' message appears.
Style the countdown with visual polish
Style the countdown with visual polish
Style the number text elements with a large, bold font (48-72px). Add a background card behind each number-label pair with rounded corners and a subtle shadow. Use conditional formatting to change colors as urgency increases — for example, when remaining time is less than 1 day, change the text color to red. Add a subtle flip or fade animation using CSS transitions in an HTML element wrapper for a professional look.
Expected result: The countdown has a polished visual appearance with urgency-based color changes and card-style number displays.
Create shareable countdown links
Create shareable countdown links
To let users share countdowns for specific events, pass the event date as a URL parameter. Construct the URL: yourapp.com/countdown?target=2026-04-15T09:00:00. On the page, read the parameter with 'Get data from page URL' → parameter 'target' formatted as date. Set the page's target_date state to this value. Add a 'Copy Link' button that copies the current URL to clipboard so users can share the countdown.
Expected result: Users can share a URL that opens the countdown page pre-configured to count down to a specific date.
Complete working example
1EVENT COUNTDOWN — WORKFLOW SUMMARY2====================================34PAGE CUSTOM STATES:5 target_date (date) — the event date/time6 tick (yes/no) — toggled every second for refresh78COUNTDOWN DISPLAY:9 Days: (target_date - now):extract days10 Hours: (target_date - now):extract hours11 Minutes: (target_date - now):extract minutes12 Seconds: (target_date - now):extract seconds1314LIVE TICKING:15 Event: Do every 1 second16 Action: Set state tick = (not tick)17 Forces Bubble to recalculate dynamic expressions1819EXPIRY HANDLING:20 Conditional: target_date < now → hide countdown21 Show 'Event has started!' message instead2223URGENCY STYLING:24 When remaining < 1 day → red text25 When remaining < 1 hour → red background pulse2627SHAREABLE LINK:28 URL: /countdown?target=2026-04-15T09:00:0029 Read: Get data from page URL → target param30 Copy Link button → copy URL to clipboardCommon mistakes when creating an Event Countdown in Bubble
Why it's a problem: Using total time calculations instead of component extraction
How to avoid: Use the ':extract days', ':extract hours', ':extract minutes', ':extract seconds' operators for proper component display
Why it's a problem: Forgetting the 'Do every 1 second' refresh trigger
How to avoid: Add a 'Do every 1 second' event that toggles a dummy state, forcing Bubble to recalculate all expressions
Why it's a problem: Not handling timezone differences for the target date
How to avoid: Store target dates in UTC and let Bubble display them in the user's local timezone automatically
Best practices
- Use ':extract' operators for proper days/hours/minutes/seconds breakdown
- Toggle a dummy state every second to force real-time recalculation
- Add urgency styling (color changes) as the countdown nears zero
- Hide the countdown and show a message when the event arrives
- Use URL parameters for shareable countdown links
- Store target dates in UTC for consistent behavior across timezones
- Consider stopping the 'Do every 1 second' event after expiry to save client-side resources
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a countdown timer in Bubble.io that shows days, hours, minutes, and seconds until my product launch on April 15, 2026. It should tick in real time and show a message when the launch arrives.
Add a countdown timer to my landing page that counts down to April 15, 2026 at 9:00 AM. Show days, hours, minutes, and seconds updating in real time. When the countdown reaches zero, hide it and show 'We have launched!' Make the numbers large with card-style backgrounds.
Frequently asked questions
Can I count down to a dynamic event date from the database?
Yes. Pass the event ID in the URL, load the event record, and set the target_date state to the event's date field. Each event gets its own unique countdown.
Does the countdown consume workload units?
The 'Do every 1 second' event toggles a client-side state with no database queries, so WU consumption is negligible. Only the initial page load search costs WUs.
Can I add a countdown to a Repeating Group cell?
Yes, but having multiple countdowns ticking simultaneously can be resource-intensive. For lists, show static time remaining and refresh on page load rather than real-time ticking.
How accurate is the countdown?
The countdown is accurate to within 1-2 seconds. Browser tab throttling may cause the 'Do every 1 second' event to slow down in inactive tabs. Use timestamp-based calculation for accuracy.
Can RapidDev build a custom event management system with countdowns?
Yes. RapidDev can build event management platforms with countdown timers, registration flows, ticketing, and email reminders in Bubble.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation