Documentation

Everything you need to get started and go further.

Quick Start

Get up and running with Blockly Web Builder GPT in under 5 minutes. No installation required — just open the editor and start building.

Installation

If you want to run the builder locally or self-host:

git clone https://github.com/wlyl123/blockly-web-builder-gpt.git
cd blockly-web-builder-gpt
pnpm install
pnpm dev

The editor will open at http://localhost:5173.

Your First Project

1. Click New Project in the dashboard.

2. Drag a Hero block from the left panel onto the canvas.

3. Click the block to edit text, colors, and images in the properties panel.

4. Add more blocks — Features, Pricing, Footer — to build your page.

5. Click Preview to see your site in action.

6. Click Export to download the code or deploy directly.

Working with Blocks

Blocks are the building units of your website. Each block represents a UI component with configurable properties.

Available Block Types

  • Layout: Container, Grid, Flex, Section, Divider
  • Content: Heading, Text, Image, Video, Icon
  • Components: Button, Card, Form, Table, Tabs, Accordion
  • Sections: Hero, Navbar, Footer, Pricing, Testimonial, Gallery

Nesting Blocks

Container blocks can hold other blocks. Drag a block inside a container to nest it. Use the outline panel to reorder or restructure your hierarchy.

AI Code Generation

Pro plan users can leverage GPT-4 to generate and refine code. Simply describe what you want in natural language:

// Example: Ask AI to add a contact form
"Add a contact form with name, email, and message fields.
Include validation and a submit button with a loading state."

The AI will generate clean, semantic HTML, styled CSS, and vanilla JavaScript — all reviewable in the code panel.

Export & Deploy

Export Formats

  • HTML/CSS/JS — Static files, ready for any host
  • React — Component-based React project
  • Vue — Vue 3 single-page application

One-Click Deploy

Connect your Vercel, Netlify, or GitHub account for one-click deployment. Your site goes live in seconds with a custom or generated URL.

REST API

For programmatic access, use our REST API:

POST /api/v1/projects
GET  /api/v1/projects/:id
POST /api/v1/projects/:id/export
POST /api/v1/projects/:id/deploy

API keys are available on Pro and Enterprise plans.

JavaScript SDK

import { Builder } from '@blockly/web-builder';

const builder = new Builder({ apiKey: 'your-key' });
const project = await builder.createProject('My Site');
const page = await project.addPage('Home');
await page.addComponent('hero', { title: 'Welcome' });
const code = await project.export('html');