Quickstart Guide
Welcome to WebRebuilder. In under 3 minutes, you will ingest any live website layout, refine it in the visual studio, and deploy to our global edge network.
Architecture Note: WebRebuilder generates semantic HTML5 and clean CSS custom properties. You can visually tweak tokens or write custom utility classes directly.
1. Create a New Project
Head to your dashboard and click "New Project". You can choose to:
- Import URL: Ingest any existing URL to reconstruct its semantic layout and styling tokens.
- Upload Archive: Upload an existing HTML/ZIP package to deconstruct in seconds.
- AI Prompt Brief: Describe what to build and our pipeline creates a layout foundation.
2. Navigating the Visual Canvas
Double-click any text element to edit its content inline. Use the top toolbar to switch between Desktop (1440px), Tablet (768px), and Mobile (375px) views.
/* Generated CSS Custom Properties */
:root {
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'DM Sans', sans-serif;
--color-brand: #ff4da6;
--color-accent: #7a5cff;
}Essential Keyboard Shortcuts
Select Parent LayerEsc
Toggle Device PreviewCmd + D
Undo / RedoCmd + Z / Shift+Z
Instant PublishCmd + Shift + P