When do you use chat mode?
You are redirected to the Chat Mode editor when:-
✨ Creating a new app:
- After setting up a new app, the chat editor opens for you to preview and modify it further.
-
🎨 Remixing an app:
- When you remix an existing app, the chat editor opens with a copy of the original app, ready for customization.
-
📂 Opening an existing app from your filesystem:
- Open any saved app from your filesystem and continue working in Chat Mode.
- Select the app and choose Chat to App to load it into the chat editor instantly.
Understanding the chat mode interface
👁️ Preview Tab
- Live preview of your app with the latest changes.
- Interact with elements, test inputs, and see real-time updates.
- Supports desktop, tablet, and mobile views for responsive testing.
- Easily resize or reposition within the golden layout (explained below).
💬 Chat Tab
- The space where you interact with Webdraw by typing modification requests.
- Webdraw instantly applies changes based on your descriptions.
- Press Enter or click the green send button to submit a request.
-
You can ask Webdraw to:
- Modify elements (e.g., “Increase button size”).
- Suggest improvements or answer questions.
- Debug errors and explain functionality.
🔮 Reference Prompts and Files
-
Click @ Reference Prompts and Files on the text area or type @ to reference system prompts or saved files. This opens a menu with:
- Prompts: Add AI capabilities to your app.
- Files: Embed assets or reference project elements.
Only files within the current project folder are accessible here.
- Select Create Video from Image from the prompt menu.
- In the same message, add instructions like:
“Add a button that generates a video based on user input. Include a field for specific animation instructions (e.g., ‘Capybara eating pizza’ or ‘Capybara dancing while eating pizza’).”Press Enter to apply the changes. Webdraw confirms the update, and a grey box appears below the response. Click it to view the exact code modifications.
🎯 Select Element Tool
- Click Select Element at the bottom of the chat to modify specific UI components.
- Hover over the Preview Panel, then click an element to tag it in the chat box.
- You can select multiple elements before describing modifications.
- This removes the need for manual descriptions—just select and edit!
🆕 Version History Tab
- Tracks all changes made to the app.
- Allows restoring previous versions.
- Click on an older version to preview it; click Restore to revert.
🧑💻 Code Tab
- Displays the app’s underlying code in real-time.
- Click the grey update box below a chat response to see code differences.
- If needed, you can manually edit the code directly.
📂 Files
- Click the dropdown under the app’s name (e.g., index.html) to access project files.
- Switch between different files and assets.
- You can also access all project files via the blue folder icon in the top-left sidebar.
- Inside the folder view, you can rename, download, or delete files.
- Essential for complex apps requiring multiple files.
🎨 Golden Layout - Customizing your workspace
Webdraw’s flexible golden layout lets you adjust your workspace for better productivity:- Move Tabs: Drag and drop panels (Preview, Chat, Code, etc.) to reorganize.
- Resize Panels: Hover over panel edges to adjust size.
- Close & Reopen Tabs: Close unnecessary tabs and reopen them via the left sidebar menu.
- Multiple Screens: Extend panels to additional screens for multi-monitor setups.
🤔 FAQs & Common Issues
I made a change but don’t see the grey update box!
I made a change but don’t see the grey update box!
- Webdraw may not have detected a code-level modification.
- Try rewording your request.
- Refresh the page and resubmit the command.
- Check the Version History tab for changes.
My panel layout looks messy! How do I reset it?
My panel layout looks messy! How do I reset it?
- Drag panels back to their default positions.
- Close unnecessary tabs and reopen them from the left sidebar menu.
- Refresh the page to reset the layout.
Can I manually edit the code if needed?
Can I manually edit the code if needed?
Yes! Open the Code Tab, locate the file, and edit directly.