Layout Builder

Recovery System

Next autosave time: Waiting...

Set styles and structure, then click "Download Html" or "Generate HTML Code".

🏗️ Core Structure & Live Edit

✨ Auto-Beautify (One-Click)

Instantly apply professional styling preset to the entire layout.

☁️ Clean Minimal

⚫ Modern Bold

🌸 Soft Pastel

🌙 Cyber Dark

1. Layout Structure Mode:

2. Visual Editing:

Click to edit text directly in the preview.
Note: Settings panel won't auto-refresh preview while editing to prevent cursor loss.

🎨 Preset Layout

🎨 Color Theme Manager

Define a color palette and apply it to the entire site (Navbar, Buttons, Backgrounds, Text) with one click.

Primary (Nav/Btn): Secondary (Hover/Link):

Background: Text/Heading:

Theme Name:

Saved Themes (Click to Apply)

💾 Template Manager 2.0

Auto-versioning enabled. Save with the same name to create a new version.

Processing...

Save or load all settings, options, and all `textarea` content at once.

Visibility and Layout Controls

Show Navbar Show Left Menu

Show Main Content Show Right Sidebar

Show Footer

Show Device Preview Toolbar

Enable Auto collapse function

💾 Enable Auto-save (Every 5 minutes)

Left Width (%): Right Width (%):

Column Padding (px): Column Border (px):

Box Shadow Template: Custom Box Shadow:

Advanced CSS Settings

Max Page Width (px):

Gap Between Columns (px): Border Radius (px):

Line Height: Heading Color:

Font and Text Settings

Font:

🌐 Google Fonts Integration 1. Quick Select (Popular): 2. Or Type Font Name (Exact name from fonts.google.com):

*Entering a value here will override the standard font selection above.

Font Size (px): Font Weight:

Text Color: Link Color:

Background Templates

Choose a preset background or enter a custom background URL (custom backgrounds will override the template).

Custom Background URL: Background Color: Gradient Overlay (optional):

Left Column Background: Main Column Background:

Right Column Background:

Column Background Images (Optional)

Left Column Image URL:

Use Image for Left Column (overrides solid color/glass effect)

Main Column Image URL:

Use Image for Main Content (overrides solid color)

Right Column Image URL:

Use Image for Right Sidebar (overrides solid color)

Main Content 2 Image URL:

Use Image for Main Content 2

Main Content 3 Image URL:

Use Image for Main Content 3

Main Content 4 Image URL:

Use Image for Main Content 5

Main Content 5 Image URL:

Use Image for Main Content 5

Header Image Templates

Choose a template or enter a custom header URL.

Header Image Template

Custom Header Image URL:

Custom Header HTML (Override by Header Image if present):

Header Templates

Header Rotate (deg) / Scale

Header SkewX (deg) / Header SkewY

Header TranslateX / Header TranslateY

Header Mode / Position:

📱 Mobile/Tablet Specific Settings

These settings apply only when screen width is less than 700px.

Mobile Font Size (px):

Hide Left Sidebar on Mobile Hide Right Sidebar on Mobile

Hide Navbar on Mobile Put Main Content First (Reorder)

Mobile Container Padding (px):

Customize Head content (including Leaflet)

Paste the <link> and <script> tags here, or anything else you want to add to the <head>.

Leaflet Example code (please copy and paste into the editor below):

<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

Custom Head Content Editor:

The content will be injected into the <head>block of the final HTML file.

Custom CSS Injection

Insert custom CSS rules. The content of this editor will be injected into the preview's <style> block after the layout and theme CSS. The content is saved automatically to your browser.

Custom JavaScript Injection

Insert custom JavaScript code. The code will be injected at the bottom of the body tag.

Navbar Theme & Behavior

Navbar Style Template: Scroll Behavior: Nav Bar Color: Nav Link Color:

Button Background: Button Hover:

Menu Setting on the Navbar

Tip: Drag the modal header to reposition. Within modal you can drag items to reorder parent and children.

Table Generator

Insert an HTML table into Main Content

Rows: Cols:

Border width (px): Cell padding (px):

Border color: Cell bg:

Merge cells (Format: r1c1-r2c2, r3c1-r3c2, ...):

Draggable columns/rows (Sortable enabled in preview area): (Requires advanced editing features) 3. "Image and text card layout" mode (using DIV/CSS Grid)

Form Style Presets:

Cell Text List (comma separated): Image URLs in Cells (use comma to separate): Hyperlink URLs in Cells (comma separated for link targets):

Show Text Auto-fit Images (Width 100%)

Use Hyperlink (disable Fancybox gallery)

Automatically synchronize preview area changes (Recommended to enable when drag-and-drop sorting is enabled)

控制是否將預覽區的拖曳/排序結果，即時寫回左側的「表格內容」輸入框。

Image Alignment (Crop Ratio):

Selecting a ratio (e.g. Square) will crop images to align perfectly.

Image Width (px) (Ignored if Auto-fit is checked): Bold header row

Target Location:

Note: Inserting into Main 1 will override text mode. Inserting into Main 2/3 will overwrite the current editor content.

