Documentation
v1.0.0
Configuration

Configuration

Customize vibecoding to fit your project needs and workflow preferences.

Basic Configuration

Project Setup
Configure vibecoding for your specific project requirements
vibecode.config.js
export default {
  // Block configuration
  blocks: {
    defaultCategories: ['core', 'technical', 'ui-design'],
    customBlocks: [],
    validation: true
  },
  
  // Editor settings
  editor: {
    autosave: true,
    autosaveInterval: 2000,
    showLineNumbers: true,
    theme: 'default'
  },
  
  // Export options
  export: {
    formats: ['xml', 'json', 'markdown'],
    xmlVersion: '1.0',
    includeMetadata: true
  },
  
  // Template settings
  templates: {
    customPath: './templates',
    autoLoad: true
  }
};

Environment Variables

Development Environment
Configuration for local development
.env.local
# Vibecoding Development Settings
VIBECODE_MODE=development
VIBECODE_DEBUG=true
VIBECODE_AUTO_SAVE=true
VIBECODE_TEMPLATE_PATH=./templates
VIBECODE_EXPORT_PATH=./exports

# Editor Settings  
VIBECODE_EDITOR_THEME=default
VIBECODE_SHOW_DEBUG_INFO=true
VIBECODE_ENABLE_HOT_RELOAD=true

Theming

Custom Theme Configuration
Customize the appearance of your vibecoding editor
theme.config.js
export const theme = {
  colors: {
    primary: {
      50: '#f0f9ff',
      500: '#3b82f6',
      900: '#1e3a8a',
    },
    secondary: {
      50: '#f8fafc',
      500: '#64748b', 
      900: '#0f172a',
    },
    accent: {
      50: '#f5f3ff',
      500: '#8b5cf6',
      900: '#4c1d95',
    }
  },
  
  editor: {
    background: 'hsl(var(--background))',
    foreground: 'hsl(var(--foreground))',
    border: 'hsl(var(--border))',
    blockBackground: 'hsl(var(--card))',
    sidebarBackground: 'hsl(var(--sidebar))'
  },
  
  typography: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      mono: ['JetBrains Mono', 'monospace']
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem', 
      base: '1rem',
      lg: '1.125rem'
    }
  }
};

Advanced Options

Custom Block Types
Define your own block types for specific use cases
Custom Blocks Guide
Performance Tuning
Optimize vibecoding for large-scale applications
Performance Guide

Configuration API

Runtime Configuration
Programmatically configure vibecoding at runtime
app.tsx
import { configureVibecode } from '@vibecode/core';

// Configure at application startup
configureVibecode({
  editor: {
    theme: 'dark',
    autosave: true,
    keybindings: 'vscode' // or 'emacs', 'vim'
  },
  
  blocks: {
    categories: ['core', 'custom'],
    validation: {
      enabled: true,
      strict: false
    }
  },
  
  export: {
    defaultFormat: 'xml',
    compression: true
  },
  
  // Event handlers
  onBlockAdd: (block) => {
    console.log('Block added:', block);
  },
  
  onExport: (data, format) => {
    console.log(`Exported as ${format}:`, data);
  }
});
← Quick StartTemplates →