Cron
A live, character-based preview of a cron schedule, showing matching minute and calendar positions.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphCron } from '@fractaldesign/machines-ui';Preview
<GraphCron title="WEEKDAYS" expr="0 9 * * 1-5" count={8} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption drawn on the top edge as `[ TITLE ]`. |
| expr* | string | — | Standard 5-field cron expression: `min hour dom mon dow`. |
| count | number | 8 | Number of next runs to render on the tick timeline. Default 8. |
| baseTime | number | — | Base time as ms since epoch; next runs are computed from this point. Default now. |
| cols | number | 60 | Scene width in characters. Default 60. |
| rows | number | 12 | Scene height in rows. Default 12. |
| animated | boolean | true | Animate the tick highlight. Default true. Reduced motion freezes on first run. |
| speedMs | number | 220 | Milliseconds per tick. Default 220. |
| label | string | '' | Caption rendered muted under the timeline. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| ParsedCron | interface | |
| RunRow | interface | |
| Seg | interface |
Theming
CSS custom properties this component reads.
- --graph-accent
- --graph-accent-2
- --graph-accent-3
- --text-muted
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/animated/GraphCron.svelte