Webflow Code Components Helper

📚 Complete documentation and Claude Code context for developing Webflow Code Components with React and TypeScript.

What This Package Does

When you install this package, it automatically adds:

1. WEBFLOW_CODE_COMPONENTS_GUIDE.md - A comprehensive guide covering:

   • Setting up a Webflow code components project
   • Creating and defining components
   • Working with props and variants
   • Deploying to Webflow
   • Best practices and troubleshooting

2. .claude.md context - Adds Webflow-specific context to your Claude Code setup (non-destructive merge if file exists)

Installation

npm install @julianmemberstack/webflow-code-components-helper --save-dev

That's it! The documentation files will be automatically added to your project root.

What Gets Installed

WEBFLOW_CODE_COMPONENTS_GUIDE.md

A complete step-by-step guide for building Webflow code components, including:

• Prerequisites and setup
• Creating React components
• Webflow component definitions
• Supported prop types
• Deployment workflow
• Troubleshooting tips

.claude.md Updates

If you're using Claude Code, this package intelligently updates your .claude.md file with Webflow-specific context:

• If .claude.md exists: Appends Webflow context (checks for duplicates)
• If .claude.md doesn't exist: Creates it with Webflow context
• Non-destructive: Preserves all existing content

Usage

After installation, you can:

1. Open WEBFLOW_CODE_COMPONENTS_GUIDE.md for the complete guide
2. If using Claude Code, it will automatically have context about your Webflow project
3. Follow the guide to create and deploy your code components

Supported Prop Types

• Text
• Rich Text
• Image
• Link
• Variant
• Visibility

Requirements

• Node.js 20+
• npm 10+
• Webflow account (Freelancer, Core, Growth, Agency, or Enterprise plan)

Resources

• Webflow Code Components Documentation
• Component Architecture
• Webflow CLI Reference

License

MIT

Author

Julian Galluzzo