Last updated: 2026-10-25

Note

This README was generated by SKILL, get the ZH version from here.

---

PICK A TEMPLATE, CLICK TO EDIT, SHIP A PAGE

---

A JavaScript visual website builder with prebuilt page templates, block and element libraries, and live CSS style panels

Table of Contents

• Features
• Architecture
• License
• Author

Features

git clone https://github.com/pardnchiu/website-builder.git · Documentation

• One-Click Page Templates — Eight prebuilt site templates replace the canvas with a single click, so you start from a finished page instead of a blank one.
• Two-Tier Asset Library — Navigation bars, headers and eight section modules sit alongside 32 HTML elements, covering both coarse and fine-grained insertion.
• CSS-Free Style Panel — Display, sizing, text, background, border, radius and Flex/Grid properties are edited as form fields with an HSB color picker applied live.
• Isolated iframe Canvas with Device Preview — The edited page never collides with builder styles, switches between mobile, tablet and desktop widths, and redraws curved and slanted SVG masks on resize.
• DOM Path Navigation and Element Actions — A bottom path bar jumps back to any ancestor node, and the selected element can be cloned or deleted in place.

Architecture

Full Architecture

graph TB
    HTML[index.html] --> Init[_init.js entry]
    Init --> Left[Left panel dom_left]
    Init --> Center[Canvas dom_center iframe]
    Init --> Right[Right panel dom_right]
    Left --> Model[Template / block / element models]
    Right --> Content[Content editor]
    Right --> Style[Style editor]
    Left --> Target[target element ops]
    Right --> Target
    Target --> Center

Loading

License

This project is licensed under the GPL-3.0 LICENSE.

Author

Just open an issue to share an idea.

---

©️ 2024 邱敬幃 Pardn Chiu