What This Is
The Rigid Heddle Pattern Visualizer is an interactive web application for designing and visualizing weaving patterns. It helps weavers experiment with color combinations, validate their patterns against physical loom constraints, and export designs before warping their looms.
But it's also something else: a working example of what happens when you build an entire application through conversation with AI.
How It Was Built
This tool was created through pair programming with Claude Code (Anthropic's AI assistant for software development). The entire codebase—from initial concept to canvas rendering engine to preset templates—emerged from iterative conversation.
I provided creative direction, domain knowledge about rigid heddle weaving, and design sensibility. Claude Code wrote the implementation, following strict constraints around weaving physics, handled the technical architecture, and built features incrementally with continuous testing.
The collaboration model is transparent: every commit message includes Co-Authored-By: Claude Sonnet 4.5. This isn't hidden—it's a feature worth documenting.
Why It Matters
This tool started from a simple question: could we build something that teaches weaving concepts through interaction, making pattern visualization more immediate and tactile?
The answer is yes—but only because the development process itself was conversational. Building with AI isn't about replacing human creativity; it's about having a technical partner who can implement your vision while you focus on user experience and craft knowledge.
Core Components
- Pattern Validator (
validator.js) - Enforces rigid heddle physics: warp calculations, standard heddle dents, loom width constraints - Canvas Renderer (
renderer.js) - Visualizes thread interlacement with zoom, pan, and drag controls - State Management (
app.js) - Reactive pattern updates with 500ms debounced auto-rendering
Key Technical Decisions
No build tools. Pure vanilla JavaScript, HTML5 Canvas, CSS. This keeps the project accessible—you can open index.html in any browser and it works. No npm, no webpack, no framework lock-in.
Rigid heddle physics. The renderer calculates thread visibility based on actual rigid heddle mechanics: odd threads in holes, even in slots, with proper pickup stick behavior. This isn't approximate—it's accurate to how the loom actually works.
Browser-based persistence. Patterns save to localStorage, not a server. This prioritizes privacy and offline capability over cloud sync.
Pattern Data Schema
Patterns are structured JSON with sections for metadata, loom specs, warp/weft configuration, weaving sections, and finishing. The schema supports plain weave, pickup patterns, color-and-weave effects, and leno lace—all validated against rigid heddle constraints.
Initial Concept (Day 1)
Started from a ChatGPT conversation about AI-assisted weaving pattern generation. Realized the real value wasn't just generating patterns—it was validating and visualizing them against actual loom constraints.
Proof of Concept (Day 1)
Built single-file HTML application with validator and canvas renderer. Proved the core concept: accurate rigid heddle physics visualization with real-time validation.
MVP Features (Day 2)
Added tabbed editing interface, auto-render with debouncing, save/load functionality, and GitHub Pages deployment. Fixed critical branch naming issue (renamed "master" to "main").
Canvas Improvements (Day 2)
Implemented drag-to-pan, mouse wheel zoom at cursor position, and fit-to-view. Solved the problem of long patterns being impossible to navigate.
Phase 2 Features (Day 3)
- Refactored single-file architecture into modular components
- Added section add/delete functionality
- Implemented section reordering with up/down arrows
- Created 4 preset templates (scarves, towel, table runner)
Total development time: ~3 days of iterative conversation
Human Agency, AI Implementation
The critical insight: I never stopped being the designer and decision-maker. Claude Code was the implementation partner, not the creative director. Every feature, every UX choice, every technical constraint came from understanding what weavers actually need.
Iterative Refinement
We didn't get everything right on the first try. Canvas navigation was unusable until we added pan/zoom. The single-file architecture became unwieldy until we refactored into modules. Each problem was solved through conversation: "This doesn't work because..." followed by "Let's try this instead..."
Weaver-Friendly Design
The interface uses plain language ("threads per inch" not "EPI" in labels), provides helpful validation messages, and defaults to sensible values. This came from understanding the user: skilled weavers who may not be technical.
Open Source by Default
All code is public, MIT-licensed, and documented. The goal isn't proprietary advantage—it's advancing accessible weaving tools. If someone wants to fork this and build something better, perfect.
What's Next
Potential future enhancements include PDF export with printable instructions, yarn calculators, custom color palettes, and pattern sharing. But the immediate goal is simpler: get this into weavers' hands and learn what actually matters.
The best features emerge from real use, not speculation.
Try It Yourself
The application is live and fully functional. Open it, load a template, customize the colors, and see your pattern render in real-time.