Visual Page Builder
Create stunning websites with drag-and-drop functionality and AI assistance
Building Made Simple
WavyKits features a powerful visual page builder that lets you create stunning websites without writing code. Start with a blank canvas and either drag and drop widgets/components or use AI to generate your design. Customize everything in real-time, and export clean, production-ready code built with modern web technologies.
Drag & Drop
Intuitive drag and drop interface for building layouts
AI Powered
Generate components with AI by describing what you need
Real-time Customization
Live preview with instant styling and layout changes
Page Building Workflow
Choose Method
Start with drag & drop, components, or AI generation
Build Layout
Design your page structure with visual tools
Customize Style
Fine-tune colors, fonts, spacing, and animations
Export Code
Download clean, production-ready code
Getting Started with Page Builder
Follow these quick steps to create your first website with the visual page builder:
Open Page Builder
Start with a blank canvas or choose from our template library to begin building.
Add Elements
Drag components from the sidebar or use AI to generate sections based on your description.
Customize Design
Use the property panel to adjust colors, fonts, spacing, and responsive behavior.
Export & Deploy
Export your project and deploy to your hosting platform.
Drag & Drop Interface
The drag and drop interface makes building websites intuitive and fast. Simply select components from the sidebar and drag them onto your canvas.
How to Drag & Drop
Browse the component library in the left sidebar
Click and hold on any component you want to add
Drag the component to your desired position on the canvas
Drop it when you see the blue drop zone indicator
Pro Tips
Use the visual drop indicators to position elements precisely
Drag components between different containers to reorganize
Hold Shift while dragging to duplicate components
Use the outline panel for precise element selection
Component Customization
Every component can be fully customized using the property panel. Select any element to access its styling and content options.
Content
- • Edit text and headings
- • Change images and media
- • Update links and buttons
- • Modify form fields
Styling
- • Colors and backgrounds
- • Typography and fonts
- • Spacing and margins
- • Borders and shadows
Layout
- • Responsive breakpoints
- • Flexbox and grid settings
- • Position and alignment
- • Size and dimensions
How to Customize Components:
1. Select Element: Click on any component in the canvas
2. Property Panel: Use the right sidebar to edit properties
3. Live Preview: See changes instantly in the canvas
4. Responsive: Adjust settings for different screen sizes
Containers, Grids & Tables
Structure your content with containers, grids, and tables. These layout elements help organize your design and create responsive layouts.
Containers
Flexible containers for grouping elements with customizable spacing and alignment.
Quick Add: Click "Add Container" then click widgets to populate it - no dragging needed!
Grid Layout
Responsive grid systems with customizable columns and gap spacing.
Quick Add: Add grid, then simply click components to fill grid cells automatically!
Data Tables
Interactive tables with sorting, filtering, and responsive features.
Quick Add: Create table structure, then click to add rows and columns instantly!
Smart Layout Features
No-Drag Adding
When you have a container, grid, or table selected, simply click on any widget or element in the sidebar to add it directly - no dragging required!
Auto Organization
Elements automatically organize themselves within the layout structure, maintaining proper spacing and alignment across all screen sizes.
AI-Powered Component Generation
Describe what you want and let AI create the perfect component for you. Our intelligent system understands your requirements and generates tailored components instantly.
How AI Generation Works
Simply describe your component in natural language, and our AI will create it for you with appropriate styling, content, and functionality.
Example Prompts:
AI Features
Smart Content Generation
AI creates relevant content, placeholder text, and appropriate styling
Responsive Design
Components are automatically optimized for all screen sizes
Best Practices
AI follows design best practices and accessibility standards
Using AI Generation
Click the "AI Generate" button in the component sidebar
Describe your component in the text field
AI generates the component and adds it to your canvas
Customize further using the property panel if needed
Saving & Exporting Projects
Save your projects and export clean, production-ready code. Your work is automatically saved as you build, and you can export your completed projects at any time.
Auto-Save Features
Changes saved automatically every 30 seconds
Manual save with Ctrl+S shortcut
Version history and backup copies
Cloud sync across devices
Export Features
Clean, semantic HTML markup
Modern CSS with Tailwind classes
Interactive JavaScript functionality
Fully responsive design
Production-ready optimization
Export Process
Complete Design
Finish your page design and customization
Save Project
Click save or use Ctrl+S to save your work
Export Project
Click the export button to generate your code
Download Code
Get clean, production-ready code files