Countdown:
1) Setup:
• Add the element to your page and provide a Date value in the element editor.

2) Automatic Start:
• Once the page loads or the Date property is set, the countdown will automatically start.

3) Available States and Variables:
• The element will publish time variables for Days, Hours, Minutes, and Seconds, available as both numbers and formatted text.
• A formatted time string (Time Left: 00:00:00:00) is also provided for easy display.

4) Time is Up Event:
• Once the countdown reaches zero, you can trigger actions by utilizing the Time is Up event.

Timer:

1)Setup:
• Add the element to your page.

2) Starting the Timer:
• Use the Start action, passing in the number of seconds to count down from.
• After starting, the Start action acts as a resume function when the timer is paused.

3) Pausing and Resetting:
• The Pause action will pause the countdown.
• The Reset action sets the timer to a new number of seconds and keeps it paused until resumed.

4) Available States and Variables:
• You can access Time Left as a number (seconds) for calculations or as a text (00:00:00) to display.
• Two boolean states, Is Paused and Is Timing, are available for styling buttons (e.g., pause/play).

5) Time is Up Event:
• When the timer reaches zero, trigger actions using the Time is Up event.

Stopwatch:

1) Setup:
• Add the element to your page.

2) Using Stopwatch Actions:
• Use Start, Pause, Reset, and Lap actions like any traditional stopwatch.

3) Lap Functionality:
• When the Lap action is triggered, the current time is published as Lap Time (number) and Formatted Lap Time (string).
• These values are accessible through the Lap Time event.

4) Available States and Variables:
• Access Time Elapsed as both a number (seconds) and Formatted Time (string).
• The Is Timing boolean state is useful for styling start/stop and lap/reset buttons.

Hint:
• These elements will not visually appear on your site, only in the editor.
• To prevent them from disrupting your page layout, group them in an "Align to Parent" container. This ensures the elements don’t interfere with your layout.