TazeAI Docs
User Guide

UI Overview

TazeAI's interface is designed to be intuitive for designers while providing powerful capabilities for editing React components.

Main Interface Areas

The TazeAI interface is divided into several key areas:

  • Canvas: The central area where you see and interact with your components
  • Layers Panel: Shows the component hierarchy, similar to layers in design tools
  • Properties Panel: Edit properties of the selected component
  • Style Editor: Modify Tailwind styles through a visual interface
  • Code Panel: View and edit the generated code
  • AI Chat: Interact with AI to help generate and modify components
  • Use the Project Selector to switch between projects
  • The File Browser allows you to navigate through your project files
  • The Breadcrumb Navigation shows your current location in the component hierarchy

Keyboard Shortcuts

TazeAI provides various keyboard shortcuts to speed up your workflow:

  • Ctrl/Cmd + S: Save changes
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + Shift + Z: Redo
  • Ctrl/Cmd + C: Copy selected component
  • Ctrl/Cmd + V: Paste component
  • Delete: Remove selected component
  • Escape: Deselect current selection

User Guide

How to use TazeAI effectively

Quickstart

Get up and running with TazeAI quickly