---
title: Time
---

<script>
    import { CalendarClock } from 'lucide-svelte';
    import Time from '$lib/components/toolbar/tools/Time.svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
</script>

# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }

This tool allows you to change or add timestamps to a trace.
You simply need to use the form shown below and validate it when you are done.

<div class="flex flex-row justify-center">
    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
</div>

When you edit the speed, the moving time is adapted accordingly in the form, and vice versa.
Similarly, when you edit the start time, the end time is updated to keep the same total duration, and vice versa.

<DocsNote>

When using this tool with existing timestamps, changing the time or speed will simply shift, stretch, or compress them accordingly.

</DocsNote>