Cloubie is a visual builder that works with your existing codebase. Design with your real React, Vue, or Angular components on an infinite canvas. What you design IS the code — changes become mergeable pull requests, not static mockups.
Build and Edit Apps Visually
Cloubie's visual builder lets you drag, drop, and edit webapps directly in your browser while maintaining full code access. Perfect for builders who want visual speed without no-code limitations.
更简单的创作流程
云比把日常需求整理成精致的网站初稿；文字、图片和风格都能直接在页面上修改，不必接触代码。
MILK TEA · DAILY
用新鲜牛乳、真叶好茶和一点用心，治愈今天。
Edit React Apps Visually with Code Sync
Manipulate your React codebase visually while seeing real-time code changes. No more switching between editor and browser. Build, style, and refactor your react app with pixel-perfect control and automatic code generation.
Create Complex React UIs Without Writing Every Line
Use drag-and-drop for layouts, components, and state management while Cloubie generates production-ready React code.
Components
Generate and Refine React Code with AI
Combine visual building with AI prompts to create custom React components, hooks, and patterns that match your project's architecture, ensuring everything is typed, optimized, and ready for production.
Connect Your Existing Project. Start Designing in Minutes.
No rebuilding. No migration. Connect your React, Next.js, or Vue project and design with your real components — the ones your engineers already built.
Make visual changes that instantly update your React files with proper TSX, props, and state management
Navigate and organize your app's structure through an intuitive layers panel for precise element selection and editing
Use your existing React component library or import any next/tailwind kit
Visually edit and apply Tailwind classes with auto-completion and real-time styling previews
Build mobile-first React apps with breakpoint previews and automatic media query generation
Start with any Next.js/Tailwind template and let AI understand your patterns to generate matching components
Cloubie is an open-source, visual editor for websites. It allows anyone to create and style their own websites without any coding knowledge.
Cloubie is great for creating websites, prototypes, user interfaces, and designs. Whether you need a quick mockup or a full-fledged website, ask Cloubie to craft it for you.
Getting started with Cloubie is easy. Simply sign up for an account, create a new project, and follow our step-by-step guide to deploy your first application.
Cloubie is free for your first prompt, but you're limited by the number of messages you can send. Please see our Pricing page for more details.
Cloubie is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating websites, it can be used for anything visual – presentations, mockups, and more. Because Cloubie uses code as the source of truth, the types of designs you can create are unconstrained by Cloubie's interface.
Developers have historically been second-rate citizens in the design process. Cloubie was founded to bridge the divide between design and development, and we wanted to make developers first-class citizens alongside designers. We chose to be open-source to give developers transparency into how we are building Cloubie and how the work created through Cloubie will complement the work of developers.