FlutterFlow · leighajarett · Sep 24, 2025 · Sep 23, 2025 · Sep 24, 2025 · Sep 24, 2025
diff --git a/docs/get-started/quickstart.md b/docs/get-started/quickstart.md
@@ -7,85 +7,18 @@ sidebar_position: 1
 keywords: [quickstart, getting started, dreamflow tutorial, ai app generation, flutter development, mobile app creation, natural language prompts]
 ---
 
-
-
 # Quickstart
 
+When starting a new Dreamflow project you have three options:
 
-## Start from Scratch 
-
-Starting a new Flutter project in Dreamflow is simple and flexible. When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application:
-
-- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations.
-- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools.
-- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**.
-- Combine these approaches seamlessly as your project grows.
-
-This flexibility allows you to work in whatever way best suits your development style and project needs.
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
-    height: 0,
-    width: '100%'
-}}>
-    <iframe 
-        src="https://demo.arcade.software/81iL80OjQC1gthaDKvPG?embed&show_copy_link=true"
-        title="Projects - FlutterFlow"
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameBorder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-
-## Start from a Template 
-
-Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms.
-
-Simply choose a template that matches your needs and customize it to create your unique application.
-
-<div style={{
-    position: 'relative',
-    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
-    height: 0,
-    width: '100%'
-}}>
-    <iframe 
-        src="https://demo.arcade.software/VUOZqYhw1r4Ea4jBQyJq?embed&show_copy_link=true"
-        title="Projects - FlutterFlow"
-        style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            colorScheme: 'light'
-        }}
-        frameBorder="0"
-        loading="lazy"
-        webkitAllowFullScreen
-        mozAllowFullScreen
-        allowFullScreen
-        allow="clipboard-write">
-    </iframe>
-</div>
-
+- **[Start from a prompt](/quickstart#start-with-a-prompt)**: when you want to get a jumpstart on a brand new app idea.
+- **[Start from scratch](/quickstart#start-from-scratch)**: when you want to incrementally build from a blank project.
+- **[Start from a template](/quickstart#start-from-a-template)**: when you want to start from an existing beautiful, tailored app.
 
 
 ## Start With a Prompt
 
-Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text or image descriptions. Simply describe what you want to build, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you.
+Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text and image descriptions. Simply describe what you want to build, additionally add screenshots for design inspiration, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you.
 
 Ready to create your app? Simply:
 
@@ -171,3 +104,76 @@ Build a small chat app (store the data locally for now) where users can chat wit
     - Make the chats clustered when folks are close to each other
     - Store the chat data in a cloud database
     - Show a notification when a message arrives when the app is not active
+
+
+## Start from Scratch 
+
+When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application:
+
+- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations.
+- Add new UI elements to your page through the **[Widget Tree]**
+- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools.
+- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**.
+- Combine these approaches seamlessly as your project grows.
+
+This flexibility allows you to work in whatever way best suits your development style and project needs.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/81iL80OjQC1gthaDKvPG?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+## Start from a Template 
+
+Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms.
+
+Simply choose a template that matches your needs and customize it to create your unique application.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Ensures the aspect ratio plus additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/VUOZqYhw1r4Ea4jBQyJq?embed&show_copy_link=true"
+        title="Projects - FlutterFlow"
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameBorder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+
+
diff --git a/docs/imgs/overview.avif b/docs/imgs/overview.avif
diff --git a/docs/index.md b/docs/index.md
@@ -12,7 +12,7 @@ keywords: [dreamflow welcome, flutter development platform, ai mobile app develo
 
 **The Fastest Way to Build Mobile Apps**
 
-Dreamflow is an AI-first platform that combines code, visual, and agentic app development for Flutter—no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment.
+Dreamflow is an AI-first platform that combines agentic, visual and code development for Flutter — no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment.
 
 ### Product Tour
 
@@ -40,42 +40,41 @@ Dreamflow is an AI-first platform that combines code, visual, and agentic app de
 </div>
 
 
-
 ## Key Features
 
-- **[AI Agent](workspace/agent-panel.md)**: Prompt small edits or large refactors with natural language commands. The AI agent can scaffold entire screens, implement complex flows, and generate comprehensive tests, making development faster and more intuitive than traditional coding approaches.
+In Dreamflow, the code is always the single source of truth. Whether you build with the agent, use visual controls, or edit the source directly - the code is updated in realtime as you build.
 
-- **[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development.
+![overview](./imgs/overview.avif)
 
 
-- **[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible.
+- **[AI Agent](workspace/agent-panel.md)**: Start a new app, get a jump start on new features for your existing project, or get help fixing issues using natural language commands. The AI agent can scaffold entire screens, implement complex flows, and help add debug outputs - making development faster and easier to understand.
 
-- **[Properties Editor](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Use expressions, formulas, or simply ask the AI for assistance when configuring complex widget behaviors and styling.
+- **[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development.
 
-- **[Deploy](test-and-publish/publish/web-deployment.md)**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, Android ensures your app reaches users everywhere.
+- **[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible.
 
-- **Hot Reload**: See changes instantly as you develop with Flutter's hot reload technology, enabling rapid iteration and real-time feedback during the development process.
+- **[Visual Property Editors](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Visually select different styles, use code expressions, or simply ask the AI for assistance when configuring complex widget behaviors and styling.
 
-- **[Debug Console](workspace/content-panel.md#debug-console)**: Monitor app logs and performance in real-time with integrated debugging tools that help you identify and resolve issues quickly.
+- **Deploy**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, and Android ensures your app reaches users everywhere.
 
-- **Multi-Platform Support**: Build applications that run seamlessly across mobile (iOS and Android), web (responsive), and desktop (macOS, Windows, Linux) platforms from a single codebase.
 
 ## How It Works
 
-Dreamflow follows a simple 3-step workflow: **Start → Build → Run & Ship**
+Dreamflow follows a simple 3-step workflow: **Start → Iterate → Ship**
 
 ### 1. Start
-Kick off from a natural-language prompt, a blank Flutter project, or import an existing repo (coming soon).
+Kick off from a natural-language prompt, a blank Flutter project, or import an existing Flutter repo using git (coming soon).
 
-### 2. Build
+### 2. Iterate
 Jump between multiple development modes to build your app efficiently:
 
-- Use the **Code** editor for direct Flutter development.
-- Navigate the **Visual widget tree** for drag-and-drop UI building.
-- Configure components in the **Properties editor** with type-safe controls.
-- Leverage the **AI agent** to scaffold features and refactor code through natural language.
+- Leverage the **AI agent** to get a jump start on new features or for help debugging.
+- Add, remove or rearrange UI elements (Widgets) in the **visual Widget Tree**.
+- Configure arguments for widgets visually in the **Properties editor** with type-safe controls.
+- Use the **Code** editor to peak under-the-hood and see what's going on.
+
 
-Built-in Firebase and Supabase integrations provide authentication, database, and storage capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type.
+Built-in Firebase and Supabase integrations provide authentication and database capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type.
 
 <div style={{
     position: 'relative',
@@ -103,11 +102,9 @@ Built-in Firebase and Supabase integrations provide authentication, database, an
     </iframe>
 </div>
 
-### 3. Run & Ship
+### 3. Ship
 A managed run session compiles and previews your app in real time. Connect Firebase/Supabase, test flows, and deploy to web or the app stores when ready.
 
-
-
 ## Ready to Start Building?
 
 Whether you're a seasoned developer looking to accelerate your workflow or a newcomer wanting to bring your app ideas to life, Dreamflow provides the tools and AI assistance you need to succeed.

diff --git a/docs/workspace/agent-panel.md b/docs/workspace/agent-panel.md
@@ -58,7 +58,6 @@ The AI automatically has access to:
 - Your project's dependencies and configuration
 
 
-
 ### Image Attachments
 
 Use the Attach Image button in the message box to add screenshots or images to your conversation. This can help the AI understand:
@@ -113,7 +112,6 @@ The "Add to Agent" feature enhances AI conversations by providing detailed conte
 This gives the AI agent comprehensive understanding of the components you're working with, enabling more accurate assistance.
 
 
-
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(50.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
@@ -187,7 +185,7 @@ This provides a quick way to make targeted widget changes without leaving the Pr
 
 The Agent Panel can automatically access your app's debug logs and console output to help diagnose issues and understand your app's behavior. This is particularly useful when debugging problems or explaining errors to the AI.
 
-When you ask the AI about errors, debugging, or app behavior, it can automatically retrieve recent log entries from your running Flutter app. It typically fetches the most recent 50-100 lines of logs (configurable) to get relevant context without overwhelming the conversation with too much information.
+When you ask the AI about errors, debugging, or app behavior, it can automatically retrieve recent log entries from your running Flutter app. It typically fetches the most recent 200 lines of logs to get relevant context without overwhelming the conversation with too much information.
 
 The agent can access the following: 
 - Print statements from your Dart code