Offline Site Builder Pro Responsive v4

Initializing Builder...

Templates

Choose a categorized visual starter. Each card loads a full editable template with matching sections and images.

Starter Collection 8

Home & Trade Services 7

Local Business & Lifestyle 7

Professional & Community 6

Theme Suggestions

Press the button to generate 3 fresh color theme ideas, then click one palette to apply it to the current page.

Layout Suggestions

Generate structural layout ideas (Single Column, Split Screen, Card, Magazine, F-Shape, Z-Shape), then click one to apply it to this page.

Need app-focused structure? Use mobile-only suggestions below.

Quick Insert

Pages

Site Pages

Page Title

Page Slug

SEO Title

Meta Description

Switch pages here to edit them in the same canvas. Drag pages by the handle to reorder them. The Home page stays pinned first.

Checks

Responsive and accessibility checks scan your current page HTML and report common problems.

Platform

Choose your target platform. Sets layout tokens and nav style for the mobile template.

Device Shell

Choose the preview hardware frame. Android defaults to Pixel styling, iOS defaults to iPhone styling.

iOS Navigation Style

Choose a bottom tab bar variant inspired by iOS HIG. Click to apply to the mobile template.

Theme Colors

Customize platform colors. Applied live to the mobile template in the canvas.

Android Seed iOS Tint iOS Accent

Menu Text Size

Set the tab/menu item text size for each mobile platform.

Theme Suggestions

Generate fresh mobile-friendly color palettes here too.

Mobile App Starter

Load the phone-first app shell. Mobile preview will always use the phone frame.

Mobile Layout Patterns

Generate structural patterns optimized for phone-first pages.

Export Settings

Export Mode

Theme Slug

Theme Label

Pages

Site Name

Brand Color

App Icon / Favicon

Make one icon here and use it for the browser favicon, Android desktop/home-screen icon, and iPhone/iPad Home Screen icon.

Favicon URL

Use generated icon for favicon and PWA icons

Load Icon From File

AI Icon Prompt

AI Service

Model

DALL-E 3 and diffusion models can return protected image URLs. The included ai-image-proxy.php imports those images server-side so they can be saved as favicon and PWA icons.

Describe the icon you want. Online generation needs internet access.

Icon Text / Initials

Icon Background

Icon Text Color

Icon

Export creates favicon.png, icons/pwa-icon-192.png, icons/pwa-icon-512.png, icons/maskable-icon-512.png, and icons/apple-touch-icon.png.

Social Share Image

Export Output

Progressive Web App

Adds Android/iOS install support with a manifest, service worker, app icons, and mobile home-screen tags. Upload/extract the ZIP contents to HTTPS, then open the exported index.html URL — do not link directly to the ZIP file.

Phone test: Your phone must open https://your-site/folder/index.html. If it opens/downloads .zip, Android will only extract files and cannot install the PWA.

Include PWA files in normal ZIP export

PWA Export Size Mode

Compact is the default. Use Full only when you need the full iPhone/iPad startup image pack.

PWA App Name

PWA Short Name

Display Mode

Orientation

Splash Background

Start Page

iOS Status Bar

PWA Setup Check

Checks the current canvas and generated export package for the install assistant, manifest, service worker, install check page, and required icons before publishing.

Run the PWA setup check before exporting or publishing.

One page per line: slug|Title. These entries now define the real editable page list used by the page switcher, project save/load, ZIP export, and WordPress export.

No logic target selectedAutosaves while editing

🚀 FTP / SFTP Publish

SFTP is recommended. Use Test Connection first, then Upload Export. Upload includes contact.php for Blockly form emails.

Connection

Publish Endpoint

Protocol

Host

Port

Username

Password

Remote Folder (optional)

Live Test URL (optional)

Publish Token

Create rollback backup before upload Delete files missing from new export

Actions

Use Settings JSON to move publish/export settings to another computer. Keep this file private because it can include your FTP password and publish token.

Ready 0% Saved with current project

Publish settings are saved with the current project. For FTP accounts locked to the target folder, leave Remote Folder blank. The uploader will use /. Live Test URL is optional and only affects the Open Live Site button.

❓ Help Center

Canvas layout, reusable components, Blockly logic, Damage Markup, ZIP/email tools, PWA export, working examples, and troubleshooting.

Builder Blocks

Layers

Global Components

Save the selected header or footer, then apply it across every page.

Search Selected Element + Traits

Selected Element

Click an item in the page to style it here.

Element ID

Classes

Font Size

Text Color

Background Color

Background Gradient

Gradient Start

Gradient End

Gradient Direction

Gradient Preview

Background Image URL

Use Uploaded Image

Background Size

Background Position

Font Weight

Text Align

Width

Max Width

Height

Min Height

Display

Margin

Padding

Border Radius

Border

This applies styles directly to the item currently selected in the builder canvas.

Component Settings

Common properties load automatically for fast canvas selection. Use Load Advanced Properties for the complete attribute, layout, SQLite, and CSS controls.

Theme Toggle

Button Size

Content

Label Text

Icon

Alignment

Shape

Color Preset

Icon Color

Icon Background

Icon Circle Color

This applies only to the selected Theme Toggle block.

Per-Device Styles

Target Device

Selector or class

Property

Value

This writes media-query CSS directly into the custom stylesheet used in preview and export.

Navbar Settings

Brand Text

Links (comma separated)

Link URLs (comma separated)

Logic Builder

Selected Target No component selected Select a button, panel, image, form field, list, or other component on the canvas, then open Blockly logic for it.

Logic is saved per selected component and exported into the site JavaScript.

Generated JS Preview

This is the foundation for an MIT App Inventor-style workflow: select a component, add event blocks, then export the generated behavior with the site.

Assets

Asset Library

History

Ready.

Not saved yet.

No code issues detected.