svelte-dnd-timeline

A powerful drag-and-drop timeline component for Svelte 5, built with @atlaskit/pragmatic-drag-and-drop.

This is a conceptual port of dnd-timeline to Svelte, featuring precise pixel manipulation and layout control for timeline-based interfaces.

Features

• Drag items horizontally to move them in time
• Drag items vertically to move them between rows
• Resize items by dragging the left or right edges
• Grid snapping for precise alignment
• Real-time visual feedback during drag operations
• Type-safe with full TypeScript support
• Headless & Composable - You control the layout and styling
• Built with Svelte 5 and modern runes API

Installation

npm install svelte-dnd-timeline @atlaskit/pragmatic-drag-and-drop @atlaskit/pragmatic-drag-and-drop-auto-scroll

Usage

This library provides a headless, composable set of components. You are responsible for iterating over your rows and items, which gives you full control over the markup and styling.

<script lang="ts">
    import { Timeline, TimelineRow, TimelineItem } from 'svelte-dnd-timeline';
    import type { Item, Row, TimelineOptions } from 'svelte-dnd-timeline';

    const rows: Row[] = [
        { id: 'row-1', label: 'Team A' },
        { id: 'row-2', label: 'Team B' }
    ];

    // Items must be reactive (using $state) if you want the UI to update
    const items = $state<Item[]>([
        { id: '1', rowId: 'row-1', span: { start: 100, end: 300 }, title: 'Task 1' },
        { id: '2', rowId: 'row-2', span: { start: 400, end: 600 }, title: 'Task 2' }
    ]);

    const options: TimelineOptions = {
        items,
        rows,
        range: { start: 0, end: 1000 },
        gridSize: 50
    };
</script>

<!-- You can pass any class to style the container -->
<Timeline {options} class="timeline-container">
    <!-- You can build your own header here -->
    <div class="header">...</div>

    <!-- Render Rows -->
    {#each rows as row (row.id)}
        <div class="row-wrapper">
            <div class="sidebar">{row.label}</div>

            <!-- The Droppable Row Area -->
            <TimelineRow id={row.id} class="row-track">
                {#each items.filter((i) => i.rowId === row.id) as item (item.id)}
                    <!-- The Draggable Item -->
                    <TimelineItem {item} class="item-style">
                        <!-- Custom Content Snippet -->
                        {#snippet children({ item })}
                            <span>{item.title}</span>
                        {/snippet}
                    </TimelineItem>
                {/each}
            </TimelineRow>
        </div>
    {/each}
</Timeline>

<style>
    .timeline-container {
        border: 1px solid #ccc;
        width: 100%;
    }
    .row-wrapper {
        display: flex;
        height: 50px;
        border-bottom: 1px solid #eee;
    }
    .sidebar {
        width: 100px;
        border-right: 1px solid #eee;
    }
    /* TimelineRow needs relative positioning usually handled by the lib, 
     but you can add background colors etc */
    :global(.row-track) {
        flex: 1;
        background: #f9f9f9;
    }
    /* TimelineItem handles positioning, you handle the look */
    :global(.item-style) {
        background: #e0f2fe;
        border: 1px solid #7dd3fc;
        border-radius: 4px;
    }
</style>

API

Components

<Timeline>

The root container.

• options: TimelineOptions - Configuration object.
• class: string - CSS class for the wrapper.

<TimelineRow>

A droppable zone for items.

• id: string - The row ID (must match row.id).
• class: string - CSS class.

<TimelineItem>

A draggable and resizable item.

• item: Item - The item data object.
• class: string - CSS class.
• children: Snippet - Render prop for item content. Receives { item, isDragging }.

Types

interface TimelineOptions {
    items: Item[];
    rows: Row[];
    range?: { start: number; end: number };
    gridSize?: number;
    magnetism?: number;
    minWidth?: number;
    collision?: boolean;
}

interface Item {
    id: string;
    rowId: string;
    span: { start: number; end: number };
    title?: string;
    [key: string]: any;
}

Developing

pnpm install
pnpm run dev

License

MIT