# Documentation

- [@dazl/color-scheme](/docs/additional-resources/color-scheme): A color scheme management library for web applications with support for light/dark themes and automatic system preference detection.
- [Release Notes](/docs/additional-resources/release-notes): What's new in Dazl — features, improvements, and bug fixes.
- [Skills Library](/docs/additional-resources/skills-library): A collection of ready-made agent skills you can download and add to any Dazl project, with setup steps for the Skills & Rules panel.
- [Chat-Driven Editing](/docs/building-with-dazl/design-and-refine/chat-driven-editing): When to use chat instead of visual editing, how to give the AI good context, writing effective prompts, understanding AI responses, and choosing a model.
- [Styling Element States](/docs/building-with-dazl/design-and-refine/styling-element-states): Locking an element into a hover, focus, or active state on the live preview so you can style each state directly.
- [The Action Bar](/docs/building-with-dazl/design-and-refine/the-action-bar): Each section of the Action Bar (knowing where you are, spacing, color, typography, polish, images and icons) and when to reach for it instead of chat.
- [Visual Editing](/docs/building-with-dazl/design-and-refine/visual-editing): How to enter Edit mode, select elements, edit text and images, drag and resize, and what's happening behind the scenes.
- [Working with the Theme](/docs/building-with-dazl/design-and-refine/working-with-the-theme): How design tokens work in a Dazl project, the Color, Typography, and Shadow tabs of the Theme panel, and how to evolve the theme as the project grows.
- [Handing Off to Developers](/docs/building-with-dazl/handoff-and-validation/handing-off-to-developers): Handoff patterns Dazl supports (published preview, downloaded code, GitHub repo, spec, prompt) and how to choose between them.
- [Publishing and Sharing](/docs/building-with-dazl/handoff-and-validation/publishing-and-sharing): Sharing the preview, publishing to a live URL, custom domains, what's included in a publish, and when to use each option.
- [Starting a Project](/docs/building-with-dazl/ideate-and-plan/starting-a-project): There are several ways to begin a new project in Dazl, depending on what you're starting from.
- [Templates](/docs/building-with-dazl/ideate-and-plan/templates): Why templates matter, how to save a project as a template, sharing one with collaborators, and starting a new project from one.
- [Writing Documents](/docs/building-with-dazl/ideate-and-plan/writing-documents): How to write project documents that keep your team aligned and give the AI the context it needs.
- [Inspecting Your Project](/docs/building-with-dazl/iterate-and-collaborate/inspecting-your-project): Opening the Inspect panel, reading the Style and Props tabs, and how inspection persists changes back to the source code.
- [The Elements Tree](/docs/building-with-dazl/iterate-and-collaborate/the-elements-tree): Using the Elements panel's tree view to navigate the page hierarchy, with notes on readable source names and when the tree beats clicking on the preview.
- [Understanding Changes](/docs/building-with-dazl/iterate-and-collaborate/understanding-changes): Reading the History panel, viewing diffs, restoring an older state, and how chat changes show up alongside visual and code edits.
- [Working Together](/docs/building-with-dazl/iterate-and-collaborate/working-together): Invite team members to collaborate on a project in real time, from ideation through handoff.
- [Working with Code](/docs/building-with-dazl/iterate-and-collaborate/working-with-code): Browsing files, the code editor, tabbed and split-screen editing, Quick Open, project-wide search, and when direct code editing makes sense.
- [Add Panel](/docs/feature-reference/add-panel): Add media, icons, and HTML elements to your project. Browse assets, upload files, generate images with AI, and drag elements onto the page.
- [Add-ons](/docs/feature-reference/addons): How add-ons work, the catalog of available libraries, and how to install one in a project.
- [AI Buttons](/docs/feature-reference/ai-buttons): Save reusable AI prompts as buttons that you can trigger from the action bar or the right-click context menu.
- [Canvas](/docs/feature-reference/canvas): A workspace inside your project for planning, ideation, research, and asset generation. Place typed nodes, generate their content with AI, and connect them by reference.
- [Chat](/docs/feature-reference/chat): The Chat panel: threads, conversation history, the prompt box, the model selector, queuing tasks, steering, tool approvals, the variant gallery, and message actions.
- [Collaboration](/docs/feature-reference/collaboration): Inviting collaborators to a project, the online-members indicator, and how credits work across a team.
- [Comments](/docs/feature-reference/comments): Leave feedback on a page or pin it to a specific element in the preview. Collaborators can reply, discuss, and resolve comments in a threaded panel.
- [Component Page](/docs/feature-reference/component-page): The Component page displays your project's entire design system as a live gallery of components, so you can browse and edit them in one place.
- [Dashboard](/docs/feature-reference/dashboard): Reference for every control on the Dashboard — the prompt box, templates, project grid, and user menu.
- [Documents](/docs/feature-reference/documents): Reference for the Documents panel — where you write and manage the markdown documents that describe what you're building.
- [Elements](/docs/feature-reference/elements): The Elements tree view, the context menu, filtering to the current selection, and how readable component names are derived.
- [Files](/docs/feature-reference/files): Browsing project files, opening them in the code editor, uploading new files, the Dev Files toggle, Quick Open, and tabbed editing.
- [GitHub](/docs/feature-reference/github): Connect your Dazl project to a GitHub repository to push and pull commits, giving your engineering team a direct path to the source code.
- [History](/docs/feature-reference/history): Reading the revision timeline, viewing diffs, restoring older versions, and connecting a project to GitHub from the History panel.
- [Inspect](/docs/feature-reference/inspect-panel): How the Inspect panel's Style and Props tabs work: which CSS rules apply, where they come from, and what props each component receives.
- [Integrations](/docs/feature-reference/integrations): Available integrations, connecting an MCP server, adding a custom MCP, and toggling integrations from chat.
- [Keyboard Shortcuts](/docs/feature-reference/keyboard-shortcuts): A reference list of keyboard shortcuts for common editor actions, organized by area: global, stage, elements panel, and file tree.
- [Keys](/docs/feature-reference/keys): Adding, editing, and using environment variables in a project, and when to store something in Keys versus elsewhere.
- [Logs](/docs/feature-reference/logs): The client and server log streams, and how to ask the AI to explain a specific log entry.
- [Media](/docs/feature-reference/media): Browsing project images, replacing or uploading images, generating images with AI, and pasting an external URL, from the Media panel and the standalone media gallery.
- [Pages and Routing](/docs/feature-reference/pages-and-routing): The Pages dropdown in the top bar lists every route in your project, lets you navigate between them, and is where you create new pages and page variants.
- [Plan](/docs/feature-reference/plan): Review and edit a structured project plan before the AI generates code. Define pages, sections, and features upfront.
- [Publishing](/docs/feature-reference/publishing): Publish your project to a live URL that anyone can visit, and optionally connect a custom domain for a polished presentation.
- [Search](/docs/feature-reference/search): Running a project-wide text search, available match options, and how results are grouped.
- [Skills & Rules](/docs/feature-reference/skills-and-rules): Reference for the Skills & Rules panel: the system prompts and skills that shape how the AI behaves in your project.
- [The Editor Layout](/docs/feature-reference/the-editor-layout): How the Editor is laid out: three-column structure, top bar, left sidebar tabs, center area tabs, and the application menu.
- [Theme](/docs/feature-reference/theme): How to use the Theme panel's Color, Typography, Shadow, and Radius tabs to edit your project's design tokens.
- [Visual Editing](/docs/feature-reference/visual-editing): Edit mode in detail: selecting elements, editing text, replacing images, dragging, measuring distances, and the full Action Bar reference.
- [Creating Your Account](/docs/getting-started/creating-your-account): Steps to sign up, log in, and manage your account, plus what's included on the Free plan.
- [The Dashboard](/docs/getting-started/the-dashboard): What's on the Dashboard, how to start a project from the prompt box, and how to manage existing projects.
- [Upgrading to Pro](/docs/getting-started/upgrading-to-pro): Plans and credits compared, how to upgrade, and how to manage or cancel your subscription.
- [What is Dazl?](/docs/getting-started/what-is-dazl): An introduction to Dazl: the workspace, the audience, the product journey it supports, and what makes it different from other AI tools.
- [Your First Project](/docs/getting-started/your-first-project): A step-by-step walkthrough that builds a real project from a prompt and introduces the core editing, inspecting, and sharing flows.
- [Dazl Documentation](/docs): Learn how to plan, design, iterate, and hand off web products with Dazl — the AI-powered platform for product teams.