Supported Frameworks & Code Limitations

ClipVibe runs your code directly in the browser. This means we have specific requirements for how your code is structured.

1. The "Single File" Rule

Your app must be contained in one single file.

• HTML Apps: All CSS (<style>) and JS (<script>) must be inside the .html file.
• React Apps: The component logic must be in one file.

2. Supported Languages

✅ HTML / JS / CSS

Standard web files work perfectly. You can include external libraries via CDN script tags (e.g., jQuery, p5.js, Three.js).

✅ React (Functional Components)

We support modern React functional components.

• Automatic Wrapper: You don't need ReactDOM.render(). Just export default function App().
• JSX: Fully supported.
• Hooks: useState, useEffect, etc., are available globally.

3. The "No Import" Limit

Because there is no "build step" (like Webpack) running on our server, you cannot use standard npm imports.

❌ Doesn't Work:

import { Button } from "@/components/ui/button" // No local files
import { motion } from "framer-motion" // No node_modules

✅ Works:

• Isolate Logic: Copy the Button component code into your main file.
• Use CDNs: For libraries like Framer Motion, ask AI to "Load Framer Motion from CDN" and use the global window.Motion object.
• Tailwind: We automatically inject Tailwind via CDN, so all utility classes work instantly.

Summary

If it runs in a CodePen or JSFiddle, it runs in ClipVibe. If it requires npm run build, you need to ask AI to "Convert this to a single-file version."