Repository files navigation

The open-source drag-and-drop website builder boilerplate.

Introduction ·Features ·Demo ·Contributing

Framely is a full-stack Next.js application offering multi-tenancy, custom domain support, and a flexible drag-and-drop web editor.

🚧This project is currently under active development. Some features are already functional, while most are still being actively built. Contributions and feedback are highly appreciated to shape its final form!

• Authentication: User authentication powered by Clerk.
• Dashboard: Create and view sites.
• Backend Logic for the Website Builder: Core backend functionality for handling website structure and data.
• Drag-and-Drop Website Builder: Fully customizable, user-friendly interface for creating websites.
• Multi-Tenancy: Full support for subdomains

• Generated CSS Preview: View and customize the generated CSS for every element
• Optimised NextJS Exports: Export sites as an optimised NextJS build
• SEO: Optimized SEO Ranking for custom sites
• Dynamic OG Cards: Automatic Open Graph image generation for user content.
• Image Uploads: Drag-and-drop image uploads for adding visual content to websites.
• Site Analytics: Track site performance and user behavior.
• TailwindCSS Support Edit a custom site with TailwindCSS attributes
• Custom Domain Support

View the live Demo

This project is built with the following tools and services:

• Next.js: React-based framework for building web applications.
• Tailwind CSS: Utility-first CSS framework for styling.
• Shadcn: UI component library.
• Prisma & MySQL: Database ORM and relational database.
• Clerk Authentication: Secure and flexible user authentication service.
• Umami Analytics: Simple, fast, privacy-focused alternative to Google Analytics.

• Article explaining the core technology

Creating Framely would not have been possible without the following resources:

• YouTube video by Web Prodigies – An in-depth tutorial on creating the underlying editor technology.
• Vercel's guide to multi-tenancy

We welcome contributions!

1. Start a Discussion: Share your ideas, feedback, or questions.
2. Open an Issue: Report bugs or suggest improvements.
3. Submit Pull Requests: Check out the roadmap or add your own feature enhancements.

This project is open-sourced under the MIT License.