Professional TypeScript toolkit for extending Webflow with custom scripts.
npm install codalyn-loadoutA professional TypeScript development environment for building and deploying custom scripts to Webflow sites via jsDelivr CDN.
``bashInstall dependencies
pnpm install
Documentation
| Guide | Description |
|-------|-------------|
| Workflow Guide | Daily development workflow and git integration |
| Development Guide | Architecture, build system, and best practices |
| Deployment Guide | jsDelivr CDN setup and version management |
Features
Built with FSD and DDD principles for maintainable, scalable code organization.
$3
Pre-built Swiper carousel with type-safe configuration via data attributes and built-in Webflow IX3 (GSAP) integration:
`html
data-slider-instance="hero"
data-slides-per-view="3"
data-space-between="20"
data-breakpoints='{"640":{"slidesPerView":2}}'>
IX3 Features:
- Automatic state markers (
data-state="active|prev|next|inactive")
- Custom event emission for GSAP animations
- Instance-based scoping for targeted interactionsSee src/features/carousel/README.md for full documentation.
Tech Stack
- TypeScript - Type-safe development
- esbuild - Ultra-fast bundler
- Biome - Linting and formatting
- Playwright - E2E testing
- Swiper - Touch slider component
- pnpm ≥10 - Package manager
Commands
| Command | Description |
|---------|-------------|
|
pnpm dev | Start dev server (localhost:3005) |
| pnpm build | Build for production |
| pnpm check | Lint + type check |
| pnpm check:fix | Auto-fix issues |
| pnpm push | Smart git push with auto-sync |
| pnpm test | Run tests |Project Structure
`
src/
├── features/ # Feature modules (FSD)
│ └── carousel/
│ ├── index.ts # Public API
│ ├── lib.ts # Implementation
│ ├── model.ts # Business logic
│ ├── types.ts # Domain types
│ ├── integration/ # IX3 integration
│ └── README.md # Feature docs
├── shared/ # Shared infrastructure
│ └── interaction-bridge/ # Webflow IX3 integration
│ ├── emit.ts # Event emission
│ ├── state.ts # State management
│ └── index.ts # Public API
├── utils/ # Shared utilities
└── index.ts # Entry pointdocs/ # Project documentation
tests/ # E2E tests
bin/ # Build scripts
`Webflow Integration
Global Snippet (recommended): Copy the head/body snippets from your terminal when running
pnpm dev to automatically switch between localhost and CDN. The toggle button only appears on localhost.Production (auto-updating):
`html
`Production (pinned version):
`html
`Note: The
type="module"` attribute is required for ESM code splitting.ISC