Documentation
v1.0.0
Implementation Example
✨

Basic Setup Example

Complete implementation of a minimal vibecoding editor

ReactTypeScriptTailwind CSSZustand

Overview

Live Demo
See the example in action
Open Demo
Source Code
Download or clone the example
View on GitHub

What's Included

✨ Core Features

  • • Drag-and-drop block editor
  • • 8 essential block types
  • • Real-time XML generation
  • • Block validation

🎨 UI Components

  • • Clean, modern interface
  • • Responsive design
  • • Dark mode support
  • • Keyboard shortcuts

⚡ Performance

  • • Optimized re-renders
  • • Efficient state updates
  • • Fast XML serialization
  • • Minimal bundle size

🛠 Developer Experience

  • • Full TypeScript support
  • • Extensible architecture
  • • Comprehensive docs
  • • Easy customization

Implementation

Main Application
The entry point that sets up the editor
src/App.tsx
import React from 'react';
import { VibeEditor } from './components/VibeEditor';
import { ThemeProvider } from './contexts/ThemeContext';
import './styles/globals.css';

function App() {
  return (
    <ThemeProvider>
      <div className="min-h-screen bg-background">
        <header className="border-b">
          <div className="container py-4">
            <h1 className="text-2xl font-bold">Vibecoding Basic Example</h1>
            <p className="text-muted-foreground">
              A minimal implementation of the vibecoding editor
            </p>
          </div>
        </header>
        
        <main className="container py-6">
          <VibeEditor />
        </main>
      </div>
    </ThemeProvider>
  );
}

export default App;

Quick Start

1. Clone and Install
Terminal
git clone https://github.com/vibecode-sh/examples.git
cd examples/basic
npm install
npm start
2. Explore the Code

• src/components/ - React components

• src/store/ - Zustand state management

• src/types/ - TypeScript definitions

• src/utils/ - Helper functions and XML converter

3. Customize

• Add new block types in types/blocks.ts

• Customize colors in styles/globals.css

• Extend the store in store/editorStore.ts

• Modify the UI layout in components/VibeEditor.tsx

ExamplesFull Editor Example