Live AI Website Builder

Real-time AI Programming & Editing with Professional Design & Advanced Features

Start Building Live Preview
background-color: #4f46e5; color: #fff !important; border: none; cursor: pointer; } .btn-tab:hover { background-color: #4338ca; } /* Form fields in sidebar: donkere achtergrond, witte tekst (onafhankelijk van Tailwind opacity) */ .input-dark { background-color: rgba(30, 41, 59, 0.9); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 0.5rem; color: #fff !important; } .input-dark::placeholder { color: rgba(255, 255, 255, 0.6); } .input-dark option { background: #1e293b; color: #fff; } .code-editor { font-family: 'Fira Code', 'Courier New', monospace; background: #1e1e1e; color: #d4d4d4; } .preview-frame { background: white; border: 2px solid #e5e7eb; border-radius: 8px; } .ai-typing { animation: typing 1.5s steps(40, end); } @keyframes typing { from { width: 0 } to { width: 100% } } .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .live-indicator { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } /* Live Preview – hoog en breed, heel beeld zoals ai-visuals */ .live-preview-tall { min-height: calc(100vh - 16rem); height: calc(100vh - 16rem); } .live-preview-tall iframe { min-height: calc(100vh - 17rem); } /* Enhanced transitions for sidebar */ #sidebar { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Tab transitions */ .tab-content { transition: opacity 0.2s ease-in-out; } /* Mobile responsiveness */ @media (max-width: 1024px) { #sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 50; transform: translateX(-100%); } #sidebar.visible { transform: translateX(0); } }

Live AI Website Builder

Real-time AI programming & editing

AI Live
Viewport:

AI Activity