© 2025 ClaudePluginHub . Not affiliated with Anthropic.
webflow-to-self-served-page | ClaudePluginHub
webflow-to-self-served-page Convert Webflow exports with CSV CMS data to self-served static pages with dynamic content loading
Themed Marketplace Availability This plugin is not yet in any themed marketplace. To install it, you'll need to add it from GitHub directly.
Installation Choose your preferred installation method below
A marketplace is a collection of plugins. Every plugin gets an auto-generated marketplace JSON for individual installation, plus inclusion in category and themed collections. Add a marketplace once (step 1), then install any plugin from it (step 2).
From All Plugins Recommended
One-time setup for access to all plugins
When to use: If you plan to install multiple plugins now or later
Step 1: Add the marketplace (one-time)
/plugin marketplace add https://claudepluginhub.com/marketplaces/all.jsonRun this once to access all plugins
Step 2: Install this plugin
/plugin install webflow-to-self-served-page@allQuick Install Use this plugin's auto-generated marketplace JSON for individual installation
When to use: If you only want to try this specific plugin
Step 1: Add this plugin's marketplace
/plugin marketplace add https://claudepluginhub.com/marketplaces/plugins/webflow-to-self-served-page.jsonStep 2: Install the plugin
/plugin install webflow-to-self-served-page@webflow-to-self-served-pageFrom Category Browse all data plugins
When to use: If you want to explore similar plugins
Webflow to Self-Served Page Plugin
Convert Webflow exports with CSV CMS data to self-served static pages with dynamic content loading
A Claude Code plugin that automates the conversion of exported Webflow landing pages into self-served static sites with dynamic content injection from CSV files.
🎯 What This Plugin Does
When you export a Webflow site, CMS content comes as separate CSV files and the HTML contains empty placeholders. This plugin:
Analyzes your Webflow export structure and CSV dataConverts CSV files to optimized JSON formatGenerates JavaScript loaders for dynamic content injectionUpdates HTML files with proper script referencesCreates comprehensive documentationSets up local development environment for preview
Result : A fully functional static site that loads CMS content dynamically, with no server or API required.
🚀 Quick Start
Installation
# Add the plugin marketplace (once GitHub repo is set up)
/plugin marketplace add filadd/webflow-to-self-served-page
# Install the plugin
/plugin install webflow-to-self-served-page
Basic Usage
# Navigate to your Webflow export directory
cd /path/to/webflow-export
# Run the conversion
/webflow-convert
# Preview the result
/webflow-preview
That's it! Your Webflow export is now a self-served static page with dynamic content.
📋 Commands
/webflow-convert [directory]Main conversion command - Converts the entire Webflow export
Analyzes CSV and HTML structure
Generates CSV-to-JSON converter
Creates CMS loader JavaScript
Updates HTML files
Generates documentation
/webflow-convert
/webflow-convert ./my-landing-page
/webflow-setup [directory]Initialize directory structure - Prepares the environment
Creates data/, scripts/, js/ directories
Validates Webflow export
Reports detected collections
/webflow-preview [port]Start local server - Preview your converted page
Starts Python HTTP server
Displays preview URL
Provides testing checklist
/webflow-preview
/webflow-preview 8080
/webflow-update [csv-file]Regenerate JSON - Update after CSV changes
Reruns CSV conversion
Updates JSON files
Much faster than full conversion
/webflow-update # Update all
/webflow-update testimonials.csv # Update specific file
/webflow-clean [--force]Remove generated files - Clean up conversion artifacts
Removes generated JSON, scripts, and docs
Preserves original CSV and HTML files
Asks for confirmation (unless --force)
/webflow-clean
/webflow-clean --force
🤖 Webflow Converter Agent The plugin includes a specialized webflow-converter subagent with expertise in:
Webflow export structure analysis
CSV data type detection
Intelligent field mapping
JavaScript generation
HTML integration
The agent is automatically invoked during /webflow-convert for complex tasks.
🏗️ How It Works
Architecture CSV Files → Python Converter → JSON Files → JavaScript Loader → HTML DOM
1. CSV Analysis The plugin intelligently detects collection types:
Testimonials : Fields like "Comentario", "Student", "Rating"Schools : Fields like "Logo", "Institution", "Location"Ambassadors : Fields like "Instagram", "Profile", "Social"Teachers : Fields like "Profesor", "Image", "Photo"Generic : Any other CSV structure
2. JSON Generation Converts CSV to clean, structured JSON:
{
"collection": "testimonials",
"total_count": 16,
"items": [
{
"id": "unique-id",
"name": "Student Name",
"comment": "Clean text without HTML",
"photo": "https://cdn.url/image.jpg",
"order": 1
}
]
}
3. JavaScript Injection Creates modular CMS loader:
class CMSLoader {
async loadAllData() { /* ... */ }
injectTestimonials() { /* ... */ }
injectSchools() { /* ... */ }
// ... more injection functions
}
4. HTML Integration Finds and replaces empty placeholders:
<!-- Before -->
<div class="w-dyn-items">
<div class="w-dyn-bind-empty"></div>
</div>
<!-- After -->
<div class="w-dyn-items">
<div class="testimonial-card">
<!-- Populated content -->
</div>
</div>
📁 Generated Structure your-webflow-export/
├── data/
│ ├── cms-testimonials.json
│ ├── cms-schools.json
│ └── cms-*.json
├── scripts/
│ └── csv-to-json.py
├── js/
│ └── cms-loader.js
├── *.csv (original files)
├── *.html (updated files)
└── README.md (generated docs)
🎨 Features
✅ Intelligent Detection
Automatically identifies collection types
Detects HTML injection points
Maps data fields intelligently
✅ Preserves Design
Maintains all Webflow CSS classes
Keeps responsive breakpoints
Preserves animations and interactions
✅ Performance Optimized
Minimal page load impact (~200ms)
Efficient DOM manipulation
Lazy loading ready
✅ Developer Friendly
Clean, modular code
Debug mode with console logging
Comprehensive error handling
Well-documented output
✅ Production Ready
XSS protection via HTML escaping
Graceful fallbacks for missing data
SEO-friendly markup
Browser compatible (all modern browsers)
🔧 Optional: Auto-Conversion Hooks Enable automatic JSON regeneration when CSV files change:
Opt-In Installation Copy the hooks configuration to your project:
# In your project directory
mkdir -p .claude/hooks
cp ~/.claude/plugins/webflow-to-self-served-page/hooks/hooks.json .claude/hooks/
What It Does
Watches for CSV file changes
Automatically runs conversion
Updates JSON files instantly
When to Use
✅ During active development
✅ When frequently updating content
❌ Not needed for production deployments
📊 Use Cases
Perfect For:
Marketing landing pages with testimonials, team members, partnersEducational sites with courses, teachers, student reviewsAgency portfolios with case studies, team, clientsEvent pages with speakers, sponsors, scheduleAny Webflow site with CMS collections exported as CSV
Example Projects:
Preuniversitario landing pages (original use case)
SaaS product pages with feature lists
Restaurant websites with menus and reviews
Real estate listings with properties
Job boards with positions and locations
🛠️ Requirements
Claude Code (latest version)Python 3.x (for CSV conversion)Modern browser (for testing) No additional dependencies needed!
📖 Documentation
For Users:
For Developers:
🔍 Troubleshooting
Content Not Loading Problem : Sections show "No items found"
Check browser console for errors
Verify JSON files exist in data/ folder
Hard refresh (Ctrl+F5) to clear cache
Run /webflow-update to regenerate JSON
CORS Errors Problem : "Access blocked" errors in console
Solution : Must use HTTP server, not file:// protocol
/webflow-preview # Starts server automatically
Images Not Displaying Problem : Broken image placeholders
Verify image URLs in CSV are complete (https://...)
Check network tab for failed image requests
Ensure CDN URLs are accessible
Styling Broken Problem : Content appears but styling is wrong
Verify all Webflow CSS files are present
Check that CSS classes are preserved in generated code
Run /webflow-clean and /webflow-convert to regenerate
🤝 Contributing Contributions are welcome! Please:
Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request
📄 License MIT License - see LICENSE file for details
👥 Authors
🙏 Acknowledgments
Built for the Filadd preuniversitario landing page project
Powered by Claude Code plugins system
Inspired by the need for simple, self-served Webflow exports
📞 Support
🗺️ Roadmap
v1.1
v1.2
v2.0
Information Keywords webflow
cms
static-site
csv
conversion
landing-page