📊 Table Data I/O

Tip: Right-click on the table in preview for more options.

Iframe Generator

Insert an Iframe into Main Content Iframe Target: Iframe Name/Target: Iframe Source URL:

🧩 Widgets Generator

🎵 Music / Audio Player

Audio File URL (.mp3/.ogg):

Autoplay Loop

Player Style: Song Title (for Retro/Floating):

📬 Functional Contact Form

Generates a working form using Formspree (Free service).

Your Email / Form ID (Formspree):

Form Style:

📝 Form Widgets

Form Type: Formspree ID / Email: Form Style:

🎬 Video Player (MP4)

Video URL (.mp4): Poster Image (Optional):

Controls Autoplay (Muted) Loop

⏰ Utilities (Clock & Calendar)

Clock Style:

Calendar Style:

▶ YouTube Player

YouTube URL:

Autoplay (Mute) Loop Controls

Start (sec): End (sec):

🗺️ Interactive Map Widget

Enter coordinates manually OR search by address to auto-fill them.

Step 1: Find by Address (Optional)

Step 2: Coordinates (Lat / Lon)

Lat: Lon:

Zoom Level (1-18): 15 Popup Text:

💳 PayPal Payment Widget

Generate a Buy Now or Donate button.

PayPal Email or Merchant ID:

Item Name: Item ID (Opt):

Price: Currency:

Button Style:

📰 Blogging Tools

Post Title:

Author: Date:

Header Image URL (Optional): Post Excerpt / Intro:

Auto Read Time Add Share Links

Layout Style:

Target for Widgets:

📊 Dynamic JSON Content

Fetch data from an API and generate static HTML elements.

Data Source Type:

API URL:

Root Path (Optional):

✨ Icon Library

Click to open the gallery and insert an icon into the Main Content editor.

Content Templates (One-Click Insert)

Click to insert a pre-built HTML template into the editor below.

Insert target:

Notion Block Palette

Text

Heading 1

Heading 2

Divider

2 Columns

3 Columns

🧩 Element Block Palette

Drag & Drop these blocks into the editor below, or Click to append.

Text

Heading

Button

Image

Card

Divider

Alert

List

Icon

Main Content HTML Editor

Enter custom HTML content for the Main Content area. This is the content used unless a Table or Iframe is inserted.

Left Sidebar Mode

Choose how the left sidebar should display.

Menu Mode
Custom Content Mode

Left Menu Editor

Drag to reorder. Each item supports a name and a link (URL). Items are saved automatically.

Left sidebar custom content editor

When you click "💾 Save Content", the sidebar mode will switch to "Custom Content". If you use the menu editor above, it will automatically switch back to "Menu Mode".

Right Sidebar Content Editor

Enter custom HTML content for the Right Sidebar. This will override the default content.

Input the HTML content you provided in the prompt here.

Extra Content Sections

These sections appear between the main column layout and the footer. Drag the handle (☰) to reorder them.

Footer Editor

Modify the footer content (HTML allowed)

Footer Templates

Fixed Screen Content (Text/Image)

Current Content Slot:

Position Type:

Enter Text or HTML (e.g., <img src="...">)

Position X (px/%) : Position Y (px/%) :

Anchor Position: Show Fixed Content

Fixed Content Slots Management

Upload 4 Slots Data File (.json):

Floating Decoration Images (Max 8)

Add small floating images anywhere on the page using absolute positioning.

Image URL: Link URL (optional):

Max 8 decorations allowed.

Decoration Active Control

Selected ID:

X (%) Y (%)

Width (px) [Shift + ← / →: Width in pixels ±2px] Rotate (deg) [Shift + ↑ / ↓: Rotation angle ±2deg]

Drag the decorative image in the preview on the right to directly synchronize coordinates; or enter values at the top and press Save.

🎬 Animation Builder

1. Select Target Element

2. Choose Animation

Duration (s): Delay (s):

👁️ Scroll Reveal (Trigger when visible)

Preview

🌊 Parallax Effect

Make element move slower/faster than scroll.

Speed (0=None, 0.5=Slow):

🎈 Lottie Animation (JSON)

Loop Autoplay

SEO / Meta Settings

Quickly edit page-level <head> tags used by the preview and by generated HTML files.

Page Title: Meta description: Meta keywords: Favicon URL:

OpenGraph / Twitter / Canonical / Robots

OG Title: OG Image (Thumbnail):

Recommended size: 1200x630 pixels.

OG Type: Twitter Card: Canonical URL: Robots:

These values will be injected into <head>, saved locally, and applied to preview + exported HTML.

These fields are saved locally to your browser. They will be injected into the preview and into the generated HTML head.

⚡ All settings management

🚀 Pro Extensions

📄 Multi-Page Manager

Switching pages saves the current state automatically.

🐢 Enable Image Lazy Load

Automatically adds loading="lazy" to all images for better performance.

☁️ Cloud Backup

📦 Project Manager

Save Current Project As:

Load Saved Project:

🔗 Share / Sync

Generates a URL containing your current layout. Send it to friends or open it on another device to restore this state.

Please back up your settings regularly!