Layout Builder

This site is part of the
Code Collective
coding resources webring

🎓 Quick Start Tutorial

New here? Learn how to use the power tools in 3 minutes.

✏️ 1. How to use Live Editing

Edit text directly on the preview page like a Word document.

Click the green button "✏️ Enable Live Visual Edit" below.
Click anywhere on the right-side preview (text, headings, footer).
A black floating toolbar will appear near your cursor. Use it to change fonts, colors, or bold text.
Important: Click the button again (turns red) to Stop & Sync changes before saving.

📅 2. Using the Table Generator

Create complex data tables or card layouts easily.

Setup: Define Rows and Cols (e.g., 3x3).
Content: Enter text in the lists separated by commas.
Merging Cells: Use the format r1,c1-r2,c2 (e.g., 1,1-1,3 merges the top row).
Card Mode: Check "Card Layout Mode" to turn the table into a modern image grid.
Finally, click "Insert Table to Target" to see it.

✨ 3. Floating Decoration Images

Add stickers, badges, or anime characters that float over your layout.

Scroll down to "Floating Decoration Images".
Enter an Image URL or pick an icon (e.g., 📌) and click "Add".
Interact in Preview:
- 🖱️ Drag the image to move it anywhere.
- ↘️ Drag the corner (blue handle) to resize.
- 🔄 Drag the top handle (green dot) to rotate.

🧩 4. Using Component Library

Save your favorite snippets (Buttons, Cards) and reuse them anytime.

Save (Method A): Highlight HTML text in the editor, then click "💾 Save Selection".
Save (Method B): Right-click any element in the Preview area and select "💾 Save as Component".
Use: Drag the component card into the editor, or click "Insert".
Manage: Use Export/Import to backup your library to a JSON file.

Recovery System

Next autosave time: Waiting...

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

🏗️ Live Edit

Visual Editing:

Hides sidebar and toolbars for distraction-free writing.

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

🎨 Appearance & Theme Studio

One-click layout & style application.

1. Auto-Beautify (Styles)

☁️ Clean

⚫ Modern

🌸 Pastel

🌙 Dark

2. Structural Presets

Fine-tune global CSS variables.

Primary Color

Accent Color

Border Radius (px)

Base Font Size

Save and load custom color palettes.

💾 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-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:

🛡️ Security & Developer Mode

🔓 Developer Mode (Allow Unsafe HTML/Scripts)

OFF (Default): Strips <script>, onclick, and dangerous tags from imports.
ON: Allows all code. Only enable if you trust the source.

Font and Text Settings

Select Base 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):

Custom Gradient Code:

Left Bg:

Main Bg:

Right Bg:

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 4 (overrides solid color)

Main Content 5 Image URL:

Use Image for Main Content 5 (overrides solid color)

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.

/* 1. 數字輸入框：改為顯性綁定 */ `

Mobile Font Size (px):

/* 2. 側邊欄開關：優化佈局與 aria 描述 */

Hide Left Sidebar Hide Right Sidebar

/* 3. 選單與排序：補齊標籤 */

Hide Navbar Put Main Content First

/* 4. 內距與圖片控制 */

Mobile Container Padding (px):

📱 Hide images on mobile (optimized loading) `

🚀 Developer & Layout Suite

Select structural foundation:

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.

表單生成器 (Form Builder)

Step 1: Click Add Component

文字框 (Input)

勾選框 (Checkbox)

下拉選單 (Select)

Insert target place:

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, ...):

Tip: Use row,col-row,col format to merge multiple cells.

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:

Applying a preset will override some manual style settings.

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)

Control whether the dragged/sorted results in the preview area are immediately written back to the "Table Content" input box on the left.

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.

🧮 Excel-like Math Functions

Supports: =SUM(A1:A5), =AVG(B2:D2), =A1*B1.
Row 1 is Header (Index 1). Col A is Index A.

📊 Generate Chart from Table Data

Uses Row 1 as Labels and Row 2 as Data values from the inputs above.

Chart Type:

Chart Title:

Color Theme:

📊 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):

Tip: You can get your ID from your Formspree dashboard.

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 (Muted) Loop Controls

Start (sec):

End (sec):

🗺️ Interactive Map Widget

Method A: Post Code / Address Embed

Works on Neocities! No API Key needed.

Use this if you already know the exact Lat/Lon.

Search Coordinates:

(May be blocked by CORS on Neocities)

Coordinates (Lat / Lon)

Lat:

Lon:

Zoom (1-18):

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:

Paste JSON Here:

Root Path (Optional):

✨ Icon Library

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

✍️ Enable title editing mode

📊 Dashboard Config

✨ Quick Presets (Click to Apply)

📊 Quick Import Data (CSV/Excel)

Target Section:

Tip: Paste directly from Excel! First row must be headers.

🏗️ Grid Builder

Insert Target:

Columns (Desktop)

Spacing / Gap (px) 20px

🌍 External Content Importer (Admin Only)

Fetch HTML from URL, sanitize it, and adapt to your theme automatically.

1. Fetch from URL (CORS Proxy):

2. Raw HTML / Staging Area:

3. Process Options: 🛡️ Sanitize & Clean (Remove scripts, html/head tags) 🐢 Perf Boost (Add loading="lazy" to images) 🎨 Theme Adapt (Replace colors with var(--accent1))

4. Insert To:

System Tools:

🧩 Block & Component Studio

Drag or click to insert atoms.

Text

Div

2 Col

3 Col

Editor

Clear

Text

Head

Btn

Img

Card

Alert

List

Stat

Food

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, link (URL), and target. 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/%) :

Enable Fixed Content

Anchor Position:

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:

Max 8 decorations allowed.

Decoration Active Control

Selected ID:

X Position (%)

Y Position (%)

Width (px) Shift + ←/→ (±2)

Rotate (deg) Shift + ↑/↓ (±2)

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):

Stagger (交錯時間): 多個元件會依序錯開出現

👁️ Scroll Reveal (Trigger when visible)

Preview Object

🖱️ Mouse Hover Effect

Apply interaction effects when mouse hovers over element.

⏱️ Duration (s)

🧲 Magnetic

Enable

✨ Global Interaction

Enable Creative Cursor

🌊 Parallax Effect

Make element move slower/faster than scroll.

Parallax Speed (0=None, 0.5=Slow)

velocity

🎈 Lottie Animation (JSON)

Loop Animation Autoplay

🌙 預覽內容黑夜模式 (Dark Mode Preview)

When enabled, the generated HTML will support a CSS variable-driven dark theme.

SEO / Meta Settings

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

Page Title 0 / 60

The main title shown in search engine results and browser tabs.

Meta Description 0 / 160

Meta Keywords

Favicon URL

OpenGraph / Twitter / Canonical / Robots

OG Title: OG Image (Thumbnail):

Recommended size: 1200x630 pixels.

OG Type:

Twitter Card Type (How your link looks on X/Twitter)

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!