Skip to main content

​
Project Setup

Initialize and configure your new website project
Getting Started: Begin your website building journey with these simple steps:
  1. Sign in to your Readdy dashboard
  2. Click “Create New Project” button
  3. Enter your project name.
We recommend using the default React Next.js project type for the best results.
This is your first step to building a website with Readdy’s AI-powered platform.

​
Content Generation

Create your website content using AI-powered tools
Create your website using detailed natural language descriptions.When to use: Perfect for starting from scratch when you have a clear idea of what you want but no visual references.How to prompt effectively:
  • Be specific about your industry and target audience
  • Include style preferences, colors, and layout requirements
  • Mention required sections and functionality
Example prompts:
  • “Create a modern law firm website with services, about us, and contact pages”
  • “Build a creative portfolio for a graphic designer with project galleries”
  • “Design a SaaS landing page for a project management tool”
The more detailed your description, the better Readdy can understand and create your vision.
Start with professional pre-designed templates for faster development.When to use: When you want to save time and start with a proven design structure that you can customize.Template Process:
  1. Browse available templates in your project type
  2. Select one that matches your vision
  3. Customize the template according to your specific needs
Templates provide a solid foundation that you can customize to match your brand and requirements.
Upload visual inspiration to guide your website design.When to use: When you have screenshots, designs, or layouts that capture the style you want for your website.Image Reference Process:
  1. Upload reference images (websites, designs, layouts you like)
  2. Describe what you like about each image
  3. Specify adaptations you want for your project
  4. Readdy creates a design inspired by your references
Works great for capturing specific visual styles, color schemes, or layout ideas from existing designs.
Use existing websites as inspiration for functionality and design.When to use: When you find a website with the exact functionality, layout, or style you want to recreate.Website Reference Process:
  1. Submit website URLs you want to use as inspiration
  2. Explain specific elements you want to incorporate
  3. Describe your unique requirements and differences
  4. Get a design that captures the essence while being uniquely yours
Perfect for replicating proven website structures and user experiences in your own brand style.
Describe your ideal website design in detail without visual references.When to use: When you have a clear vision in mind but no reference materials to share.Description Categories:
  • Layout preferences: Header styles, navigation types, footer designs
  • Color schemes: Primary and secondary colors, mood preferences
  • Typography: Font styles, formal vs. casual tone
  • Imagery: Photo styles, illustration preferences
This method works well when you have a clear vision but no reference materials.📖 Learn More: Visual Style Guide for specific style descriptions and examples

​
Page Editing

Customize and refine your website design to match your exact vision
Modify any element on your website using Readdy’s Selector Mode system.When to use: After generating your initial website content, use these tools to fine-tune specific elements like text, images, and layouts.Text Editing Features: Click text elements and edit content directly.Most basic text changes don’t consume creditsImage Editing Features:
  • Image Replacement: Upload new images to replace existing ones (free)
  • Background Removal: Remove image backgrounds for transparent effects (10 credits)
  • AI Background Generation: Create new backgrounds using AI prompts (50 credits)
You can also select an element first, then send commands like “make the selected text larger” or “change this button color to blue” for more precise control.
📖 Learn More: Edit Tool documentation
Enhance your website with professional visual effects and interactions.When to use: After completing your basic design, add effects to make your website more engaging and interactive.Available Effects:
  • Animations: Smooth transitions and movements
  • Interactive Elements: Hover effects and click animations
  • Video Backgrounds: Transform static images into dynamic videos (150 credits)
  • Visual Enhancements: Shadows, gradients, and modern effects
Implementation Methods:
  • Use Selector Mode to select elements, then describe desired effects
  • Send natural language commands: “add hover animation to this button”
  • For complex animations, plan in chat mode before implementation
Start with subtle effects and build up. Too many animations can overwhelm users and slow down your website.
📖 Learn More: Video Generation | Micro-interactions
Expand your website with additional pages and comprehensive navigation.When to use: After creating your homepage, add additional pages like About, Services, Contact, or Blog pages to build a complete website.Page Generation Methods:
  • AI Conversation: Describe new page requirements through chat
  • Click-to-Generate: Click links targeting non-existent pages and describe requirements
  • 404 Recovery: Use chat to describe missing page content when encountering 404 errors
Multi-page generation helps you build comprehensive websites systematically for better organization and user experience.📖 Learn More: Multiple Pages documentation
Manage your project versions and recover from unwanted changes.When to use: When you need to undo problematic changes or revert to a previous working version of your website.Version Management:
  • Delete problematic versions through the right-side chat panel
  • Only the last conversation can be deleted at a time
  • System automatically reverts to the previous working version
  • Multiple versions must be deleted one by one
Version deletion cannot be undone. Confirm the version is truly problematic before deleting.

​
Backend Features

