Back to Help Center

Using the ClipVibe Code Editor

Mastering the built-in editor: Live preview, Safe Mode, and dealing with external imports.

The ClipVibe Code Editor is designed for speed. It's not a full VS Code environment, but a focused "Sandpack" for single-file web apps.

Key Features

1. Auto-Detection

Paste raw code, and we figure it out.

  • HTML: Detected by <!DOCTYPE html> or <html> tags.
  • React: Detected by import React or functional component syntax.

2. Live Preview

The preview pane updates automatically as you type (with a slight debounce).

  • For React: We compile it in-browser using a secure sandbox.
  • For HTML: We inject it into a sandboxed iframe.

3. Safe Mode

To protect you from malicious code, the Editor runs in strict isolation.

  • No Cookies: The preview cannot access your main ClipVibe session cookies.
  • No External Navigation: The preview cannot redirect the main window.

Common Actions

Modifying AI Code

Often, AI gets it 90% right. You can make small tweaks directly here.

  • Change Colors: Find className="bg-blue-500" and change it to bg-red-500.
  • Fix Typos: Edit the text directly in the code.

"Reset" vs "Clear"

  • Clear: Wipes the editor blank.
  • Revert (in Version History): Restores the file to the last saved state on the server.

Troubleshooting

If the preview goes white/blank:

  1. Check the Console (Developer Tools) for syntax errors.
  2. Ensure you aren't using local imports (e.g., import X from './file').
  3. Check if you closed all your tags (</div>).