Codalyn Loadout

A professional TypeScript development environment for building and deploying custom scripts to Webflow sites via jsDelivr CDN.

Quick Start

``bash


Install dependencies

`html


IX3 Features:
- Automatic state markers (data-state="active|prev|next|inactive")
- Custom event emission for GSAP animations
- Instance-based scoping for targeted interactions

See 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 point

docs/ # 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.

License

ISC