Templatable - Advanced Website Builder & Design System

🎨 Transform your ideas into stunning websites with multiple design styles and comprehensive customization

🚀 What is Templatable?

Templatable is a powerful, no-code website builder that combines the flexibility of a design system with the ease of visual customization. Create professional websites across multiple industries with 9 distinct design styles, comprehensive theming, and real-time customization.

✨ Key Features

🎭 Multiple Design Styles: 9 unique themes from Minimal to Brutalist to Industry-specific designs
🎨 Advanced Theming: Complete color system, typography control, and visual customization
📱 Responsive Design: Mobile-first approach with perfect cross-device compatibility
🧩 Modular Architecture: Mix and match sections with drag-and-drop functionality
⚡ Real-time Preview: See changes instantly as you customize
📊 Component Library: Pre-built, themed components with code examples
🎯 Production Mode: Clean, client-ready interface toggle
💾 Configuration Export/Import: Save and share your designs

🎨 Design Styles & Themes

Essential Styles (Universal themes that adapt to your colors)

⚪ Minimal - Clean, whitespace-driven design with subtle elements
⬛ Brutalist - Raw, bold design with concrete textures and harsh contrasts
🔮 Glassmorphism - Frosted glass effects with blurred backgrounds

Industry-Specific Themes (Specialized designs with preset colors)

🎨 Creative - Vibrant, artistic design for creative agencies
☕ Hospitality - Warm, inviting design for restaurants and cafes
🛍️ Retail - Product-focused design optimized for e-commerce
🏥 Healthcare - Clean, trustworthy design for medical practices

🏗️ Project Architecture

Core Technologies

React 18 + TypeScript + Vite
├── 🎨 Styling: Tailwind CSS + CSS Variables
├── 🧩 Components: Radix UI + Custom Themed Components
├── 🎭 Animations: Framer Motion
├── 🎨 Icons: Lucide React + Heroicons
├── 📊 Charts: Recharts
└── 🎯 Forms: React Hook Form + Zod

Project Structure

src/
├── components/
│   ├── sections/           # Design-specific section implementations
│   │   ├── minimal/        # Minimal style components
│   │   ├── brutalist/      # Brutalist style components
│   │   ├── creative/       # Creative style components
│   │   ├── healthcare/     # Healthcare style components
│   │   └── [8 more styles]/
│   ├── settings/           # Customization panels
│   └── ui/                # Base + Themed UI components
├── contexts/              # React contexts for state management
├── hooks/                # Custom React hooks
├── utils/                # Utility functions and configurations
└── data/                 # Font definitions and static data

🛠️ Getting Started

Prerequisites

Node.js 18+ and npm/yarn/bun
Modern browser with ES2022 support

Installation

# Clone the repository
git clone
cd templatable

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Development Commands

npm run dev          # Start development server
npm run build        # Production build
npm run build:dev    # Development build
npm run preview      # Preview production build
npm run lint         # Run ESLint

🎯 Usage Guide

For Developers

1. Adding New Design Styles

// 1. Add to ComponentStyleContext.tsx
export type ComponentStyle = 'minimal' | 'brutalist' | 'your-new-style';

// 2. Create section components
src/components/sections/your-new-style/
├── HeroYourNewStyle.tsx
├── AboutYourNewStyle.tsx
└── [other sections]

// 3. Update dynamic components
const HERO_COMPONENTS = {
  minimal: HeroMinimal,
  brutalist: HeroBrutalist,
  'your-new-style': HeroYourNewStyle,
};

2. Creating Custom Themed Components

import { ThemedButton, ThemedCard } from '@/components/ui/theme';

export const CustomComponent = () => (

      Automatically themed button

);

3. Using the Color System

import { useColor } from '@/contexts/ColorContext';

const { primaryColor, secondaryColor, accentColor } = useColor();

// Colors are in HSL format: "220 50% 60%"
const customStyle = {
  backgroundColor: `hsl(${primaryColor})`,
  color: `hsl(${secondaryColor})`
};

For Designers/Content Creators

Customization Workflow

