A Simple Site Builder

A React-based site builder for creating and editing page components with live preview.

Project Overview

This is a visual site builder that allows users to:

• Add components (text, button, image) to a page
• Edit component properties and styling
• See a live preview of the page

Instructions

The component editors in components/sidebar/editors/ are not implemented. You need to:

Build the editor forms that allow editing component properties

• Text Component (TextEditor.tsx)
• Button Component (ButtonEditor.tsx)
• Image Component (ImageEditor.tsx)

To get started run the project and click around. Come back to the README below afterwards for more details

npm install
npm run dev

Open http://localhost:3000

# Other Commands
npm run build        # Build for production
npm run type-check   # Run TypeScript type checking
npm run lint         # Run linting

Success Criteria

When complete, you should be able to:

• Change any style or property in a component
• See the preview update in real-time
• Style properties include units in the value (e.g., "16px", "2rem", "#ff0000")