WP Manifestindependent plugin directory
manifest / developer / vibedrop

VibeDrop

Drop your vibe-coded features into WordPress. Paste AI-generated HTML/CSS/JS and it just works.

by VibeDrop · github.com/dekic648/vibedrop · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/dekic648/vibedrop/archive/refs/heads/main.zip
Readme github.com/dekic648/vibedrop ↗

Drop your vibe-coded features into WordPress. No build step, no dev environment, no shortcode juggling.

You vibe code a feature with Claude, ChatGPT, or any AI tool. VibeDrop makes it part of your WordPress site in seconds.

How to Install

  1. Download or clone this repo
  2. Copy the vibedrop folder to wp-content/plugins/
  3. Go to WordPress Admin > Plugins and activate VibeDrop

You'll see a new VibeDrop menu in the sidebar and a new VibeDrop block available in the page editor.

How to Use

The Quick Way (Gutenberg Block)

This is the recommended workflow. Three steps, no shortcodes.

Step 1 — Edit any page

Open the page where you want to add your feature. Click the block inserter (+) and search for VibeDrop.

Step 2 — Add your code

You have three options:

  • Click Paste Code and paste your HTML
  • Click Upload .html File and select your file
  • Drag and drop an .html file directly onto the block

VibeDrop will show a live preview of your feature right in the editor.

Step 3 — Save the page

Hit Publish or Update. Your vibe-coded feature is live. That's it.

The Power User Way (Shortcode)

If you want to manage snippets centrally or reuse the same feature across multiple pages:

  1. Go to VibeDrop > Add New in the sidebar
  2. Give it a title (e.g., "Booking Widget")
  3. Paste your HTML into the code editor
  4. Click Publish
  5. Copy the shortcode shown (e.g., [vibedrop id="42"])
  6. Paste the shortcode into any page or post

Making It Match Your Site

VibeDrop has a built-in theme scanner that reads your WordPress theme's fonts, colors, spacing, and button styles.

Before You Vibe Code (Best Results)

  1. Go to VibeDrop > Theme DNA in the WordPress sidebar
  2. You'll see your site's full design system extracted automatically
  3. Click Copy Prompt
  4. Paste this prompt into Claude/ChatGPT before describing your feature

Example:

[paste the Theme DNA prompt]

Build me a booking page with a calendar, time slot picker, and contact form.

The AI output will already use your site's exact fonts, colors, and styles. When you drop it into VibeDrop, it looks native.

After You Paste (Automatic)

When you set the style mode to Blend (the default), VibeDrop automatically applies a "safety net" — base styles for buttons, inputs, headings, and text that match your theme. Your code's styles take priority, but anything the AI didn't explicitly style inherits from your theme.

To change the style mode:

  • Gutenberg block: Open the sidebar (Settings panel) and choose Blend or Standalone
  • Shortcode: Edit the snippet in VibeDrop admin and select the mode under Settings
Mode What It Does
Blend Inherits your theme's fonts, colors, and element styles. Best for most cases.
Standalone Uses your code's styles exactly as-is, fully isolated. Use when the feature has its own complete design.

What You Can Drop In

HTML / CSS / JS (most common)

This is what most AI tools output — a single HTML file with inline styles and scripts. VibeDrop handles it natively.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>/* your styles */</style>
</head>
<body>
  <div class="my-widget">...</div>
  <script>/* your interactivity */</script>
</body>
</html>

VibeDrop will:

  • Extract the body markup and render it inline on your page
  • Scope all CSS selectors so they don't clash with your theme
  • Wrap all JS so DOM queries stay inside your component
  • Load external dependencies (Tailwind, Google Fonts, etc.) once per page

React Components

Paste a React component directly — no build step needed.

import { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

export default function Dashboard() {
  const [metric, setMetric] = useState('revenue');
  return (
    <div className="p-6">
      <BarChart data={data}>
        <Bar dataKey={metric} fill="#2563eb" />
      </BarChart>
    </div>
  );
}

VibeDrop will:

  • Detect that it's React code
  • Load React, ReactDOM, and Babel Standalone via CDN
  • Rewrite import statements to use CDN globals
  • Map known packages (recharts, framer-motion, lucide-react, etc.) to CDN URLs
  • Generate a mount point and render call automatically

Supported packages include: recharts, framer-motion, lucide-react, zustand, date-fns, axios, lodash, clsx, and more. Unknown packages fall back to unpkg.com.

Vue Components

Both Composition API and Single File Component (SFC) syntax are supported.

import { createApp, ref } from 'vue';

const app = createApp({
  setup() {
    const count = ref(0);
    return { count };
  },
  template: `<button @click="count++">Count: {{ count }}</button>`
});

How It Works Under the Hood

When you paste code, VibeDrop runs it through a pipeline:

Your code
  │
  ├─ Is it React/Vue? ──→ Rewrite imports, add CDN deps, generate mount
  │
  ├─ Parse HTML ──→ Extract: markup, <style> blocks, <script> blocks, CDN links
  │
  ├─ Scope CSS ──→ Prefix every selector with .vibedrop-{id}
  │                 h2 { }  →  .vibedrop-b3f2a1c0 h2 { }
  │
  ├─ Wrap JS ──→ Scoped IIFE, DOM queries target only your container
  │              document.querySelector('.btn')
  │                → _vdRoot.querySelector('.btn')
  │
  ├─ Blend mode? ──→ Inject theme safety net CSS (fonts, colors, buttons)
  │
  └─ Output: native DOM content, inline on the page

No iframes. Your content is real DOM — indexed by search engines, scrolls naturally, reflows responsively.

Editing Your Code

In the Gutenberg Block

Click the pencil icon in the block toolbar or go to Settings > Code > Edit Code in the sidebar. This opens a full-screen code editor where you can tweak your HTML/CSS/JS.

In the Shortcode Admin

Go to VibeDrop > All Snippets, click your snippet, and edit in the code editor. Click Refresh Preview to see changes before publishing.

FAQ

Does it work with any WordPress theme? Yes. The CSS scoping and JS wrapping work regardless of theme. Blend mode reads from theme.json (block themes) or falls back to customizer settings (classic themes).

Will it slow down my site? VibeDrop adds no external dependencies of its own. It only loads what your vibe-coded feature needs (e.g., Tailwind CDN if your code uses it). The scoping and wrapping happen at render time with minimal overhead.

Can I use multiple VibeDrop blocks on one page? Yes. Each one gets its own scope. External dependencies (like Tailwind CDN) are deduplicated — loaded once no matter how many blocks use them.

What about forms? Do they submit? Yes. Forms inside VibeDrop blocks work normally — they submit to whatever action URL is in your code. Since there's no iframe, form submissions behave exactly as they would on any other page.

Can I use this with Classic Editor? Yes, via the shortcode method. Create snippets in VibeDrop admin and use [vibedrop id="X"] in the Classic Editor.

What about Svelte? Svelte requires a compilation step and can't run directly in the browser. Build your Svelte project first (npm run build), then paste the output HTML from the dist/ folder.

File Structure

vibedrop/
├── vibedrop.php                          # Plugin entry point
├── blocks/vibedrop-block/
│   ├── block.json                        # Block metadata
│   ├── editor.js                         # Block editor UI
│   ├── editor.css                        # Block editor styles
│   └── render.php                        # Frontend render (PHP)
├── includes/
│   ├── class-parser.php                  # HTML parser
│   ├── class-scoper.php                  # CSS scope prefixer
│   ├── class-js-wrapper.php              # JS scope wrapper
│   ├── class-framework-transformer.php   # React/Vue transformer
│   ├── class-theme-dna.php               # Theme scanner + AI prompt generator
│   ├── class-theme-bridge.php            # Theme CSS variables
│   ├── class-post-type.php               # Custom post type (shortcode mode)
│   ├── class-shortcode.php               # Shortcode handler + render engine
│   ├── class-admin.php                   # Snippet admin pages
│   └── class-admin-dna.php              # Theme DNA admin page
└── assets/
    ├── admin.css                         # Snippet editor styles
    ├── admin.js                          # Snippet editor JS
    └── frontend.css                      # Minimal frontend reset

License

GPL v2 or later.