Getting Started

Build React, Next.js, Svelte, and Vue apps with natural language.

Bolt.diy is a desktop app that converts your descriptions into functional code. It understands design patterns and best practices to generate clean, maintainable code.

Core Features

Visual App Design Describe your layout in natural language. Bolt.diy creates UI elements with proper layout and styling.

Multi-Framework Support Build apps with React, Next.js, Svelte, or Vue. The AI uses framework-specific patterns and syntax.

Live Preview See changes instantly as the AI generates code. Test designs in real-time.

Code Generation Creates clean code following framework conventions. Includes proper component architecture and state management.

Integration Ready Connect to external APIs and data sources. The AI generates integration code automatically.

Install Bolt.diy

Download from GitHub releases for your OS.

Mac users: Fix "app is damaged" error with:

xattr -cr /path/to/Bolt.app

Replace /path/to/Bolt.app with your actual path.

Launch Bolt.diy after installation. The main workspace opens on first launch.

Start Designing

Describe your app's structure in the input area. Example: "Create a dashboard with sidebar and main content."

Bolt.diy generates the initial structure. The AI creates components, layout, and styling based on your framework choice.

Use natural language prompts to adjust components, refine design, or modify layout.

Choose Your Framework

Bolt.diy supports 4 frameworks:

React - Component-based apps with rich library ecosystem Next.js - React with server-side rendering and routing Svelte - Small bundles and simple syntax
Vue - Approachable framework that's easy to learn

Select your framework on project start or change during development. Bolt.diy follows framework conventions.

Build Step-by-Step

1. Define Structure - Describe basic layout and sections
2. Add Components - Request navigation, forms, tables
3. Style Design - Specify colors, spacing, typography
4. Add Functionality - Describe state management, API calls
5. Test & Iterate - Use live preview for improvements

Natural Language Best Practices

Be Specific About Layout "Create header with logo left, nav menu right" instead of "Create a header."

Specify Component Details Mention functionality, data sources, and user interactions.

Consider User Experience Describe navigation, form submissions, data display.

Use Framework Terms Mention "React hooks" or "Vue composition API" for specific patterns.

State Design Preferences Include styling, branding, or design system requirements.

Common Use Cases

Rapid Prototyping - Test concepts quickly before full development Component Libraries - Generate reusable, consistent components Framework Learning - See how AI implements different patterns UI Testing - Create interface variations for user testing Educational Apps - Build learning projects with various frameworks

Development Workflow

Bolt.diy exports clean, framework-appropriate code. Generated code follows standard patterns with proper imports and organization.

Export projects and continue development in your preferred editor. Code is maintainable by human developers.

Supports CSS modules, styled-components, Tailwind CSS, and popular styling solutions.

Key Benefits

Bolt.diy cuts prototype time. The AI handles boilerplate code and component structure. You focus on business logic and custom features.

The visual interface works for different experience levels. Junior developers learn from AI-generated patterns.

Multi-framework support lets you experiment without project setup overhead.

Quick Takeaways

• Visual AI app builder for React, Next.js, Svelte, Vue
• Natural language generates functional applications
• Live preview for real-time visualization
• Multiple frameworks in one interface
• Clean, maintainable code following conventions
• Perfect for rapid prototyping and learning
• Local desktop application
• Bridges design concepts with implementation

Next Steps

Install Bolt.diy and create a simple app by describing what you want in natural language. Try different frameworks to see how AI adapts code generation.

Your next step: Download Bolt.diy and build your first AI-generated app.