Codasapp

Modern web application builder with drag-and-drop interface

Installation • Features • Usage • API Reference • Examples • Contributing

---

📖 About

Codasapp is a powerful, modern web application builder that provides an intuitive drag-and-drop interface for creating responsive web applications. Built with React, TypeScript, and Vite, it offers a seamless development experience with real-time visual editing, component management, and instant HTML export capabilities.

Perfect for rapid prototyping, landing pages, admin dashboards, and complete web applications without writing extensive code.

---

✨ Features

🎨 Visual Builder

• Drag-and-Drop Interface: Intuitive component placement with pixel-perfect positioning
• Real-time Preview: See changes instantly as you build
• Component Library: Pre-built components (Container, Text, Button, Image, Row, Column)
• Smart Grid System: Automatic alignment and spacing helpers

🎯 Advanced Styling

• Multi-State Styling: Base, Hover, Active, and Focus states for each component
• CSS Property Editor: Comprehensive style controls with live preview
• Responsive Design: Mobile-first approach with breakpoint management
• Theme Support: Customizable color schemes and design tokens

⚡ Developer Experience

• TypeScript Support: Full type safety and IntelliSense
• Hot Module Replacement: Instant development feedback
• Component Tree View: Hierarchical component management
• Undo/Redo System: Full history management with keyboard shortcuts

📤 Export & Deployment

• HTML Export: Generate clean, production-ready HTML files
• CSS Optimization: Tailwind CSS utilities with purging
• Asset Management: Automatic image and font optimization
• Multiple Formats: Export as static files or React components

🔧 Integration

• React Ecosystem: Seamless integration with React components
• Plugin System: Extensible architecture for custom components
• API Integration: Easy connection to backend services
• Custom Events: Comprehensive event handling system

---

🚀 Installation

NPM

npm install codasapp

Yarn

yarn add codasapp

PNPM

pnpm add codasapp

---

📚 Usage

Basic Setup

import React from 'react';
import { BuilderProvider, CanvasArea, SidebarLeft, InspectorPanel } from 'codasapp';
import 'codasapp/dist/style.css';

function App() {
  return (
    <BuilderProvider>
      <div className="flex h-screen">
        <SidebarLeft />
        <CanvasArea />
        <InspectorPanel />
      </div>
    </BuilderProvider>
  );
}

export default App;

Advanced Configuration

import React from 'react';
import { 
  BuilderProvider, 
  CanvasArea, 
  SidebarLeft, 
  InspectorPanel,
  Toolbar 
} from 'codasapp';
import 'codasapp/dist/style.css';

function App() {
  return (
    <BuilderProvider>
      <div className="flex flex-col h-screen">
        <Toolbar />
        <div className="flex flex-1">
          <SidebarLeft />
          <CanvasArea />
          <InspectorPanel />
        </div>
      </div>
    </BuilderProvider>
  );
}

export default App;

Custom Components

import React from 'react';
import { useBuilder } from 'codasapp';

const CustomButton = ({ id, ...props }) => {
  const { updateComponent, selectComponent } = useBuilder();
  
  const handleClick = () => {
    selectComponent(id);
  };
  
  const handleChange = (newProps) => {
    updateComponent(id, newProps);
  };
  
  return (
    <button 
      onClick={handleClick}
      onChange={handleChange}
      className="custom-button"
      {...props}
    >
      Custom Button
    </button>
  );
};

export default CustomButton;

---

🔧 API Reference

BuilderProvider

The main context provider that manages the builder state.

interface BuilderProviderProps {
  children: React.ReactNode;
  initialComponents?: ComponentData[];
  theme?: ThemeConfig;
}

useBuilder Hook

Access the builder state and actions.

const {
  components,
  selectedId,
  selectedIds,
  activeStyleState,
  addComponent,
  updateComponent,
  updateComponentStyle,
  selectComponent,
  deleteSelectedComponents,
  undo,
  redo,
  canUndo,
  canRedo
} = useBuilder();

Component Types

type ComponentType = 'container' | 'text' | 'button' | 'image' | 'row' | 'column';

interface ComponentData {
  id: string;
  type: ComponentType;
  props: ComponentProps;
  children: ComponentData[];
  parentId?: string | null;
  stateStyles: StateStyles;
}

Style States

type StyleState = 'base' | 'hover' | 'active' | 'focus';

