Windmill Svelte Patterns
Apply these Windmill-specific patterns when writing Svelte code in frontend/. For general Svelte 5 syntax (runes, snippets, event handling), use the Svelte MCP server.
Windmill UI Components (MUST use)
Always use Windmill's design-system components. Never use raw HTML elements.
Buttons — <Button>
<script>
import { Button } from '$lib/components/common'
import { ChevronLeft } from 'lucide-svelte'
</script>
<Button variant="default" onclick={handleClick}>Label</Button>
<Button startIcon={{ icon: ChevronLeft }} iconOnly onclick={prev} />Props: variant?: 'accent' | 'accent-secondary' | 'default' | 'subtle', unifiedSize?: 'sm' | 'md' | 'lg', startIcon?: {icon: SvelteComponent}, iconOnly?: boolean, disabled?: boolean
Text inputs — <TextInput>
<script>
import { TextInput } from '$lib/components/common'
</script>
<TextInput bind:value={val} placeholder="Enter value" />Props: value?: string | number (bindable), placeholder?: string, disabled?: boolean, error?: string | boolean, size?: 'sm' | 'md' | 'lg'
Selects — <Select>
<script>
import Select from '$lib/components/select/Select.svelte'
</script>
<Select items={[{ label: 'Jan', value: 1 }]} bind:value={selected} />Props: items?: Array<{label?: string; value: any}>, value (bindable), placeholder?: string, clearable?: boolean, size?: 'sm' | 'md' | 'lg'
Icons — lucide-svelte
Never write inline SVGs. Import from lucide-svelte:
<script>
import { ChevronLeft, X } from 'lucide-svelte'
</script>
<ChevronLeft size={16} />Form Components
Form components (TextInput, Toggle, Select, etc.) should use the unified size system when placed together.
Styling
- Use Tailwind CSS for all styling — no custom CSS
- Use Windmill's theming classes for colors/surfaces (see
frontend/brand-guidelines.md) - Read component props JSDoc before using them
Svelte MCP Server
Use the Svelte MCP tools when working on Svelte code:
- list-sections: Call first to discover available docs
- get-documentation: Fetch relevant sections based on use_cases
- svelte-autofixer: MUST use on all Svelte code before finalizing — keep calling until no issues
- playground-link: Only after user confirms and code was NOT written to project files