A React component for timeline-based video/audio editing with drag-and-drop functionality
npm install react-timeline-trackpadA React component for timeline-based video/audio editing with drag-and-drop functionality.
``bash`
npm install react-timeline-trackpad
This package requires the following peer dependencies:
`bash`
npm install react react-dom @dnd-kit/core@^6.3.1 @dnd-kit/sortable@^10.0.0 @dnd-kit/utilities@^3.2.0 uuid@^9.0.0
`tsx
import { TimelineTrackpad } from 'react-timeline-trackpad';
import 'react-timeline-trackpad/styles.css';
function App() {
return
}
`
`tsx
import { TimelineTrackpad, type Theme } from 'react-timeline-trackpad';
import 'react-timeline-trackpad/styles.css';
function App() {
const [theme, setTheme] = useState
return (
<>
>
);
}
`
- Drag and drop clips between tracks
- Resize clips by dragging handles
- Snap to grid for precise positioning
- Support for audio, video, and image clips
- Audio waveform visualization
- Video thumbnail preview
All types are exported from the package:
`tsx`
import type {
Clip,
TrackData,
Placeholder,
Emitter,
Theme,
ThemeColors,
TimelineTrackpadProps
} from 'react-timeline-trackpad';
The component supports both light and dark themes:
- Dark theme (default): Modern dark interface with blue accents
- Light theme: Clean light interface with subtle shadows
Pass the theme prop to TimelineTrackpad to switch between themes:theme="dark"
- - Dark themetheme="light"` - Light theme
-
The theme colors are defined in CSS variables and can be customized by overriding the CSS variables in your stylesheet.
MIT