interface StateStyles {
  base: ComponentStyle;
  hover: ComponentStyle;
  active: ComponentStyle;
  focus: ComponentStyle;
}

---

🎯 Examples

Landing Page Builder

import React from 'react';
import { BuilderProvider, CanvasArea } from 'codasapp';

function LandingPageBuilder() {
  return (
    <BuilderProvider>
      <CanvasArea 
        config={{
          width: 1200,
          height: 800,
          backgroundColor: '#ffffff',
          gridEnabled: true
        }}
      />
    </BuilderProvider>
  );
}

Dashboard Builder

import React from 'react';
import { 
  BuilderProvider, 
  CanvasArea, 
  SidebarLeft, 
  InspectorPanel 
} from 'codasapp';

function DashboardBuilder() {
  return (
    <BuilderProvider>
      <div className="flex h-screen bg-gray-100">
        <SidebarLeft />
        <CanvasArea />
        <InspectorPanel />
      </div>
    </BuilderProvider>
  );
}

Form Builder

import React from 'react';
import { BuilderProvider, CanvasArea } from 'codasapp';

function FormBuilder() {
  return (
    <BuilderProvider
      config={{
        allowedComponents: ['text', 'button', 'container'],
        maxDepth: 3,
        validation: true
      }}
    >
      <CanvasArea />
    </BuilderProvider>
  );
}

---

🎨 Theming

Codasapp supports extensive theming capabilities:

Default Theme

:root {
  --primary-color: #7c3aed;
  --secondary-color: #38bdf8;
  --background-color: #0f1115;
  --surface-color: #161920;
  --text-color: #f3f4f6;
  --border-color: #2d323e;
}

Custom Theme

import React from 'react';
import { BuilderProvider } from 'codasapp';

const customTheme = {
  colors: {
    primary: '#ff6b6b',
    secondary: '#4ecdc4',
    background: '#1a1a2e',
    surface: '#16213e',
    text: '#ffffff',
    border: '#0f3460'
  },
  typography: {
    fontFamily: 'Inter, sans-serif',
    fontSize: '14px',
    lineHeight: '1.5'
  },
  spacing: {
    unit: '8px',
    scale: [0, 4, 8, 16, 24, 32, 48, 64]
  }
};

function ThemedApp() {
  return (
    <BuilderProvider theme={customTheme}>
      <CanvasArea />
    </BuilderProvider>
  );
}

---

🔌 Plugin System

Create custom components and plugins:

import React from 'react';
import { registerComponent } from 'codasapp';

const CustomChart = ({ data, type, ...props }) => {
  return (
    <div className="custom-chart" {...props}>
      {/* Chart implementation */}
    </div>
  );
};

// Register the component
registerComponent('custom-chart', {
  component: CustomChart,
  defaultProps: {
    data: [],
    type: 'line',
    width: 400,
    height: 300
  },
  category: 'Charts',
  icon: 'chart-line'
});

---

📦 Build & Deployment

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run linting
npm run lint

# Type checking
npm run type-check

Production Build

# Build for production
npm run build

# Preview production build
npm run preview

# Build library
npm run build:lib

Deployment

# Export static files
npm run export

# Deploy to GitHub Pages
npm run deploy:gh-pages

# Deploy to Netlify
npm run deploy:netlify

---

🧪 Testing

# Run unit tests
npm test

# Run integration tests
npm run test:integration

# Run E2E tests
npm run test:e2e

# Generate coverage report
npm run test:coverage

---

📊 Performance

• Bundle Size: Optimized for < 100KB gzipped
• Tree Shaking: Full support for unused code elimination
• Lazy Loading: Components loaded on-demand
• Virtual Scrolling: Efficient handling of large component trees
• Memory Management: Automatic cleanup and garbage collection

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

# Fork the repository
git clone https://github.com/your-username/codasapp.git

# Install dependencies
npm install

# Create a feature branch
git checkout -b feature/amazing-feature

# Make your changes
git commit -m 'Add amazing feature'

# Push to the branch
git push origin feature/amazing-feature

# Open a Pull Request

Code Style

• Use TypeScript for all new code
• Follow ESLint configuration
• Write tests for new features
• Update documentation as needed

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• React - UI framework
• Vite - Build tool
• Tailwind CSS - CSS framework
• DnD Kit - Drag and drop library
• Lucide React - Icon library ``

---

Prepared by Alperen Çölgeçen