Complete Documentation

Getting Started

Page Builder is a no-code platform for creating beautiful, accessible one-page websites with professional content templates. Get started in minutes with our intuitive drag-and-drop interface.

Creating Your First Project

1. Sign Up: Create a free account to get started. No credit card required.
2. Choose a Template: Start with one of our pre-built templates or begin from scratch.
3. Add Blocks: Drag blocks from the sidebar onto your canvas or click to add them instantly.
4. Customize: Click the edit button on any block to customize colors, content, and styling.
5. Preview: See your changes in real-time with the live preview panel.
6. Deploy: Export as ZIP or deploy directly to GitHub Pages with one click.

Your project automatically saves as you work, so you can focus on creating without worrying about losing your progress.

Block System (12 Blocks)

All blocks are fully customizable with WCAG AA compliant defaults. Each block can be edited independently, moved around, and styled to match your brand. Simply click on a block in the sidebar to add it to your page, or drag and drop it onto the canvas.

Block Management

Each block can be moved up or down using the arrow buttons, edited using the edit button, or removed using the delete button. The hero section always stays at the top, and the footer always stays at the bottom, while content blocks can be rearranged freely.

Color Customization

Every color in your design can be customized with real-time WCAG AA compliance checking. Our built-in contrast validator ensures your website is accessible to all users while maintaining your brand identity.

How It Works

When editing any block, you'll see color pickers for different elements like backgrounds, text, buttons, and accents. Each color picker includes:

• Visual Color Picker: Click to open a color wheel and select colors visually
• Hex Code Input: Enter exact hex codes for precise brand colors
• Real-time Contrast Checker: See instantly if your color combination meets WCAG AA standards
• Compliance Indicator: Green checkmark means it passes, red warning means adjustment needed

WCAG AA Compliance

All color combinations must meet the WCAG 2.1 Level AA contrast ratio of 4.5:1 for normal text and 3:1 for large text. This ensures your content is readable by users with visual impairments and complies with accessibility standards.

If you try to save a block with insufficient contrast, you'll see a warning message. Adjust your colors using the contrast indicator until you achieve the required ratio. All default colors are pre-configured to pass these standards.

Auto-Save System

Your work is automatically protected with a multi-layer save system that ensures you never lose your progress, even if something unexpected happens.

Instant Browser Storage

Every change you make is immediately saved to your browser's localStorage. This happens instantly and silently in the background - you don't need to do anything. If you accidentally close your browser or navigate away, your work will be automatically restored when you return.

Automatic Cloud Sync

Every 30 seconds, your project is automatically synchronized to the cloud database. This ensures your work is backed up and accessible from any device. The sync happens silently in the background - you'll see a "Saving..." indicator only when you manually click the Save button.

Manual Save

You can also manually save your project at any time by clicking the "Save" button in the sidebar. This provides immediate confirmation that your work has been saved to the cloud and creates a saved project that appears in your project list.

Project Recovery

If you experience any issues or need to access your work from a different device, simply click "Load" in the sidebar. This will restore your most recent saved project from the cloud. The auto-save system ensures you're never more than 30 seconds away from your latest saved version.

Content Templates

Get started quickly with professional content templates designed for different industries and use cases. These templates provide proven copywriting structures that convert visitors into customers.

Available Templates

We offer pre-written content for:

• Hero Sections: Compelling headlines and subheadlines that capture attention
• Feature Descriptions: Clear, benefit-focused descriptions for product features
• Testimonials: Realistic testimonial structures you can customize
• FAQ Content: Common questions and professional answers
• Call-to-Action Text: Action-oriented button text that drives conversions
• Team Bios: Professional bio templates for team members

Using Templates

When editing any text field in a block, you can use the templates as starting points. Simply replace the template text with your own content while maintaining the structure. Templates are designed to be clear, concise, and conversion-focused.

You can also use our pre-built page templates (Startup, Restaurant, Portfolio) which include complete page structures with all blocks pre-configured and ready to customize.

Export & Deployment

Once your page is ready, you have two options for getting it live: export as a ZIP file or deploy directly to GitHub Pages.

Export as ZIP

Download a complete, standalone website package including:

• Fully optimized HTML files
• Complete CSS styling
• All images and assets
• Ready-to-upload website structure

After downloading, you can upload the ZIP contents to any web hosting service. Extract the files and upload them via FTP, cPanel, or your hosting provider's file manager. This gives you complete control over where your site is hosted.

Deploy to GitHub Pages

One-click deployment to free GitHub hosting with automatic setup. This option:

• Creates a new GitHub repository for your project
• Automatically sets up GitHub Pages hosting
• Provides a free URL (yourusername.github.io/projectname)
• Enables automatic updates when you make changes

You'll need to authorize GitHub access when deploying for the first time. Once connected, future deployments are instant. Your site will be live within minutes at a free GitHub Pages URL.

Note: Export limits vary by plan. Check your plan details in the dashboard sidebar to see your remaining exports.

Accessibility

Accessibility is built into every aspect of Page Builder. We believe the web should be accessible to everyone, regardless of their abilities or the devices they use.

WCAG 2.1 Level AA Compliance

All pages created with Page Builder meet WCAG 2.1 Level AA standards, which means:

• Color Contrast: All text meets the 4.5:1 contrast ratio requirement for normal text and 3:1 for large text
• Keyboard Navigation: All interactive elements are accessible via keyboard
• Screen Reader Support: Semantic HTML and ARIA labels ensure screen readers can navigate your content
• Focus Indicators: Clear visual indicators show which element has keyboard focus
• Semantic HTML: Proper heading hierarchy and semantic elements improve comprehension
• Alt Text: All images include descriptive alt text for screen readers

Real-Time Validation

Our built-in contrast checker validates colors in real-time as you design. You cannot save a block with insufficient color contrast, ensuring your site remains accessible throughout the design process.

Legal Compliance

WCAG AA compliance helps ensure your website meets accessibility requirements in many jurisdictions, including compliance with laws like the Americans with Disabilities Act (ADA) in the United States and similar regulations worldwide.

For more information about our accessibility features, visit our Accessibility Statement page.

Troubleshooting

Having issues? Check these common solutions below. If you can't find what you're looking for, please contact our support team.