---
title: VvvebJs Website Builder
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
license: apache-2.0
---

# VvvebJs - Visual Website Builder

## Features

- 🎨 Visual drag & drop interface
- 📱 Bootstrap 5 components
- 💾 GitHub & EdgeOne KV storage
- 👥 GitHub-based user management with real-time sync
- 🔄 Undo/Redo functionality

## 🔄 GitHub User Management System

**系统使用基于GitHub的用户管理，确保用户数据在多个实例间实时同步。**

### 主要特性
- ✅ **实时同步：** 每次登录都从GitHub仓库加载最新用户数据
- ✅ **数据持久化：** 用户数据存储在GitHub仓库的 `system/users.json` 文件中
- ✅ **多实例同步：** 多个部署实例间自动共享用户数据
- ✅ **安全性：** 密码使用 PHP password_hash() 加密存储
- ✅ **向下兼容：** 保持与原有环境变量用户系统的兼容性

### 用户数据存储位置
- **GitHub模式：** `https://github.com/YOUR_OWNER/YOUR_REPO/blob/main/system/users.json`
- **环境变量模式：** 通过 `USER_1_NAME`、`USER_1_PASSWORD` 等环境变量配置

## Configuration

Set these environment variables in Space Settings:

### Authentication (Required)
```
USER_1_NAME=admin
USER_1_PASSWORD=your_secure_password
USER_2_NAME=editor
USER_2_PASSWORD=another_password
```

### Storage Configuration
```
STORAGE_TYPE=github
```

### GitHub Storage (Recommended)
```
GITHUB_TOKEN=ghp_your_github_token
GITHUB_OWNER=your_username
GITHUB_REPO=your_repo_name
GITHUB_BRANCH=main
GITHUB_PATH=pages/
```

### EdgeOne KV Storage (Optional)
```
EDGEONE_KV_API_KEY=your_api_key
EDGEONE_KV_SECRET_KEY=your_secret_key
EDGEONE_KV_ZONE_ID=your_zone_id
```

## User Management Modes

### 1. GitHub User Management (默认)
- 用户通过GitHub仓库中的用户数据登录
- 支持密码修改功能
- 多实例间自动同步
- 访问 `login.html` 进行登录

### 2. Environment Variable Mode (备用)
- 通过环境变量预配置用户
- 使用Basic Authentication
- 适合简单部署场景

## Usage

1. Access the Space URL
2. Login with existing account:
   - **GitHub Mode:** Visit `login.html` to login
   - **Env Mode:** Use configured username/password
3. Build your website visually
4. Pages are saved to external storage automatically

## File Structure

```
system/
└── users.json          # GitHub-managed user data

users/
├── username1/
│   ├── page1.html
│   └── page2.html
└── username2/
    ├── index.html
    └── about.html
```

## User Account Management

User accounts are managed through the GitHub repository. To add new users:
1. Manually add user data to `system/users.json` in the GitHub repository
2. Use proper password hashing for security
3. System will automatically load the updated user data on next login

## Development

The system uses a hybrid approach:
- **Priority 1:** GitHub user management for data persistence
- **Fallback:** Environment variable authentication for compatibility
- **Storage:** All user files stored with user isolation

## License

Apache License 2.0