@kobonostudio/vite-plugin-webflow-bundler NPM

🚀 vite-plugin-webflow-bundler

A Vite plugin that compiles and bundles your JavaScript and CSS files for seamless integration with Webflow, optimized for:

Local development (localhost)
Production delivery via GitHub CDN (jsDelivr)

✨ Features

⚡ Automatically generates CSS and JS loaders for Webflow
🔄 Export files into dist/
📦 Creates a manifest.json for CDN version tracking
🧪 Local interface at http://localhost:3000/webflow
🧠 Smart fallback logic: localhost → CDN
🧹 Automatic minification (individual files)

📦 Installation

npm install --save-dev @kobonostudio/vite-plugin-webflow-bundler

⚙️ Basic Setup

1. Add the plugin to `vite.config.js`

import { defineConfig } from 'vite'
import webflowBundlerPlugin from '@kobonostudio/vite-plugin-webflow-bundler'

export default defineConfig({
  plugins: [webflowBundlerPlugin()],
})

2. Create a `starter.config.js` file

export default {
  cdn: {
    baseUrl: 'https://cdn.jsdelivr.net/gh',
    user: 'your-github-user',
    repo: 'your-repo-name',
    branch: 'main',
    org: true, // or false for personal accounts
  },

  deploy: {
    mode: 'split', // 'none' | 'public-only' | 'split'
    publicRepo: 'my-webflow-project-prod',
    privateRepo: 'my-webflow-project',
    branch: 'main',
  },

  // (optional) custom order for CSS files
  cssOrder: [
    'reset.css',
    'variables.css',
    'layout.css',
    'components/button.css',
    'styles.css',
  ],
}

📁 Recommended Structure

your-project/
├── src/
│   ├── css/
│   │   ├── reset.css
│   │   ├── variables.css
│   │   ├── layout.css
│   │   └── styles.css
│   └── main.js
├── index.html
├── vite.config.js
├── starter.config.js
└── ...

🧪 Local Development

npm run dev

Then open:

http://localhost:3000/webflow

You’ll get:

✅ CSS & JS loaders automatically generated
📋 Copy-paste buttons for Webflow custom code
🔁 Automatic fallback between localhost and jsDelivr

🚀 Production Build

npm run build

This will:

🔧 Minify and copy CSS and JS files into dist/
📦 Generate a manifest.json
🧠 Inject loader snippets into dist/index.html

🔎 Output Structure

dist/
├── css/
│   ├── reset.css
│   ├── variables.css
│   ├── ...
│   └── main.css
├── scripts/
│   └── main.js
├── manifest.json
└── index.html (with injected loaders)