# How to Create an Event Countdown in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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).

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
EVENT COUNTDOWN — WORKFLOW SUMMARY
====================================

PAGE CUSTOM STATES:
  target_date (date) — the event date/time
  tick (yes/no) — toggled every second for refresh

COUNTDOWN DISPLAY:
  Days:    (target_date - now):extract days
  Hours:   (target_date - now):extract hours
  Minutes: (target_date - now):extract minutes
  Seconds: (target_date - now):extract seconds

LIVE TICKING:
  Event: Do every 1 second
  Action: Set state tick = (not tick)
  Forces Bubble to recalculate dynamic expressions

EXPIRY HANDLING:
  Conditional: target_date < now → hide countdown
  Show 'Event has started!' message instead

URGENCY STYLING:
  When remaining < 1 day → red text
  When remaining < 1 hour → red background pulse

SHAREABLE LINK:
  URL: /countdown?target=2026-04-15T09:00:00
  Read: Get data from page URL → target param
  Copy Link button → copy URL to clipboard
```

## Common mistakes

- **Using total time calculations instead of component extraction** — Displaying total hours (e.g., 742) instead of component hours (e.g., 22 with 30 days) confuses users Fix: Use the ':extract days', ':extract hours', ':extract minutes', ':extract seconds' operators for proper component display
- **Forgetting the 'Do every 1 second' refresh trigger** — Without a recurring event to force recalculation, the countdown only shows the time from the initial page load Fix: Add a 'Do every 1 second' event that toggles a dummy state, forcing Bubble to recalculate all expressions
- **Not handling timezone differences for the target date** — Users in different timezones see different countdown values if the target date is not in UTC Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-an-event-countdown-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-an-event-countdown-in-bubble