Wix Clone

Wix Clone is an open-source website builder template built with React, Express, and MongoDB that replicates core Wix functionality including drag-and-drop page editing, multi-page management, and live publishing.

What is Wix Clone?

Wix Clone is a full-function website builder that lets users create and publish multi-page websites through a visual drag-and-drop interface. It takes a user's design actions as input and produces a ready-to-publish website hosted at a unique link, plus a live preview and a management dashboard. The platform runs on a React frontend with an Express and MongoDB backend, and a live demo is hosted at wixclone.onrender.com. It is an open-source GitHub project with 64 stars, authored by a developer (the page shows a screenshot from Blogger).

Key Features

• Drag-and-drop interface — Users can place and move elements anywhere on a canvas without writing code, with nesting of elements supported.
• Multi-page website creation — The builder supports creating and managing multiple pages within a single project.
• Pexels image search — Integrated royalty-free image search from Pexels lets users find and insert stock photos directly in the editor.
• Built-in animations — Animation effects can be applied to any element, with a layers panel that shows hover effects on selection.
• Custom layouts and element editing — Detailed editing options allow adjusting layouts, element minimum heights, and backgrounds with a CSS gradients creator.
• Website management dashboard — Users get a dashboard to manage their websites and see generated previews, with a separate preview page for unpublished sites visible only to authorized users.
• Google font manager — Manage Google Fonts for a page from a single place using the Google Fonts API.
• Unique publishing links — Every user-generated website is published to a unique URL, with a responsive preview mode for checking mobile layouts.
• SEO settings (to be implemented) — Page title, description, favicon, and preview settings are planned but not yet functional.

Who is it for?

• Developers building a custom website builder or DIY website creation platform from scratch; they can use this codebase as a foundation.
• Freelance web designers who want to hand over a simple editor to clients for self-serve changes while keeping the published site on their own hosting.
• Startups exploring the website builder SaaS market; the template demonstrates core features like drag-and-drop, multi-page management, and publishing.

What can you do with Wix Clone?

• Start your own website builder service — Host the application and let users design, preview, and publish websites under unique links.
• Learn how modern drag-and-drop builders are implemented — Study the React component architecture, Express API, and MongoDB persistence patterns in a working example.
• Customize the editor for a niche audience — Swap Pexels image search for another stock provider or extend the Google font manager to include more typography options.

How does Wix Clone work?

To run Wix Clone locally, install dependencies with npm install, create a .env file with Google Fonts API and Pexels API keys, and build the frontend with npm run build. For the backend, copy the build folder into the backend directory, configure a MongoDB connection string, JWT secret, and port 8000, then run npm run dev. The backend uses Express and MongoDB for user data and website persistence, while the frontend communicates via REST endpoints.

FAQ

Is Wix Clone free to use?

Wix Clone is an open-source project, so the source code is free to download, modify, and deploy. However, running it requires your own API keys for Google Fonts and Pexels, plus a MongoDB instance; the free tiers of these services may have usage limits.

What API keys are needed?

The README requests two API keys: one from Google Fonts Developer API and one from Pexels for image search. Without these keys, the font manager and Pexels image search features won't work.

Does Wix Clone support SEO settings?

SEO settings such as page title, description, favicon, and preview are listed as a feature but marked '(To be implemented)' in the README. The current version does not yet include functional SEO configuration.

What is the demo?

A live demo is hosted at wixclone.onrender.com, which shows the Wix Clone interface in action. It runs on Render's free tier, so you can explore drag-and-drop editing and published websites.