Interface Guide

Navigate Dazl's workspace efficiently.

Dazl combines AI-powered code generation with visual editing in an intuitive interface designed to streamline your workflow. Understanding the main areas and how they work together will help you build applications more effectively.

Main interface areas

Dazl's interface consists of five key areas that work seamlessly together. Each serves a specific purpose in the app-building process:

Toolbar (top)

• Edit/Preview toggle - Switch between editing and interactive modes
• Dev Tools button - Open advanced editing tools
• Hide AI Chat - Toggle the AI panel visibility
• Theme - View and manage your projects design system
• Publish - Deploy your project online to test and share with others

AI Chat (left panel)

• Describe what you want to build in natural language
• Request changes to your application
• Context-aware to what you've selected on Stage
• Add attachments to communicate with the AI, or use as assets in the project
• Enhance your prompts with a click to better help the AI understand your intent

Stage (center)

• Your visual workspace where you build and test
• Click elements to select them in edit mode
• Double-click text to edit inline
• Switch to Mobile view to see how your app looks on mobile devices

Dev Tools

• Use the Elements panel to explore your app structure to understand what the AI built
• Work with the Style Panel to edit complex styles
• Explore the Props panel to view runtime values to debug unexpected behaviors in your components

Edit vs Preview modes

The Stage behavior changes based on which mode you're in. Understanding when to use each mode is essential for efficient development:

Edit Mode

• Select and modify elements
• Right-click for quick actions (duplicate, delete, wrap, go to code)
• See outlines around selected elements

Preview Mode

• Interact with your app like a user would
• Click buttons, fill forms, navigate pages
• No editing - pure interaction testing

Selecting and editing elements

Selecting the right element is the foundation of effective editing. Dazl provides several ways to select and modify elements:

Basic selection

• Click any element to select it
• Selected elements show an outline for highlight
• Double-click text to edit directly

Right-click actions

• Duplicate - Copy the element
• Wrap with Div - Add container around it
• Delete - Remove element
• View Code - See underlying code
• Inspect - Opens the Dev Tools on the Elements panel with the current selection active
• Select Parent - Change selection to the parent element of the currently selected element

AI Chat workflow

The AI Chat becomes more effective when you understand how it interprets your requests and uses context from your selections:

Making effective requests

1. Select element you want to change (optional but helpful)
2. Describe what you want in natural language
3. Review the generated result
4. Ask for refinements if needed

Examples

• "Add a new CTA button to this section" (with a selection active)
• "Add a contact form below this section"
• "Change the mobile layout to stack vertically"

The AI understands your selections and conversation history for both targeted or broad changes.

Responsive design

Dazl automatically creates responsive designs, but understanding how to test and adjust them ensures your app works well on all devices:

Desktop view (default)

• Full layout with all elements
• Designed for mouse interactions

Mobile view

• Toggle with mobile icon in the stage toolbar
• Touch-friendly sizing
• Simplified layouts

When to use Dev Tools

Open Dev Tools (top-right button) for:

• Precise selection and styling - Perform exact changes to colors, spacing, fonts, etc.
• Debugging - Catch console errors from both the application's client and server
• Code inspection - Review the AI's implementation for better understanding and manual code edits

See the Dev Tools guide for complete details.