DEV Community

Cover image for 🧱Build It: Visual Drag&Drop Responsive Site Builder
sahra 💫
sahra 💫 Subscriber

Posted on

🧱Build It: Visual Drag&Drop Responsive Site Builder

#devchallenge #kendoreactchallenge #react #webdev

This is a submission for the KendoReact Free Components Challenge.

What I Built

Build It is a visual drag-and-drop site builder that empowers anyone to design and launch responsive websites without writing a single line of code.

Start with a blank canvas, drag and drop pre-built components, customize them with your own content and styles, and instantly see your site come to life. When you're ready, export the code and use it anywhere.

It’s perfect for developers who want a faster prototyping tool, and for non-coders who want to create professional-looking layouts effortlessly.

Demo

Live Site

just-build-it.netlify.app

GitHub Repository

GitHub logo Sarah-okolo / KDR-DD-site-builder

Build It

Build It is a visual drag-and-drop site builder that empowers you to design and launch responsive websites without writing code. Start with a blank canvas or use pre-built components to quickly create modern layouts, customize them to your style, and publish instantly.

✨ Features

  • Drag & Drop Builder – Visually arrange and customize components on a responsive canvas.
  • Responsive Design – Build layouts that adapt seamlessly across desktop, tablet, and mobile.
  • Component Library – Access a growing set of reusable UI blocks to accelerate design.
  • Live Preview – Instantly preview your site across devices before publishing.
  • One-Click Publish – Launch your project with a single click when it’s ready to go live.

🚀 Getting Started

Prerequisites

Installation

Clone the repository and install dependencies:

git clone https://github.com/your-username/build-it.git
cd build-it
npm install
Enter fullscreen mode Exit fullscreen mode

View on GitHub


How it works

Build It canvas page

  1. Add Structure: Add structure components to define the layout of the site

  2. Drag & Drop: Select a component from the sidebar and drag&drop it into structures on the canvas.

  3. Edit & Customize: Select items to adjust properties in the Inspector panel. You can tweak text, images, button labels, dimensions, and more.

  4. Responsive Layouts: Structures act as building blocks for your layout, letting you stack, resize, and rearrange content visually.

  5. Instant Feedback: Every change updates the live preview on the canvas.

  6. Export: Once done, you can export the code to integrate into your own project.

The goal is to bring together the ease of a site builder with the flexibility of clean, editable React code.

KendoReact Components Used

This project makes use of 15 of KendoReact's free components including:

  • ✅ Button

  • ✅ Input

  • ✅ Checkbox

  • ✅ Switch

  • ✅ DatePicker

  • ✅ DropDownList

  • ✅ MultiSelect

  • ✅ StackLayout

  • ✅ GridLayout

  • ✅ Card

  • ✅ PanelBar

  • ✅ AppBar

  • ✅ Notification

  • ✅ Popup

  • ✅ Tooltip

A big thank you to the KendoReact team and DEV for hosting this challenge 🙌.
It was a fun opportunity to push the boundaries of what I could build with KendoReact.

Top comments (0)