Aura Canvas

Aura Canvas — A lightweight CMS workflow tool for AI-generated static websites.

Transform static HTML websites into maintainable digital products with visual editing, spreadsheet-powered content management, and responsive layout controls.

---

Overview

AI website builders can rapidly generate beautiful static sites, but businesses and content owners often need a simple way to update content after deployment. Aura Canvas fills that gap by providing a lightweight CMS enhancement layer that sits on top of static HTML. It connects visual editing with spreadsheet-driven content, allowing non-developers to maintain and publish updates without changing code or running a backend.

At a glance:

• Generate site with an AI builder (e.g., Aura.build)
• Import the exported HTML into Aura Canvas
• Bind content to Google Sheets or CSV data
• Edit visually and export production-ready static HTML

---

Key Features

HTML Import & Section Management

• Import exported HTML files and the site structure produced by AI builders.
• Automatically detect and split pages into editable sections.
• Edit, reorder, hide, or delete sections with drag-and-drop controls.

Spreadsheet-powered CMS Workflow

• Connect a Google Sheet or CSV as the site content source (no backend database required).
• Update site content directly from spreadsheets that business users already know how to use.
• Built-in field normalization and local caching for fast previews.
• Ideal for product catalogs, portfolios, service listings, and other content-driven pages.

Responsive Grid Builder

• Configure CSS Grid layouts visually for each section.
• Control column counts, gaps, and min/max widths.
• Define responsive breakpoints for desktop, tablet, and mobile.
• Preview layout changes in real time.

Visual Style Management

• Manage colors, border radius, padding, shadows, and spacing through a visual UI.
• Create and reuse style presets across sections.
• Apply consistent theme settings without hand-editing CSS.

Live Preview

• View desktop, tablet, and mobile previews within the editor.
• Instant rendering of content and style updates.

Export Static Website

• Export production-ready HTML that includes styles and configuration.
• Deploy to any static hosting platform (Netlify, Vercel, GitHub Pages, S3, etc.).

---

Use Cases

• AI-generated business websites
• Product catalog sites
• Portfolio and case study galleries
• Restaurant menus and event pages
• Service listings and pricing pages
• Landing pages and marketing microsites
• Small business brochure sites that require frequent content updates

---

Workflow

1. Generate a static website with an AI builder.
2. Export the site as HTML.
3. Import the exported HTML into Aura Canvas.
4. Connect a Google Sheet or CSV as the content source.
5. Edit content visually and adjust layouts/styles.
6. Export the updated static HTML and deploy.

---

Technology Stack

Frontend:

• Vanilla JavaScript (ES6+)
• CSS3 with CSS Variables

Data:

• Google Sheets via a simple public-sheet proxy (e.g., opensheet.elk.sh) or CSV import — no server-side database required.

Storage:

• IndexedDB and localStorage for local project caching and fast previews.

Libraries and APIs:

• Sortable.js for drag-and-drop ordering
• DOMParser API for HTML parsing and section detection

---

Project Structure

The repository contains the editor, styles, and example pages. Key files and folders:

• editor.html — Editor entry point
• css/ — Editor styles
• js/ — Editor scripts (editor.js, grid.js, sheets.js, etc.)
• example/ — Example pages and generated outputs
• style/ — Style presets and templates

Refer to the repository tree for full details.

---

Future Roadmap

• Improve import fidelity for more AI builder templates
• Add more built-in style templates and presets
• Support customizable CSS class mapping
• Export components for front-end frameworks (React / Vue)
• Optional cloud project storage and team collaboration features

---

License

MIT License

---

Aura Canvas — A CMS workflow enhancement layer for AI-generated static websites.

Aura Canvas - 可视化编辑器

---

当前版本: v0.2.0 (2026年1月25日)

一款轻量化的HTML拼接与动态制卡工具，专为Aura.build生态系统优化。

🚀 快速开始

启动方式

最简单的方式：直接打开

• 双击 editor.html 文件即可开始使用

使用本地服务器（推荐用于开发）

• 双击运行 启动服务器.bat 文件
• 在浏览器访问：http://localhost:3000/editor.html

✨ 核心功能

1. HTML 导入与解析

• 支持导入 Aura 导出的 HTML 文件
• 自动解析并拆分为可编辑的 Sections
• 支持拖拽排序、显示/隐藏、编辑、删除

2. Google Sheets 数据连接

• 免鉴权读取 Google Sheets 数据
• 自动字段标准化与验证
• 本地缓存提升加载速度
• 数据预览表格展示

3. 网格配置系统

• 自适应 CSS Grid 布局
• 可调节列数、间距、最小/最大宽度
• 响应式断点自动生成
• 实时预览网格效果

4. 样式集管理

• 可视化颜色选择器
• 圆角、内边距、阴影强度调节
• 保存多个样式集
• 快速应用不同样式

5. 实时预览

• 桌面/平板/手机三种预览模式
• 即时渲染效果
• 支持手动刷新

6. 导出功能

• 导出为完整 HTML 文件
• 导出项目配置（JSON）
• 所有样式和配置包含在内

📖 使用指南

第一步：导入 HTML

1. 点击顶部"导入 HTML"按钮
2. 选择 Aura 导出的 HTML 文件
3. 编辑器会自动解析并拆分为 Sections

第二步：连接数据源（可选）

1. 切换到"数据源"标签页
2. 输入 Google Sheets URL
3. 确保 Sheet 已设置为"任何知道链接的人都可以查看"
4. 点击"加载数据"