Documentation
v1.0.0
Setup Guide

Installation

Add vibecoding to your project in multiple ways. Choose the method that works best for your setup.

Installation Methods

NPM Package (Coming Soon)
Install vibecoding as an npm package for the easiest integration
Terminal
npm install @vibecode/core

Framework Support

Next.js
Fully Supported

Works out of the box with Next.js 13+ App Router

Setup Guide
React
Supported

Compatible with React 18+ applications

Setup Guide
Vite
Community

Community-maintained integration guide

Setup Guide

Quick Start

Your First Vibecode Editor
Get a basic editor running in your app
app/editor/page.tsx
"use client";

import { EnhancedEditor } from "@/components/editor/enhanced-editor";

export default function EditorPage() {
  const handleBlocksChange = (blocks: Block[]) => {
    console.log("Blocks updated:", blocks);
  };

  return (
    <div className="min-h-screen bg-background">
      <EnhancedEditor 
        onChange={handleBlocksChange}
      />
    </div>
  );
}

Common Issues

Module not found errors

Make sure all peer dependencies are installed and your TypeScript paths are configured correctly.

View Troubleshooting Guide
Styling issues

Ensure your Tailwind CSS configuration includes the necessary design tokens and the components are included in your content paths.

View Styling Guide
← Getting StartedConfiguration →