Choose a Style - Select from Essential or Industry-specific themes
Customize Colors - Adjust primary, secondary, and accent colors
Set Typography - Choose from 50+ Google Fonts with live preview
Configure Layout - Enable/disable sections and reorder them
Preview & Export - Test across devices and export configuration

Section Management

Hero: Main banner with headlines and CTAs
About: Company story and mission
Services: Product/service offerings
Portfolio: Work examples and case studies
Team: Staff profiles and expertise
Testimonials: Customer reviews and social proof
FAQ: Common questions and answers
Map: Location and contact information
Contact: Forms and contact details

🔧 Advanced Configuration

Customization Files

src/utils/componentStyles.ts - Component styling configurations
src/data/fonts.json - Available Google Fonts
tailwind.config.ts - Tailwind customizations
src/index.css - Global styles and CSS variables

Production Optimization

// Enable production mode to hide settings panel
const { isProductionMode, toggleProductionMode } = useProductionMode();

// Export/import configurations for client delivery
const { handleExport, handleImport } = useSettings();

🧩 Component Library

Each design style includes a complete component library with:

Buttons - Primary, secondary, outline, ghost variants
Cards - Content containers with consistent styling
Forms - Inputs, textareas, selects with validation
Navigation - Headers, menus, breadcrumbs
Data Display - Stats, progress bars, badges
Feedback - Alerts, toasts, loading states

Example Usage

import {
  ThemedButton,
  ThemedCard,
  ThemedInput
} from '@/components/ui/theme';

  Subscribe

🎨 Theming System

Color Architecture

:root {
  /* Dynamic colors that change based on user selection */
  --primary: 220 50% 60%;
  --secondary: 210 20% 95%;
  --accent: 350 80% 55%;

  /* Semantic colors */
  --background: var(--secondary);
  --foreground: 210 20% 15%;
  --muted: 210 20% 85%;
  --border: 210 20% 80%;
}

Typography System

Heading Font: For titles and headers
Body Font: For main content
Accent Font: For special elements
Font Loading: Automatic Google Fonts integration

📱 Responsive Design

Built with mobile-first principles:

Breakpoints: sm: 640px, md: 768px, lg: 1024px, xl: 1280px
Flexible Layouts: CSS Grid and Flexbox
Adaptive Components: Components that adjust to screen size
Touch Optimization: Mobile-friendly interactions

🚀 Deployment

Static Hosting (Recommended)

npm run build
# Deploy `dist/` folder to:
# - Vercel, Netlify, GitHub Pages
# - AWS S3, CloudFlare Pages
# - Any static hosting service

Docker Deployment

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

🤝 Contributing

Development Guidelines

Follow Patterns - Maintain consistency with existing code
TypeScript First - All new code should be typed
Component Architecture - Use the themed component system
Responsive Design - Test across all breakpoints
Performance - Optimize for loading speed and runtime efficiency

Adding New Features

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes following the established patterns
Test across multiple design styles
Submit a pull request with detailed description

📚 Technical Details

Performance Optimizations

Code Splitting - Automatic route-based splitting
Tree Shaking - Remove unused code from build
Image Optimization - Responsive images with lazy loading
CSS Optimization - Tailwind purging and minification

Browser Support

Modern Browsers - Chrome 88+, Firefox 85+, Safari 14+, Edge 88+
Mobile Browsers - iOS Safari 14+, Chrome Mobile 88+
Features - ES2022, CSS Grid, CSS Custom Properties

Bundle Size

Initial Load - ~150KB gzipped
Lazy Loaded - Sections loaded on demand
Dependencies - Optimized for production builds

🙏 Acknowledgments

Built with these amazing technologies:

React - UI Framework
Tailwind CSS - Styling
Radix UI - Unstyled components
Framer Motion - Animations
Vite - Build tool

Name		Name	Last commit message	Last commit date
.agents/skills/frontend-design		.agents/skills/frontend-design
public		public
src		src
.gitignore		.gitignore
AI_RULES.md		AI_RULES.md
README.md		README.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
warp.md		warp.md

Latest commit

History

Folders and files

Repository files navigation