Transform your static website into a dynamic application with backend functionality
Capture user input and build your first interactive feature.When to use: After creating your basic website pages, add forms to collect user information like contact details, feedback.Quick Setup:
  1. Click any form element in Selector mode or use the form submission button
  2. Configure data storage - create new forms or use existing ones
  3. Test form submissions in preview and view collected data
What you get: Organized data collection, Excel export capabilities, and email notifications for new submissions.📖 Learn More: Setup Guide | Storage Configuration
Add a powerful backend database to store and manage your application data.When to use: When your project needs user accounts, dynamic content, or data that changes over time (like user profiles, posts, or inventory).What is Supabase: A complete backend platform providing database, authentication, file storage, and custom functions - all with a generous free tier.Connection Process:
  1. Click Supabase integration in top navigation or when prompted by AI
  2. Sign in to Supabase (or create free account) and authorize Readdy
  3. Select or create a Supabase project for your website
Integration Benefits: Real-time data sync, automatic API generation, and enterprise-grade infrastructure without coding.📖 Learn More: Authorization Process | Building with Supabase
Enable user accounts and personalized experiences.When to use: When you want users to create accounts, save preferences, or access protected content (member areas, user dashboards, personalized content).Available Methods:
  • Email/password registration and login
  • Social logins (Google, Twitter, Apple)
Simple Implementation: Just describe what you need:
Add login and registration functionality using Supabase authentication system
Results: Automatic generation of login/registration pages, user management, and protected page access.Essential for community sites, membership platforms, or any personalized user experience.📖 Learn More: Email/Password Auth | Third-Party Login
Store and manage dynamic content and user data.When to use: After adding authentication, or when you need to save and display changing information (user posts, product catalogs, dynamic content).What you can build:
  • User profiles and settings
  • Content management (blogs, portfolios)
  • Product catalogs with categories
  • Comment systems and user interactions
How it works: Describe your data needs in conversation, and Readdy automatically creates database tables, relationships, and secure access policies.Example requests:
Create a user profile page where users can edit their information
All database operations include automatic security policies. Review these in Supabase before launching your website.
Perfect for content-driven websites and applications requiring structured data storage.📖 Learn More: Database Operations
Add custom backend logic and external service integrations.When to use: When you need server-side processing, AI integrations, email sending, or complex business logic that can’t run in the browser.Common Applications:
  • AI chatbots and content generation
  • Email notifications and messaging
  • Data processing and calculations
  • Third-party API integrations
Implementation: Describe your backend needs, and Readdy creates and deploys serverless functions automatically.Example requests:
Add an AI chatbot that answers questions about my products
Store API keys securely in Supabase Edge Functions > Secrets. Never share sensitive keys in conversations.
Ideal for adding advanced functionality that requires server-side processing.📖 Learn More: Edge Functions
Handle user uploads and media management.When to use: When users need to upload files like profile pictures, documents, portfolios, or when your site requires image galleries.Storage Features:
  • 1GB free storage through Supabase
  • Support for images, documents, and videos
  • Automatic image optimization and resizing
  • Secure file access controls
Implementation: Request file upload functionality through conversation:
Add user avatar upload with automatic image resizing
Perfect for user-generated content, portfolios, and document sharing features.📖 Learn More: File Storage

​
Launch Website

Publish your completed website and optimize it for the world to discover
Make your website accessible to everyone on the internet.When to use: After completing your website design, adding all necessary functionality, and testing everything works properly.Pre-launch Preparation:
  • Ensure all pages have unique, descriptive names
  • Test all forms, links, and interactive features
  • Review content for accuracy and completeness
  • Check mobile responsiveness across different devices
Publishing Process:
  1. Click the Publish button in your project’s top navigation
  2. Enter your custom domain name (must be purchased separately)
  3. Configure DNS records with your domain provider
  4. Wait for DNS propagation and go live
Domain Requirements: You’ll need to purchase a domain from providers like GoDaddy, Namecheap, or Cloudflare. Each domain can only be connected to one website.What happens next: Your website becomes accessible worldwide at your custom domain, with automatic SSL certificates and global CDN distribution.📖 Learn More: Domain Binding | DNS Configuration
Optimize your website for search engines and social media sharing.When to use: Before or immediately after publishing to ensure your website appears professionally in search results and social media shares.Essential SEO Elements:
  • Website Title: The main title shown in browser tabs and search results
  • Meta Description: Brief summary that appears under your title in search results (150-160 characters)
  • Favicon: Small icon displayed in browser tabs for brand recognition
Quick Configuration: Use the template approach by describing your needs:
1. Use the attached image as the website icon
2. Replace the website title and description with:
<Title>Your website title</Title>
<MetaDescription>Your website Description</MetaDescription>
Only replace the specified content accordingly.
📖 Learn More: SEO Configuration

🎉 Congratulations! You’ve just learned how to build a complete website from start to finish. We’re here to support your creative journey every step of the way! 🌟
⌘I