Custom templates appear in the **+ New** menu alongside the built-in options. Each template can belong to a **group** that defines shared defaults for that document type: display name, icon, default filename, folder, and file extension. This lets teams standardize document types like PRDs, bug reports, or internal instructions.
To turn an existing document into a reusable template, use the context menu on any file in the **Documents panel**.
### Template Editor [#template-editor]
Open a template file to edit it. The template editor shows structured settings at the top (template name, group, and folder override) with the markdown body below. This replaces hand-editing raw frontmatter.
## Editing Documents [#editing-documents]
Click a document to open it as a tab in the **Center area**. The editor is a WYSIWYG markdown editor with a formatting toolbar:
* **Format** dropdown — switch between Paragraph, Heading 1, Heading 2, Heading 3
* **Text formatting** — Bold, Italic, Underline, Strikethrough, Inline Code
* **Blocks** — Code Block, Bullet List, Numbered List
* **Links** — wrap selected text in a markdown link, or paste a URL onto a selection to insert one
* **Tables** — insert and edit markdown tables
The same editor powers **Document nodes** on the [Canvas panel](/docs/feature-reference/canvas), and documents you create as canvas nodes also appear in this panel alongside the rest of your project's documents.
## Attaching Documents to Chat [#attaching-documents-to-chat]
Each file in the panel has an **Attach to Chat Context** button. You can also drag any document directly from the panel into the chat input to give the AI access to its contents.
## Related Articles [#related-articles]
* [Skills & Rules](/docs/feature-reference/skills-and-rules) — prompts and skills that shape AI behavior
* [Writing Documents](/docs/building-with-dazl/ideate-and-plan/writing-documents) — guide to writing effective documents
* [Chat-Driven Editing](/docs/building-with-dazl/design-and-refine/chat-driven-editing) — how the AI uses documents
# Elements (/docs/feature-reference/elements)
The **Elements panel** is a tree of every component on the current page. Use it when an element is hard to click on the preview, or when you want to see how a page is structured before changing it.
## Tree View [#tree-view]
* Component names (e.g., `NavigationHeaderBlock`, `HomeHeroBlock`) and CSS class names displayed in their **original source names**
* Expandable/collapsible hierarchy
* Click a node to select the element on the preview and in the Inspect panel
* Useful for selecting elements that are hard to click directly on the preview
## Filter Selected [#filter-selected]
The **Filter selected** toggle at the top of the panel narrows the tree to show only the selected component and its children. This is useful when you're working inside a deeply nested component and want to focus without the surrounding tree nodes.
## Context Menu [#context-menu]
Right-click any element in the tree to open a context menu with quick actions.
| Action | Shortcut | Description |
| ----------------------- | -------------------- | ------------------------------------------------- |
| **Duplicate** | **Cmd/Ctrl+D** | Copy the element and insert it after the original |
| **Wrap with div** | — | Wrap the element in a new `` container |
| **Select parent** | **Shift+↑** | Move the selection up to the parent element |
| **Add to chat context** | **Alt/Option+Click** | Attach the element as context in the Chat prompt |
| **View code** | — | Open the element's source file in the code editor |
| **Delete** | **Backspace** | Remove the element from the page |
## Related Articles [#related-articles]
* [The Elements Tree](/docs/building-with-dazl/iterate-and-collaborate/the-elements-tree) – guide to using the elements tree
* [Inspecting Your Project](/docs/building-with-dazl/iterate-and-collaborate/inspecting-your-project) – see styles and props for selected elements
# Files (/docs/feature-reference/files)
The **Files panel** is a file explorer for your project. Click any file to open it in the code editor, drag a file or folder into chat as context, or use it as the entry point for direct code edits.
## File Tree [#file-tree]
The panel shows the full directory structure of your project. Folders appear before files, and items are sorted alphabetically. Click any file to open it in the code editor.
## Uploading Files [#uploading-files]
Click **Upload files** in the Files panel header to add files from your computer. Uploaded files are saved to the `my-files` folder automatically.
## Dev Files Toggle [#dev-files-toggle]
The **Dev files** toggle in the Files panel header shows or hides advanced developer files (such as configuration files at the project root). These files are hidden by default.
## Quick Open [#quick-open]
Press **Cmd+P** (Mac) or **Ctrl+P** (Windows) to open the Quick Open dialog. Start typing a filename and the list filters in real time using fuzzy matching. This is a fast way to jump to any file without browsing the tree.
## Code Editor [#code-editor]
Files open in a tabbed code editor in the center area, alongside the Preview tab. The editor includes:
* **Syntax highlighting** for TypeScript, CSS, JSON, and other languages
* **Line numbers** in the left gutter
* **Code folding** to collapse and expand blocks
You can edit code directly in the editor. Changes are saved automatically and reflected in the preview.
## Tabbed Editing [#tabbed-editing]
The center area works like a tabbed editor. You can have multiple files and the Preview open as tabs simultaneously.
Tabs follow a dynamic-until-pinned system:
* Opening a file replaces the current unpinned tab (shown in *italic* text)
* **Double-click** a tab to pin it (it switches to normal text and stays open)
* Making an edit to a file automatically pins its tab
## Related Articles [#related-articles]
* [Working with Code](/docs/building-with-dazl/iterate-and-collaborate/working-with-code) – guide to browsing and editing code
* [Search](/docs/feature-reference/search) – search across file contents
# GitHub (/docs/feature-reference/github)
Connect your project to a GitHub repository to push and pull commits without leaving the editor — the most direct way to hand off working code to your engineering team.
## Connecting to GitHub [#connecting-to-github]
The **GitHub** button appears in two places: the top bar and the **History panel** header. Click either one to start — you'll be prompted to sign in with your GitHub account, then the button changes to **Create repository**. Click it to open the **Create Repository** dialog.
You need a GitHub account to use this feature. If you don't have one, create
one at [github.com](https://github.com).
In the Create Repository dialog, fill in the details:
* **Repository name** — defaults to your project name. Only letters, numbers, hyphens, underscores, and dots are allowed.
* **Owner** — select the GitHub account or organization that will own the repo.
* **Description** (optional) — a short summary of the repository.
* **Private** — toggle on to keep the repo visible only to you and collaborators. On by default.
Click **Connect repository** to create the repo and link it to your project. Once connected, the GitHub button becomes a Sync button for pushing and pulling.
## Disconnecting from GitHub [#disconnecting-from-github]
To unlink your Dazl project from its GitHub account, open the **History panel** and click the chevron next to the GitHub button in the panel header. Choose **Remove connection** from the menu — the repository stays intact on GitHub; only the link between Dazl and your GitHub account is removed.
## Pushing Commits [#pushing-commits]
After connecting, click the Sync button (in the top bar or the **History panel** header) to push your latest changes as a commit. Each push sends the current state of your project to the connected repository.
This is the most direct handoff option. Your engineering team works from the same repo and can pick up exactly where you left off. The code is readable, structured, and uses standard web technologies.
## Pulling Changes [#pulling-changes]
If changes have been made to the repo outside of Dazl, click the Sync button (in the top bar or the **History panel** header) and pull to bring them into your project. This keeps the Dazl project in sync with work happening elsewhere.
## Working with External Tools [#working-with-external-tools]
Once your project is connected to a repo, anyone on the team can clone it and work with their preferred tools — a local IDE, Claude Code, Cursor, or any other development environment. Push changes from those tools, then pull them back into Dazl to continue iterating visually.
This makes GitHub the bridge between Dazl's visual, AI-assisted workflow and the broader development toolchain your team already uses. For real-time collaboration inside the Dazl editor, see [Collaboration](/docs/feature-reference/collaboration).
## When to Use GitHub [#when-to-use-github]
GitHub is best suited for teams where:
* Engineering works from the same codebase the prototype was built in
* The team wants a shared repository as the single source of truth
* Team members want to use their own editors or AI coding tools alongside Dazl
* You need version-controlled handoff rather than a file download or published URL
For other handoff approaches (sharing a published URL, exporting documents, or downloading the project), see [Handing Off to Developers](/docs/building-with-dazl/handoff-and-validation/handing-off-to-developers).
## Related Articles [#related-articles]
* [Handing Off to Developers](/docs/building-with-dazl/handoff-and-validation/handing-off-to-developers) – all handoff options compared
* [History](/docs/feature-reference/history) – the revision timeline where GitHub Connect also appears
* [Publishing](/docs/feature-reference/publishing) – share a live URL for demos and validation
# History (/docs/feature-reference/history)
Every change in your project is recorded, whether it came from the AI, visual editing, or a direct code edit. The **History panel** is where you replay that record, see what each change did, and roll back if needed.
## GitHub Connect [#github-connect]
The **GitHub Connect** link appears in the panel header when your project is not yet connected to a GitHub repository. Click it to connect — once linked, you can push and pull commits from the top bar's **GitHub** button.
## Revision Timeline [#revision-timeline]
Revisions are grouped by date. Each entry shows:
* **Title** — description of the change
* **AI / Manual label** — source of the change
* **Timestamp**
* **View changes** — opens a diff showing exactly what was modified
* **Restore** — rolls the project back to this revision
## Viewing Diffs [#viewing-diffs]
Click **View changes** on any revision to see a side-by-side comparison of the code that was added, removed, or modified.
## Related Articles [#related-articles]
* [Understanding Changes](/docs/building-with-dazl/iterate-and-collaborate/understanding-changes) – how to use history effectively
# Inspect (/docs/feature-reference/inspect-panel)
The **Inspect panel** shows what's behind the element you're looking at. Open it on any selection and you can read the active CSS rules, the props passed in, and the source they come from.
## Style Tab [#style-tab]
Shows every CSS rule affecting the selected element, ordered from most specific to least specific. Rules are grouped by source file:
* **Project stylesheets** – your component and page styles (e.g., `home-hero-block.module.css`, `home.module.css`)
* **Theme files** – design tokens defined in `theme.css`, `colors.css`, `typography.css`, `spacings.css`, `decorations.css`, `animations.css`
* **Reset and base styles** – `reset.css`, `global.css`
* **User agent stylesheet** – browser default rules (read-only)
Click any value to **edit it inline**. Changes are written directly to the source file.
The Style tab also shows **inherited styles** from parent elements (e.g., "Inherited from body", "Inherited from html.light-theme"), so you can trace where a style originates.
## Props Tab [#props-tab]
Shows React component props for the selected element:
* Prop name and current value
* **Inline values** (strings, numbers, objects, arrays) can be edited directly in the text input
* **Bound expressions** (e.g., `{styles.homeheroblock}`) show the expression and possibly the runtime value, but should be changed through the AI chat instead
### Adding Props [#adding-props]
Use the **Add property** field at the top of the Props tab to pick from a list of the component's available props. Start typing to narrow the list.
## Opening the Inspect Panel [#opening-the-inspect-panel]
Click the **Inspect** button in the top-right area of the top bar. Select an element in **Edit mode** to see its details.
## Related Articles [#related-articles]
* [Inspecting Your Project](/docs/building-with-dazl/iterate-and-collaborate/inspecting-your-project) – guide to using inspection effectively
* [The Elements Tree](/docs/building-with-dazl/iterate-and-collaborate/the-elements-tree) – navigate the component hierarchy
* [Visual Editing](/docs/building-with-dazl/design-and-refine/visual-editing) – edit the elements you're inspecting
# Integrations (/docs/feature-reference/integrations)
The **Integrations panel** connects your project to external services like databases, design tools, and issue trackers, so the AI can read from and act on them as part of a conversation. It has two tabs: **Integrations** for MCP connections, and **Add-ons** for library recipes (covered in a [separate article](/docs/feature-reference/addons)).
## Available Integrations [#available-integrations]
### Supabase [#supabase]
Connects your project to a Supabase backend for:
* **Database** – store and query data
* **Authentication** – user sign-up, login, and session management
* **Storage** – file and asset management
Once connected, the AI can create database-backed features, authentication flows, and data-driven pages. You can also create a new Supabase project directly from Dazl after connecting your account. Learn more at [supabase.com](https://supabase.com).
### Figma [#figma]
Import frames and designs from Figma directly into Dazl. The AI uses the design as a reference to generate working code that matches your layout and styling. Learn more at [figma.com](https://www.figma.com).
### Google Sheets [#google-sheets]
Connect a Google Sheets account to read spreadsheet data into your project or create new spreadsheets from your project's content. For example, import a product catalog to populate a listing page, pull in user research data to build a dashboard, or export a feature comparison table from your prototype.
### Google Docs [#google-docs]
Connect a Google Docs account to pull in document content as reference or create new documents from your project's content. For example, feed a PRD into the chat so the AI builds to spec, import landing page copy from a shared doc, or generate a handoff document describing what was built.
### Google Slides [#google-slides]
Connect a Google Slides account to reference presentation content or create new slides from your project. For example, reference a pitch deck for design direction, or generate a stakeholder update with screenshots and descriptions of what you've built.
### Jira [#jira]
Connect a Jira instance to read, reference, and update issues, bugs, and sprints from the chat. For example, pull a ticket's context into a session before making a change, or log follow-up work without leaving Dazl. Learn more at [atlassian.com/software/jira](https://www.atlassian.com/software/jira).
The Jira connection requires your **Jira Subdomain** — the part of your Jira URL before `.atlassian.net`. For example, if your URL is `mycompany.atlassian.net`, the subdomain is `mycompany`.
### Confluence [#confluence]
Connect a Confluence workspace to create, search, and manage pages and spaces from the chat. For example, pull a feature spec or research summary into a conversation as context, or generate a handoff page after a session. Learn more at [atlassian.com/software/confluence](https://www.atlassian.com/software/confluence).
The Confluence connection requires your **Confluence Subdomain** — the part of your Confluence URL before `.atlassian.net`. For example, if your URL is `mycompany.atlassian.net`, the subdomain is `mycompany`.
### Linear [#linear]
Connect a Linear workspace to create and manage issues and projects from the chat. For example, pull ticket context into a session before making a change, or log follow-up work without leaving Dazl. Learn more at [linear.app](https://linear.app).
### Miro [#miro]
Connect Miro to work with whiteboards, diagrams, and sticky notes from the chat. For example, reference a flow from a Miro board when iterating on a page, or capture ideas to a shared board during a working session. Learn more at [miro.com](https://miro.com).
### Notion [#notion]
Connect Notion to read and create pages and databases from the chat. For example, pull a PRD into the conversation as reference, or generate a handoff page after a session that describes what was built. Learn more at [notion.so](https://www.notion.so).
## Custom MCP [#custom-mcp]
Click **+ Add Custom MCP** at the top-right of the **Integrations panel** to connect your own MCP server or a third-party MCP service.
Provide:
* **Name** — a label for the integration (shown in the Integrations panel)
* **URL** — the MCP server endpoint
* **Authentication Type** — choose **OAuth / None**, **Bearer**, or **Headers** depending on how the server authenticates
Click **Enable** to connect. Once enabled, the AI can use the tools and resources provided by your MCP server when making changes to your project.
### Config file [#config-file]
You can also register custom MCP servers in `dazl.config.json` at the project root. Add a top-level `mcpServers` object:
```json
{
"mcpServers": {
"myServer": {
"url": "https://example.com/mcp",
"headers": {
"X-API-Key": "${MCP_MY_SERVER_X_API_KEY}"
}
}
}
}
```
Supported fields per server:
* `url` (required): absolute HTTP/HTTPS URL of the MCP server
* `headers` (optional): request headers as name/value pairs
Header values can reference an environment variable using `${VAR_NAME}` syntax, so you don't hardcode secrets in `dazl.config.json`. Store the value in the **Keys panel** (written to your project's `.env` file) and reference it by name.
See [Keys](/docs/feature-reference/keys) for managing environment variables.
`mcpServers` entries are merged with built-in MCP servers. If a custom server name collides with a built-in one, your custom server takes precedence.
## Toggling Integrations from Chat [#toggling-integrations-from-chat]
You can enable or disable integrations without leaving the **Chat panel**. Click the **MCP toggles** button in the prompt box to open a popover listing all connected servers with on/off switches.
## Related Articles [#related-articles]
* [Starting a Project](/docs/building-with-dazl/ideate-and-plan/starting-a-project) – all the ways to begin a new project
* [Add-ons](/docs/feature-reference/addons) – library integrations (different from MCP integrations)
* [Pages and Routing](/docs/feature-reference/pages-and-routing) – dynamic pages powered by Supabase data
# Keyboard Shortcuts (/docs/feature-reference/keyboard-shortcuts)
Most of the editor's frequent actions have a keyboard shortcut. The full list is available anytime via **Shift+?** or **Project menu > Keyboard Shortcuts** (click the project name in the top-left corner).
## Global [#global]
| Action | Mac | Windows/Linux |
| ------------------- | --------------- | ---------------- |
| Undo | **Cmd+Z** | **Ctrl+Z** |
| Redo | **Cmd+Shift+Z** | **Ctrl+Shift+Z** |
| Toggle Editing Mode | **Cmd+E** | **Ctrl+E** |
| Quick Open File | **Cmd+P** | **Ctrl+P** |
| Global Search | **Cmd+Shift+F** | **Ctrl+Shift+F** |
| Keyboard Shortcuts | **Shift+?** | **Shift+?** |
## Stage [#stage]
These shortcuts apply when working with elements on the preview canvas.
| Action | Mac | Windows/Linux |
| ------------------- | ------------- | -------------- |
| Delete Item | **Backspace** | **Delete** |
| Select Parent | **Shift+Up** | **Shift+Up** |
| Duplicate | **Cmd+D** | **Ctrl+D** |
| Clear Selection | **Escape** | **Escape** |
| Add to Chat Context | **Cmd+Click** | **Ctrl+Click** |
| Measure Distances | **Alt+Hover** | **Alt+Hover** |
## Elements Panel [#elements-panel]
These shortcuts apply when navigating the Elements tree.
| Action | Shortcut |
| ------------------- | ---------------------------------------------- |
| Navigate Up | **Up Arrow** |
| Navigate Down | **Down Arrow** |
| Expand Node | **Right Arrow** |
| Collapse Node | **Left Arrow** |
| Clear Selection | **Escape** |
| Add to Chat Context | **Cmd+Click** (Mac) / **Ctrl+Click** (Windows) |
## File Tree [#file-tree]
These shortcuts apply when navigating the Files panel.
| Action | Shortcut |
| ------------- | --------------- |
| Rename File | **Enter** |
| Previous File | **Up Arrow** |
| Next File | **Down Arrow** |
| Open Folder | **Right Arrow** |
| Close Folder | **Left Arrow** |
| Select File | **Space** |
## Related Articles [#related-articles]
* [The Editor Layout](/docs/feature-reference/the-editor-layout) – overview of the workspace
* [Visual Editing](/docs/feature-reference/visual-editing) – editing elements on the canvas
* [Elements](/docs/feature-reference/elements) – the Elements tree panel
* [Files](/docs/feature-reference/files) – the Files panel
# Keys (/docs/feature-reference/keys)
The **Keys panel** is where your project's secrets live: API keys, database credentials, tokens. Values stored here are available to server code at runtime without being shown to the AI or written into the codebase.
## Adding a Key [#adding-a-key]
1. Click **Add New** in the Keys panel
2. In the **Add Environment Variables** dialog, choose **Single Variable** or **Bulk Paste**
3. Enter the variable name (e.g., `GOOGLE_MAPS_API_KEY`) and its value
4. Click **Add Variable**
The variable is securely stored and accessible in your project's server-side code as an environment variable. Values are masked by default; click the eye icon next to a key to reveal it, or use **Reveal All** in the panel header to show every value at once.
Keys are stored in a `.env` file and are not exposed to the AI. This keeps sensitive credentials like API keys and database connection strings separate from your application code.
## When to Use Keys [#when-to-use-keys]
* **API keys** for third-party services (e.g., Stripe, OpenAI, Google Maps)
* **Database connection strings** for external databases
* **Service credentials** that your project's server needs at runtime
## Related Articles [#related-articles]
* [Integrations](/docs/feature-reference/integrations) – connecting to external services
* [Logs](/docs/feature-reference/logs) – debugging server-side issues related to credentials
# Logs (/docs/feature-reference/logs)
The **Logs panel** shows runtime output from your project: what the browser console and server processes are emitting in real time. It's the first place to look when something behaves unexpectedly in the preview.
## Log Streams [#log-streams]
The panel is split into two sections:
* **Client Logs** – browser-side output (console messages, JavaScript errors)
* **Server Logs** – server-side output (API requests, server errors, startup messages)
Each section has a **Preserve log** checkbox. When enabled, logs persist across page reloads instead of being cleared.
## AI-Assisted Debugging [#ai-assisted-debugging]
Each log entry has an **"Ask AI to explain this"** button. Click it to have the AI analyze the message and explain what's happening. If the message is an error, the AI can suggest a fix or attempt a resolution directly.
This is one of Dazl's contextual AI experiences — localized AI help that works within the panel, without needing to switch to the Chat panel or write a prompt.
## Related Articles [#related-articles]
* [Chat-Driven Editing](/docs/building-with-dazl/design-and-refine/chat-driven-editing) – using the main chat for debugging
* [Keys](/docs/feature-reference/keys) – manage environment variables that may affect server behavior
# Media (/docs/feature-reference/media)
The **Media panel** opens whenever you select an image element. From it you can swap an image, generate a new one with AI, browse what's already in the project, or paste a URL. None of it requires leaving the live preview.
You can also browse media without selecting an element first. The media gallery dialog (accessible from the [Add Panel](/docs/feature-reference/add-panel) in the left sidebar) includes the same search, upload, image generation, and chat-context attachment capabilities as the toolbar Media panel.
## Project Media [#project-media]
The **Project Media** tab scans your project and displays all images currently in use as thumbnails. Click any image to use it for the selected element. Each image also has a delete button to remove it from the project. If the image is referenced elsewhere in the project, Dazl prevents the deletion and shows a notification so you don't end up with broken references.
Two action buttons appear at the top of this tab:
* **Upload** – add a new image from your computer
* **Generate** – create a new image using AI (see below)
### Generate an Image [#generate-an-image]
Clicking **Generate** opens a modal with a prompt field where you describe the image you want. Below the prompt you can configure:
* **Model** – choose which AI image model to use. Available models include Imagen 4 Fast, Imagen 4, Imagen 4 Ultra, Gemini 3.1 Flash (Nano Banana 2), and Gemini 3 Pro (Nano Banana Pro)
* **Style** – select a visual style for the generated image
* **Aspect ratio** – set the dimensions (e.g., 1:1, 16:9)
* **Remove background** – produce the image with a transparent background, useful for icons, product cutouts, and overlays
The modal shows the credit cost per generation and a preview area. Once generated, click **Apply image** to use it for the selected element. Generated images are auto-saved to your project.
## URL [#url]
The **URL** tab lets you enter a URL to use an externally hosted image. This is useful for pulling in images from a CDN, a design tool, or any public URL.
## SVG Elements [#svg-elements]
When you select an **SVG element** (such as an icon) instead of an image, the **Media** control is replaced by an **SVG Element** control in the Action Bar. This panel lets you browse the project's icon library and replace the selected icon with a different one. Dazl auto-detects whether the project uses Lucide or Tabler and shows icons from that library. Double-clicking an SVG element in the preview opens this panel directly.
{/* TODO: Add screenshot of the SVG Element panel showing the icon browser */}
## Related Articles [#related-articles]
* [Add Panel](/docs/feature-reference/add-panel) – browse all project media from the sidebar and attach images to chat
* [The Action Bar](/docs/building-with-dazl/design-and-refine/the-action-bar) – all Action Bar controls including Media
* [Visual Editing](/docs/building-with-dazl/design-and-refine/visual-editing) – double-click images to open the Media panel
# Pages and Routing (/docs/feature-reference/pages-and-routing)
The **Pages dropdown** in the top bar lists every route in your project. It's where you navigate between routes in the preview, and where you create new pages and variants of existing pages.
## Page List [#page-list]
* Current page shown with a **checkmark**
* Dynamic route parameters shown in code style (e.g., `tracking /` `deliveryId`)
* **Warning icon** on dynamic routes with unresolved parameters
* Page variants appear nested under their parent route with a distinct variant icon
* Click any page to navigate the preview to that route
## Creating a New Page [#creating-a-new-page]
Click **+ New page** at the bottom of the **Pages dropdown** to open the **New Page** dialog.
Pick a **template** for the kind of page you want: Blank page, Landing page, Dynamic page, Presentation page, common pages like About, Contact, Pricing, FAQ, and Terms & Privacy, plus auth and app pages. Add optional **instructions** to steer the AI further (for example, "a hero section with a product grid below"). Click **Create** and the AI generates the route, file, and initial content.
Use this when you want a brand-new route in your project, like a marketing page, a settings page, or a new flow. For redesigning an existing page without losing the original, use a [variant](#page-variants) instead.
## Page Variants [#page-variants]
A **page variant** is an alternate version of an existing page. You can use variants to explore a different layout, copy direction, or interaction model without overwriting the original. The original and the variant exist side by side, each at its own route.
To create a variant, hover an existing page in the **Pages dropdown** and click the **Create variant** icon on the right of the row.
The **New Page Variant** dialog opens.
Fill in:
* **Variant name** — a short identifier. Dazl previews the resulting route below the field (for example, `/checkout` becomes `/checkout.variant.horizontal-scroll`).
* **Customization level** — choose between **Subtle tweaks**, **Moderate redesign**, or **Complete redesign**. The level shapes how aggressively the AI departs from the original.
* **Instructions** *(optional)* — extra direction for the AI, such as "do a horizontal scroll redesign" or "use a single-column layout".
Click **Create** and the AI generates the variant as a new route. The variant appears nested under its parent in the **Pages dropdown** with a distinct variant icon, so it's clear which page it's a variant of.
Variants are first-class routes. Click one to open it in the preview and edit it like any other page. You can keep multiple variants in a project, share previews of each, and decide later which one to keep.
Variants work for nested and dynamic routes too. The variant suffix attaches to the last static segment, so `/products/:productId` becomes `/products.variant.alt/:productId` and continues to receive its dynamic parameters as before.
## Dynamic Pages [#dynamic-pages]
Dazl recognizes dynamic routes in your project — pages where the URL contains a variable parameter (e.g., a product ID or user ID).
If a dynamic route doesn't have resolved parameter values yet, the Pages dropdown shows a **warning icon** next to it. Click it and Dazl asks for confirmation before the AI analyzes your route configuration and data and creates a **route description** — a file that maps the dynamic parameter to real values from your project. For example, a `/tracking/:deliveryId` route might get a route description that suggests three deliveries from your mock data, each with a descriptive title like "Buddy – In Transit" or "Whiskers – Completed."
Once the route description is created, the dynamic route expands into a **submenu** in the Pages dropdown, listing each suggested value. Click any one to navigate the preview to that specific page. The submenu also includes a **Refresh data** option to re-fetch the suggested values.
If a resolved route points to a 404 or returns an error, a **Fix with AI** button appears next to it. Click it and the AI updates the route description to use valid values.
When connected to a database through Supabase, Dazl can resolve parameter values from live data instead of mock data, letting you preview data-driven pages with real content.
## Dev Routes [#dev-routes]
Dev routes are pages that exist only during development — admin panels, CMS interfaces, data management tools. You create them by asking the AI in chat (e.g., "add a dev route for managing localization strings"). They're visible in the editor but **excluded from the published project**.
This lets non-technical team members manage application data through a friendly interface. For example, you could ask the AI to build a localization editor or a content management panel that your team uses during development, without it appearing in the final published prototype.
Dev routes are a way to build internal tooling alongside your interactive prototype. A PM can create a CMS to manage product data without needing to use developer-oriented tools like a Supabase dashboard directly.
## Related Articles [#related-articles]
* [Publishing](/docs/feature-reference/publishing) – dev routes are excluded from published projects
* [Integrations](/docs/feature-reference/integrations) – Supabase for database-driven dynamic pages
# Plan (/docs/feature-reference/plan)
The **Plan** toggle on the **Dashboard** prompt box lets you review and shape a structured project plan before the AI generates any code.
**Plan** is different from the **Canvas panel**. Plan generates a working project from a structured plan you can edit. The [Canvas panel](/docs/feature-reference/canvas) is an open-ended workspace for the research, design variants, and assets that surround a project, not a way to generate one.
## How It Works [#how-it-works]
1. Enable the **Plan** toggle in the Dashboard prompt box
2. Type your prompt and send it
3. Answer a few clarifying questions in the interview
4. Choose **Create a plan** to generate a structured plan, or **Skip to prototype** to generate the project directly
5. If you create a plan, edit it until you're satisfied, then click **Build**
## The Interview [#the-interview]
When you send your prompt with **Plan** enabled, the AI starts by asking a few clarifying questions about what you're building. Your answers give it the context to assemble a more accurate plan.
Questions appear one at a time in the **Chat panel**. Each one offers a set of choices, or you can select "Or type your own" to answer in your own words.
For each question:
* **Submit** sends your answer and moves to the next question
* **Skip** moves past a question without answering it
* **Finish Interview** ends the interview early and lets the AI build the plan from what it has so far
As you answer, your responses collect in the **Plan** tab in the center area, building the context for the plan.
When the AI has enough to work with, it ends the interview and summarizes the requirements it captured. From there, choose how to proceed:
* **Create a plan** turns the captured requirements into a structured, editable plan
* **Skip to prototype** skips planning and starts generating the project right away
## Plan Structure [#plan-structure]
A plan includes three parts:
### Pages [#pages]
Each page has:
* **Title** — the page name (e.g., "Home", "About Us")
* **Description** — what the page covers and its purpose
* **URL** — the route for the page
* **Sections** — the building blocks of the page, listed in order
You can add, remove, and reorder sections within each page. Click **+ Add** to create additional pages.
### Features [#features]
Feature cards describe the key capabilities of the project. Each card has a title and description. You can add, remove, or edit features to match what you're building.
### Theme Guidelines [#theme-guidelines]
Design direction for the AI to follow when generating the project — visual tone, color direction, and typography guidance.
### Image Preferences [#image-preferences]
Choose the kind of imagery the AI uses across the project:
* **Stock photos** — pulls real photos from a stock library
* **AI-generated** — generates custom images with an image model (consumes credits)
When **AI-generated** is selected, a **Model** picker appears so you can pick the image model.
## Editing the Plan [#editing-the-plan]
Every part of the plan is directly editable. Click any title or description to rewrite it. Use the arrow buttons to reorder sections, and the delete button to remove items you don't need.
You can also use the **Chat** to ask the AI for changes. The prompt box shows "Ask for plan changes or edit it yourself" while in plan mode. For example, ask the AI to add a new page, restructure sections, or change the design direction.
## Adjusting the Project Mid-Plan [#adjusting-the-project-mid-plan]
While Plan mode is open, the **left sidebar** stays accessible so you can adjust the project around the plan. Switch to the **Integrations panel** to enable MCPs, the **Files panel** to upload files, or the **Canvas panel** to gather research and design exploration alongside your plan. Panels that don't apply during plan editing are disabled.
## Validation [#validation]
The plan is validated before building. If there are errors — such as missing descriptions or invalid configurations — they are highlighted by section so you can find and fix them. The **Build** button is disabled until all errors are resolved.
## Building [#building]
When the plan looks right, click **Build** to generate the project. The AI uses the plan as a specification, creating pages, components, and styling that match what you defined.
## Related Articles [#related-articles]
* [Starting a Project](/docs/building-with-dazl/ideate-and-plan/starting-a-project) – all the ways to begin a new project
* [Writing Documents](/docs/building-with-dazl/ideate-and-plan/writing-documents) – guide the AI with structured specifications
* [Chat](/docs/feature-reference/chat) – the AI conversation panel
# Publishing (/docs/feature-reference/publishing)
The **Publish** button in the top-right corner of the editor gives your project a permanent, publicly accessible URL on `dazl.live`. Unlike the preview URL (which requires the project's server to be running), a published URL stays available independently of your editing session.
## Publishing a Project [#publishing-a-project]
Click **Publish** in the top bar to open the Publish dialog.
Click **Publish** in the dialog to start the build. Dazl builds and publishes your project, which takes a few seconds. Once complete, the dialog shows the live URL and a **Live** badge.
The published URL follows the pattern `project-name-XXXX.dazl.live`. You can click the URL to open it in a new tab, or use the copy button to share it.
## Updating a Published Project [#updating-a-published-project]
After making changes in the editor, open the Publish dialog and click **Update** to push the latest version to your live URL. The same URL stays active — anyone with the link sees the updated version after the build completes.
## Unpublishing [#unpublishing]
To unpublish your project, open the Publish dialog, click the **three-dot menu** next to the URL, and select **Unpublish**. The live URL is deactivated and visitors can no longer access the published version. You can publish it again at any time.
## Custom Domains [#custom-domains]
For a more polished presentation URL, publish your project first, then click **Connect Custom Domain** in the Publish dialog. This opens a guided setup powered by Entri that walks you through configuring your domain's DNS settings, no developer needed.
Custom domains are a [Pro feature](/docs/getting-started/upgrading-to-pro).
## What Gets Published [#what-gets-published]
Publishing serves the same application you see in the editor — the same code, the same behavior. It is not a simplified or stripped-down version.
Dev routes are excluded from the published version. Pages marked as development-only (admin panels, data management interfaces) don't appear in the published project. See [Pages and Routing](/docs/feature-reference/pages-and-routing) for more on dev routes.
## Related Articles [#related-articles]
* [Publishing and Sharing](/docs/building-with-dazl/handoff-and-validation/publishing-and-sharing) – sharing previews vs. publishing for stakeholder demos
* [Pages and Routing](/docs/feature-reference/pages-and-routing) – dev routes and dynamic pages
* [Handing Off to Developers](/docs/building-with-dazl/handoff-and-validation/handing-off-to-developers) – going beyond sharing to production handoff
# Search (/docs/feature-reference/search)
When you're looking for a specific string across a project, the **Search panel** is faster than browsing the file tree. Type a query and matches appear grouped by file.
## Search Options [#search-options]
Three toggle buttons next to the search box control how matching works:
* **Match Case** – toggle case-sensitive search
* **Match Whole Word** – match complete words only
* **Use Regular Expression** – use regex for pattern matching
## Results [#results]
A summary line shows the total number of results and files matched (e.g., "6 results in 5 files"). Results are grouped by filename, with each file showing a match count. Expand a file group to see individual matches with line and column numbers and a preview of the matching line.
Click any result to open the file in the code editor at that line.
## Related Articles [#related-articles]
* [Files](/docs/feature-reference/files) – browse the file tree
* [Working with Code](/docs/building-with-dazl/iterate-and-collaborate/working-with-code) – editing code directly
# Skills & Rules (/docs/feature-reference/skills-and-rules)
The **Skills & Rules panel** is where you control how the AI behaves in your project. It holds two kinds of files: prompts that define general agent behavior, and skills that focus the AI on a specific topic when relevant.
## Prompts [#prompts]
Prompts live in the project's `Prompts/` folder and ship with every new project. They cover broad agent behavior — coding conventions, design tokens, component structure, routing patterns, content generation, and similar guidance that applies across most tasks.
The AI reads these prompts as part of its system context, so changes here affect every subsequent generation in the project. Edit them when you want to adjust how the AI works across the board.
Click a prompt in the panel to open it in the editor. The editor is a WYSIWYG markdown editor — the same one used for documents.
## Skills [#skills]
Skills give the AI specialized expertise on demand. A skill can hold writing style, accessibility rules, domain terminology, step-by-step workflows, or any reusable instructions you'd otherwise repeat across prompts. Unlike prompts (which apply to all work) or documents (which describe what you're building), a skill focuses the AI on a single topic or task and is loaded only when relevant.
See the [Skills Library](/docs/additional-resources/skills-library) for ready-made skills you can download and add to your project.
### Creating a Skill [#creating-a-skill]
Click **Add** at the top of the panel and select **Skill**. A new skill opens in the editor with two settings fields and a content area.
To bring in a skill written elsewhere, click the **Upload skill files** button in the **Skills** section header and select one or more markdown files. The skill's name and description are read from the file.
### Editing a Skill [#editing-a-skill]
Click a skill in the panel to open it as a tab in the **Center area**. The skill editor has three parts:
* **Name** — a short identifier for the skill (used as the file name)
* **Description** — a one-line summary of what the skill covers. The AI reads this to decide when the skill is relevant.
* **Content area** — a WYSIWYG markdown editor where you write the skill's instructions, guidelines, or reference material
### Managing Skills [#managing-skills]
Each skill in the **Skills** section has controls to attach it to chat context, view its source file, or delete it.
## Using Prompts and Skills as Context [#using-prompts-and-skills-as-context]
Each file in the panel has an **Attach to Chat Context** button. Click it to attach the file to the current chat conversation, giving the AI direct access to its contents on the next prompt. You can also drag any file from the panel into the chat input.
Skills are also loaded automatically when their description matches what you're asking the AI to do.
## Related Articles [#related-articles]
* [Skills Library](/docs/additional-resources/skills-library) — ready-made skills to download and add to your project
* [Documents](/docs/feature-reference/documents) — markdown documents and templates that describe what you're building
* [Chat-Driven Editing](/docs/building-with-dazl/design-and-refine/chat-driven-editing) — how the AI uses context when making changes
* [Writing Documents](/docs/building-with-dazl/ideate-and-plan/writing-documents) — guide to writing effective documents
# The Editor Layout (/docs/feature-reference/the-editor-layout)
The **Editor** is where you actually build, edit, and inspect a Dazl project. It opens whenever you click a project from the Dashboard. Most articles in this section dig into a specific panel or tab; this one is a map of the whole layout.
## Three-Column Layout [#three-column-layout]
| Area | Description |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Left sidebar** | Tab icons along the edge, with the active panel's content beside them. 14 tabs, some pinned by default and others available through the **Organize panels** menu. |
| **Center area** | A tabbed container holding the Preview, code editor tabs, and document editor tabs. |
| **Inspect** (optional) | Opens on the right when you click **Inspect** in the top bar. Shows Style and Props tabs. |
## Top Bar [#top-bar]
The top bar spans the full width of the editor:
| Element | Location | Description |
| ------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------- |
| **Project menu** | Top-left | App icon + project name + chevron. Opens the application menu. |
| **Edit / Preview toggle** | Top-center-left | Segmented control to switch between selecting elements for editing and interacting with the live app. |
| **Pages dropdown** | Top-center | Navigate between pages and routes in your project. |
| **Components** | Top-center | Opens the [Component page](/docs/feature-reference/component-page) — a live gallery of your project's design system. |
| **URL bar** | Top-center | Shows a simplified version of the current URL. Click to focus and see the full URL. |
| **Reload** | Top-center-right | Refreshes the preview. |
| **Responsive buttons** | Top-center-right | Resize the viewport. |
| **Online members** | Top-right | Shows avatars of collaborators currently connected to the project. Click to see the full list. |
| **Share** | Top-right | Opens the Share dialog to [invite collaborators](/docs/feature-reference/collaboration) by email. |
| **GitHub** | Top-right | Connect your project to a GitHub repo. Push and pull commits without leaving the editor. |
| **Comments** | Top-right | Opens the [Comments panel](/docs/feature-reference/comments) for leaving feedback. |
| **Inspect** | Top-right | Toggles the Inspect panel on the right side. |
| **Publish** | Top-right | Opens the Publish dialog. |
## Left Sidebar Tabs [#left-sidebar-tabs]
14 tabs in total. Pinned tabs appear in the sidebar rail, each showing its icon and title. Click a tab to switch panels.
Use the collapse button at the bottom of the rail to switch to a compact, icons-only view, and expand it again to bring the titles back. Dazl remembers your choice.
**Pinned by default:** Chat, Add, History, Elements, Documents, Skills & Rules, Integrations, Theme, Files, Canvas
**Unpinned by default:** AI Buttons, Search, Logs, Keys
### Organizing Panels [#organizing-panels]
Click the ellipsis icon at the bottom of the tab rail to open the **Organize panels** menu. From here you can pin or unpin any tab, and drag to reorder them.
## Center Area Tabs [#center-area-tabs]
The center area uses a **dynamic-until-pinned** tabbing system (similar to VS Code):
* The **Preview** tab is always available
* Opening a file or document creates a new tab
* Unpinned tabs (shown in *italic*) are replaced when you open something else
* **Double-click** a tab, start typing, or edit its content to pin it (shown in normal text)
### Split-Screen View [#split-screen-view]
Open a code or document tab alongside the Preview to work in a split-screen layout. The Preview stays on the left while the code editor appears on the right, so you can see changes reflected in real time as you read or edit the source.
## Application Menu [#application-menu]
Click the **project name** in the top-left corner to open the application menu:
* **Back to Projects** — return to the Dashboard
* **Account section** — plan, email, balance, Upgrade, Manage Billing
* **Save as Template** — save the project as a reusable starting point
* **Download Project** — download the source code
* **Appearance** — Light / Dark / System theme for the editor UI
* **Settings** — project settings
* **Keyboard Shortcuts** — open the keyboard shortcuts reference (also available via **Shift+?**)
* **Contact Us** — support link
The Appearance setting controls the Dazl editor's theme. Your project's theme can be configured separately in the **Theme panel**, which can override the editor's appearance setting.
## On Mobile [#on-mobile]
The editor's full set of panels is available on mobile, not just on desktop. You can switch panels, chat with the AI, draft a document, or review a project from a phone, which makes it easy to capture a quick idea or pick up where you left off while away from your desk.
## Related Articles [#related-articles]
* [Your First Project](/docs/getting-started/your-first-project) – guided tour of the editor
* [Chat](/docs/feature-reference/chat) – the AI conversation panel
* [AI Buttons](/docs/feature-reference/ai-buttons) – save reusable AI prompts as buttons
* [Inspect](/docs/feature-reference/inspect-panel) – the Style and Props inspector
# Theme (/docs/feature-reference/theme)
The Theme panel manages your project's design system: color tokens, typography scales, shadow tokens, and radius tokens that apply consistently across every component. It has four tabs: **Color**, **Typography**, **Shadow**, and **Radius**.
## Color [#color]
The Color tab organizes colors into semantic groups. A typical project includes groups like:
* **Neutral** – backgrounds, text, borders
* **Accent** – brand color, interactive elements, highlights
* **Error** – error states, destructive actions
* **Success** – confirmation, positive states
* **Warm** – warm accent tones
* **Warning** – caution states
Your project may have fewer groups, more groups, or different names depending on what the AI generates.
A search box at the top lets you filter color groups by name. Below it, the **System / Light / Dark** toggle previews your colors in different modes. If your project only supports one color scheme, a callout suggests adding the other — the AI can generate the missing theme for you.
### Color Scales [#color-scales]
Click any group to expand it and see 12 graded colors plus a Contrast swatch (a white or black that pairs well with the group's colors). Each step maps to a CSS custom property named after the base color. For example, an accent group based on blue uses `--blue-1` through `--blue-12` plus `--blue-contrast`.
Lighter steps (1–4) are typically used for backgrounds, mid steps (5–8) for borders and secondary elements, and darker steps (9–12) for text and primary elements. The Contrast swatch is designed to look good against color 9, the highest chroma color in the palette, useful for text on buttons and other high-contrast surfaces.
### Changing Brand Colors [#changing-brand-colors]
Click the controls icon next to a color group name to open a popup with a grid of base colors. Pick one and Dazl regenerates the entire 12-step scale automatically, keeping the relationships between shades consistent.
## Typography [#typography]
The Typography tab shows six type scales:
* **Display** – large, prominent text (hero headlines)
* **Heading** – section headings
* **Subheading** – secondary headings
* **Body** – paragraph text
* **Caption** – small labels and metadata
* **Code** – monospace text for code snippets
Each scale shows a live preview of the font at its configured size and weight. Click any scale to expand it and adjust its properties: **Font Family**, **Font Size**, **Font Weight**, **Line Height**, and **Italicize**. Changes apply everywhere that scale is used across the project.
Font family values are design tokens — changing the font family on a scale updates every component that references it. This keeps typography consistent across your project without editing individual elements.
## Shadow [#shadow]
The Shadow tab lists your project's global shadow tokens with their CSS box-shadow values (e.g., `Shadow Sm`, `Shadow Md`, `Shadow Lg`, `Shadow Card`). Tokens are generated to match your project; the AI may add or rename them depending on what your design calls for.
Click a token to expand it. The expanded view shows a preview card rendered with the current value and an editable input for changing the shadow. Edits apply everywhere the token is referenced.
The `` icon next to a token name jumps to the source code that defines the token, so you can edit it directly or see how it's wired up.
## Radius [#radius]
The Radius tab lists your project's global border-radius tokens with their CSS length values (e.g., `Radius Sm`, `Radius Md`, `Radius Lg`, `Radius Full`). Tokens are generated to match your project; the AI may add or rename them depending on what your design calls for.
Click a token to expand it. The expanded view shows a preview of a rounded square rendered with the current value and an editable input for changing the radius. Edits apply everywhere the token is referenced.
The `` icon next to a token name jumps to the source code that defines the token.
## Related Articles [#related-articles]
* [Working with the Theme](/docs/building-with-dazl/design-and-refine/working-with-the-theme) – guide to customizing colors and typography
* [The Action Bar](/docs/building-with-dazl/design-and-refine/the-action-bar) – using theme tokens in the Action Bar color pickers
# Visual Editing (/docs/feature-reference/visual-editing)
Visual editing lets you change layout, styling, and content directly on the live preview by pointing, clicking, and dragging. It's free of credit cost and the result lands in the same source code the AI edits.
## Edit Mode [#edit-mode]
In Edit mode, clicking selects elements for editing. A selected element shows:
* **Blue outline** with drag handles at corners and edges
* **Green outline** around the parent component
* **Breadcrumb label** showing the component name (e.g., "HomeHero...")
* **Arrow** to drill into the component's inner scope
Double-click to drill into a component, or hold **Cmd** (Mac) / **Ctrl** (Windows) and click to select any deeply nested element directly. Whatever you select is sent to the AI as context.
Hold **Alt** and hover over another element to see pixel distances between the selected element and the hovered one. Distance lines with labels appear as an overlay.
**Direct editing:**
* **Text** — double-click any text element to edit it inline
* **Reference text** — text rendered from variables, props, or other code references (shown as `{title}` and similar tokens) can also be edited inline. The change is sent to the AI as a prompt to rewrite the underlying code.
* **Images** — double-click any image to open the Media panel
* **Icons** — double-click any SVG icon to browse the project's icon library (Lucide or Tabler) for a replacement
* **Drag** — click and drag a selected element to reorder it, move it into sibling containers within the same scope, or reposition it on the page. You can also drag images, icons, and HTML elements from the [Add Panel](/docs/feature-reference/add-panel) onto the preview to place them into components.
Every visual change is immediately written to the source code. When you edit in a mobile viewport (using the **Responsive buttons** in the top bar), changes are applied through a CSS media query so they only affect the mobile layout.
### Quick Insert Buttons [#quick-insert-buttons]
When you select a component, **quick insert buttons** appear above and below it on the stage. Click one to open the element picker, where you can search or browse categorized HTML elements (headings, images, forms, containers, and more) alongside add-ons. The AI generates the chosen element based on the surrounding context and inserts it at that position.
## The Action Bar [#the-action-bar]
The Action Bar appears below the top bar when an element is selected and Edit mode is active. Click any control to expand its panel. Changes take effect immediately and are written directly to the source code.
Some controls are disabled when they don't apply to the selected element. For example, **Media** is only active when an image is selected.
### File Breadcrumb and Component Name [#file-breadcrumb-and-component-name]
The left side of the toolbar shows the **file breadcrumb** (e.g., `home.tsx`) and the **component name** (e.g., `HomeHeroBlock`). This tells you exactly which file and component the selected element belongs to.
### Element States [#element-states]
Toggle pseudo-states to style how an element looks when a user interacts with it:
* **Hover** — when the cursor is over the element
* **Active** — while the element is being clicked
* **Focus** — when the element has keyboard focus
* **Focus visible** — keyboard focus with a visible indicator
* **Focus within** — when a child element has focus
You can enable multiple states at once to preview combined interactions.
### Size and Position [#size-and-position]
Set explicit dimensions and positioning for the selected element.
* **Width / Height** — set exact values or leave as `auto`
* **Min / Max Width and Height** — constrain how the element scales
* **Position** — set the CSS position (e.g., `relative`, `absolute`, `fixed`)
* **Top / Right / Bottom / Left** — offset values when using positioned layout
* **Z-Index** — control stacking order
### Layout [#layout]
Choose a layout mode for container elements. The **Presets** tab offers common patterns, while the **Custom** tab gives you full control over flexbox and grid properties.
Available presets:
* **Box** — a basic container
* **Horizontal Stack** — flex row
* **Vertical Stack** — flex column
* **2x2 Grid** / **3x3 Grid** — CSS grid layouts
* **None** — remove layout
### Margin [#margin]
Control the outer spacing around the selected element. The visual editor shows four fields arranged around a cross — top, right, bottom, left — so you can see which side you're adjusting. You can edit each side independently, or use the triggers inside the controller to edit in pairs (top and bottom, right and left) or all four sides at once.
You can also adjust margins directly on the canvas. When you hover over the outer edge of a selected element's selection frame, orange drag handles appear that let you change the margin by dragging. A tooltip displays the original source value (e.g., `2rem` or `--space-5`) as you drag, rather than the computed pixel value. Hold **Alt** while dragging to edit opposite sides together, or **Shift** to edit all four sides at once. A tooltip at the top of the viewport shows the available modifier keys when you start dragging.
Vertical margin handles don't appear on inline elements, where top and bottom margins have no effect.
### Padding [#padding]
Control the inner spacing inside the selected element. Same layout as Margin — four directional fields around a center point, with the same options to edit sides independently, in pairs, or all at once.
Padding can also be adjusted directly on the canvas using green drag handles that appear when hovering over the inner edges of the selection frame. The same modifier keys apply: hold **Alt** for opposite sides, **Shift** for all sides.
### Typography [#typography]
A comprehensive set of text controls. The dropdown at the top lets you pick from **font presets** defined in your theme, which keeps typography consistent with your design system.
* **Select font** — choose from theme font presets
* **Font Family** — the CSS font-family value. The dropdown includes **Google Fonts** (Figtree, Sora, Roboto, Inter, Montserrat, and many more) alongside your theme's generic font stacks, so you can browse and apply web fonts directly.
* **Font Size / Font Weight** — size and boldness
* **Line Height** — spacing between lines
* **Italicize** — toggle italic style
* **Letter Spacing** — tracking between characters
* **Alignment** — left, center, right, or justify
* **Decoration** — underline, strikethrough, or overline
* **Case** — uppercase, lowercase, capitalize, or normal
### Text Color [#text-color]
Pick a text color using one of three tabs:
* **Theme** — your project's semantic design tokens, organized by group (Neutral, Accent, Error, Success, Warm, Warning). Each group shows 12 graded colors plus a 13th Contrast swatch — a white or black that looks good against the group's colors. The current color is indicated with a checkmark. Using token colors keeps your project visually consistent and responsive to theme changes.
* **Palette** — a broader color palette with every available color family (Gray, Mauve, Slate, Tomato, Red, Blue, Green, and many more). Each family shows 12 graded colors plus a Contrast swatch as a row, making it easy to explore colors outside your theme tokens.
* **Custom** — a freeform color picker with a saturation/lightness gradient area, hue slider, opacity slider, format dropdown (CSS, HEX, RGB, HSL), and a value input field. An eyedropper tool lets you sample colors from anywhere on screen.
### Background [#background]
Set a background color or gradient. The first three tabs work the same as **Text Color**, with an additional **Gradient** tab.
Four tabs:
* **Theme** — semantic token colors (same as Text Color)
* **Palette** — broader color palette (same as Text Color)
* **Custom** — freeform color picker (same as Text Color)
* **Gradient** — describe a gradient in natural language (e.g., "mint to dark blue", "warm sunrise", "vibrant pattern") and the AI generates it. This uses credits.
### Border [#border]
Choose a border style for the selected element. Options include no border, solid, dashed, and dotted lines. When a border style is selected, additional controls appear for width and color.
### Corners [#corners]
Set the border-radius using your theme's radius scale. This keeps corner rounding consistent across your project.
The scale ranges from **Radius 1** (2px) for subtle rounding to **Radius Round** for fully circular corners (like avatar images or pill-shaped buttons).
### Shadow [#shadow]
Add depth with box shadows. Choose from preset shadow levels or inner shadows.
* **Shadow 1–4** — increasingly prominent outer shadows
* **Inner Shadow 0–4** — inset shadows for recessed effects
### Link [#link]
Configure where an element links to. The panel has four tabs for different link types:
* **Page** — link to another page in your project
* **URL** — link to an external URL
* **Email** — create a `mailto:` link
* **Phone** — create a `tel:` link
### Media [#media]
The **Media** control activates when you select an image element. It opens the Media panel where you can browse, replace, upload, and generate images.
The panel has two tabs:
* **Project Media** — shows all images currently in your project. Click any thumbnail to use it. You can also **Upload** a new image from your computer or **Generate** a new one with AI (see below).
* **URL** — enter a URL to use an externally hosted image (from a CDN, design tool, or any public URL)
Clicking **Generate** opens a modal where you describe the image you want. You can choose the AI model, style, and aspect ratio. Generated images are auto-saved to your project.
Double-clicking an image in the preview also opens the Media panel directly.
See [Media](/docs/feature-reference/media) for the full feature reference.
### SVG Element [#svg-element]
The **SVG Element** control appears when you select an SVG element (such as an icon). It replaces the Media control in the toolbar. Double-clicking an SVG element in the preview also opens this panel directly.
The panel lets you browse the project's icon library and replace the selected icon with a different one. Dazl auto-detects whether the project uses Lucide or Tabler and shows icons from that library.
### Properties [#properties]
The **Properties** panel shows the React component props for the selected element. This is available when you've drilled into a component's inner scope and selected an element that has configurable props.
The **Advanced Properties** link opens a more detailed view for complex prop configurations.
## Related Articles [#related-articles]
* [Visual Editing](/docs/building-with-dazl/design-and-refine/visual-editing) – guide to visual editing workflows
* [Styling Element States](/docs/building-with-dazl/design-and-refine/styling-element-states) – editing hover, focus, and active states
* [Working with the Theme](/docs/building-with-dazl/design-and-refine/working-with-the-theme) – customize colors and typography at the project level
* [Media](/docs/feature-reference/media) – full reference for the Media panel
# Creating Your Account (/docs/getting-started/creating-your-account)
A Dazl account unlocks the **Dashboard**, where you create projects and pick up your past work. The Free plan is enough to try the platform end-to-end without committing to a paid subscription.
## Signing Up [#signing-up]
1. Go to [dazl.dev](https://dazl.dev)
2. Click **Sign up** in the top-right corner
3. Choose **Continue with Google** or enter an email address and password, then click **Create account**
4. If you signed up with email, check your inbox for a confirmation code and enter it on the verification screen
Once you're signed in, you'll land on the **Dashboard**, your home base for creating and managing projects.
## Logging In [#logging-in]
If you already have an account, click **Log in** on [dazl.dev](https://dazl.dev) and choose **Continue with Google** or **Log in with your email**.
## The Free Plan [#the-free-plan]
Every new account starts on the **Free** plan with 5 credits per day (up to 150/month). Your current balance is visible in the user menu on the Dashboard and in the **Project menu** inside the editor.
Credits are consumed when the AI generates or modifies code in your projects. Visual editing, inspecting, and browsing your projects don't use credits.
Lighter AI models like Claude 4.5 Haiku and Gemini 3 Flash use fewer credits per interaction. You can switch models anytime using the **Model selector** in the Chat panel.
## Managing Your Account [#managing-your-account]
Click your **avatar** in the top-right corner of the Dashboard to access:
* Your current plan and email
* **Balance** — your remaining credits
* **Upgrade** — move to a Pro plan for more credits and features
* **Manage Billing** — update payment methods and view invoices
* **Sign Out** — log out of your account
## Related Articles [#related-articles]
* [The Dashboard](/docs/getting-started/the-dashboard) – tour the main screen and your projects
* [Upgrading to Pro](/docs/getting-started/upgrading-to-pro) – learn about Pro plan benefits
* [Your First Project](/docs/getting-started/your-first-project) – create your first interactive prototype
# The Dashboard (/docs/getting-started/the-dashboard)
The **Dashboard** is your home base in Dazl. Every session starts here — it's where you launch new projects from a prompt and pick up the ones already in progress.
## Creating a New Project [#creating-a-new-project]
At the top of the Dashboard, you'll find the prompt box. Type a description of what you want to build and press Enter or click **Send**. Dazl generates a working project based on your description.
You can also attach files or images using the **attachment button** (paperclip icon) as design inspiration or as assets to be used in the project itself. The **enhance prompt** button (sparkle icon) lets the AI expand a short prompt into a more detailed specification before generating.
Use the **Model selector** to choose which AI model generates the project. Only top-tier models are available on the Dashboard — Claude 4.6 Sonnet (default), Claude 4.8 Opus, and Gemini 3.1 Pro. The full model list is available later in the [Chat panel](/docs/feature-reference/chat).
Enable the **Plan** toggle to review and edit a structured project plan before the AI generates code. See [Starting a Project](/docs/building-with-dazl/ideate-and-plan/starting-a-project) for details.
For a full reference of every Dashboard control, see [Dashboard](/docs/feature-reference/dashboard).
For other ways to start a project, like from a screenshot or written specs, see [Starting a Project](/docs/building-with-dazl/ideate-and-plan/starting-a-project).
## Templates [#templates]
Once you've saved a project as a template (via **Project menu > Save as Template** inside the editor), a **Templates** section appears on the Dashboard between the prompt box and your projects. Click any template to create a new project from it.
The Templates section only appears after you've created your first template.
## My Projects [#my-projects]
The **My Projects** section displays all your existing projects as a grid of cards.
Each project card shows:
* **Preview thumbnail** — a screenshot of the project's home page
* **Project name** — click the card to open it in the editor
* **Timestamp** — when you last opened the project (e.g., "Opened last week")
* **Published badge** — a green "Published" label if the project has been published
* **Running status** — a green "Running" indicator if the project's server is active
* **Team member avatars** — profile pictures of collaborators on the project
* **Options menu** — the three-dot button on each card for additional actions
### Searching and Sorting [#searching-and-sorting]
Use the **Search projects** text field above the grid to filter projects by name. The **Sort by Recent** dropdown lets you change how projects are ordered.
## Concurrent Projects [#concurrent-projects]
You can run up to 3 projects at the same time. If you try to open a 4th, Dazl prompts you to choose which running project to close before continuing.
## User Menu [#user-menu]
Click your **avatar** in the top-right corner to open the user menu, which shows:
* Your current plan (e.g., "Free Product") and email
* **Balance** — remaining credits
* **Upgrade** — link to the pricing page
* **Manage Billing** — payment and invoice management
* **Contact Us** — reach the Dazl team
* **Sign Out** — log out
## Related Articles [#related-articles]
* [Your First Project](/docs/getting-started/your-first-project) – walk through creating and editing your first project
* [Starting a Project](/docs/building-with-dazl/ideate-and-plan/starting-a-project) – all the ways to begin a new project
# Upgrading to Pro (/docs/getting-started/upgrading-to-pro)
The Free plan is enough to try Dazl on a small project, but credit caps, limited concurrent projects, and no team features make it limiting for ongoing team work. Pro raises those limits and adds collaboration, custom domains, and more.
## Plans [#plans]
Credits are consumed when the AI generates or modifies code. Visual editing, inspecting, and browsing your projects don't use credits.
### Free [#free]
* 5 daily credits (up to 150/month)
* Unlimited visual edits
* Dedicated virtual server
* Community support
### Pro ($25/month) [#pro-25month]
* 1,000 monthly credits (additional tiers available)
* 5 daily additional free credits
* All credits roll over for up to 6 months
* Unlimited projects and publishing
* Dedicated server per project
* Connect your custom domain
* Premium support
### Teams [#teams]
For organizations that need collaboration tools, group access controls, and onboarding assistance. Contact the Dazl team to request a custom plan.
You can check your current balance in the user menu on the Dashboard and in the **Project menu** inside the editor.
## How to Upgrade [#how-to-upgrade]
1. Click your **avatar** in the top-right corner to open the user menu
2. Click **Upgrade** — this takes you to the Pricing page
3. Choose your plan and complete the payment process
You can also navigate directly to the Pricing page using the **Pricing** link in the Dashboard's top bar.
## Managing Your Billing [#managing-your-billing]
To update payment methods, view invoices, or manage your subscription:
1. Click your **avatar** in the top-right corner
2. Click **Manage Billing**
This opens the billing management portal where you can update your payment details and review your history.
## Cancelling Pro [#cancelling-pro]
1. Go to the **Pricing** page
2. Switch back to the **Free** plan
You won't be billed again, and Pro features remain available until the end of your current billing period.
## Stretching Your Credits [#stretching-your-credits]
A few ways to get more out of your credits:
* **Use lighter models for routine tasks.** Claude 4.5 Haiku and Gemini 3 Flash are fast and cost fewer credits. Save more capable models like Claude 4.8 Opus for complex changes.
* **Use visual editing when you can.** Direct edits — changing colors, dragging elements, editing text — don't consume credits at all.
* **Be specific in your prompts.** Clear, focused prompts tend to get the right result in fewer iterations than vague ones.
* **Write documents.** Well-defined documents in the **Documents panel** help the AI understand your intent upfront, reducing back-and-forth.
## Related Articles [#related-articles]
* [Creating Your Account](/docs/getting-started/creating-your-account) – getting started with Dazl
* [Chat](/docs/feature-reference/chat) – model selector, credits, and cost trade-offs between models
* [The Dashboard](/docs/getting-started/the-dashboard) – navigating the main screen
# What is Dazl? (/docs/getting-started/what-is-dazl)
Dazl is an AI-powered platform built for product teams. It covers the full arc of a web product, from initial idea to a polished prototype ready for handoff, with all the work happening in a single workspace.
## Where You Work [#where-you-work]
Open Dazl and you land on the **Dashboard** — your home base for new and existing projects.
Click any project to open the **Editor** — your workspace for building, refining, and inspecting the project. The AI sits alongside a live preview, with panels for chat, code, documents, comments, and more.
Dazl also works on mobile. The editor's full set of panels is available on a phone, so you can start a quick idea, draft a document, or review a project on the go. See [The Editor Layout](/docs/feature-reference/the-editor-layout#on-mobile) for how it works on smaller screens.
## Built for Product Teams [#built-for-product-teams]
Unlike general-purpose AI tools that try to be everything for everyone, Dazl is designed for how professional product teams actually work: collaboratively, iteratively, and with care for the process behind great products.
Whether you're a product manager validating a feature idea, a designer exploring interactions in the browser, or working together to align your team around a shared vision, Dazl gives you the environment to do that work with AI integrated into every step.
## The Product Journey [#the-product-journey]
Dazl supports your team across four stages of the product workflow:
### Ideate and Plan [#ideate-and-plan]
Start from a prompt, a screenshot, or written specs. Create detailed project specifications directly within Dazl using the built-in **Documents panel**, a markdown editor where you define what you're building and how the AI should approach it.
For more open-ended work like competitive research, design exploration, or asset libraries, use the **Canvas panel** to lay out and connect typed nodes the AI agent can populate.
Save projects as reusable **templates** to create repeatable starting points for experimentation.
### Design and Refine [#design-and-refine]
Shape the experience with hands-on **visual editing**: drag elements, change colors, edit text, and tweak hover states without touching the chat or spending credits. Every visual change immediately updates the underlying code, and every code change updates the visual preview.
Build to your brand and design systems. Every project includes semantic **design tokens** for colors, typography, and spacing. Define your standards once and they apply across every component.
### Iterate and Collaborate [#iterate-and-collaborate]
**Invite your team** to work on the same project in real time. Collaborators can edit, prompt the AI, and inspect changes together — no more passing screenshots or files back and forth.
**Inspect** what the AI creates — see the element tree, applied styles, and component properties with full visibility. Everything is displayed in readable source names, not garbled hashes.
Review a transparent **diff of every change**, whether made by the AI, visual editing, or drag-and-drop. Use the **History panel** to jump back to any previous revision.
### Handoff and Validation [#handoff-and-validation]
**Publish** interactive prototypes to share with stakeholders for demos and validation. Connect to **GitHub** for a production-ready handoff to development teams: real code, not throwaway wireframes. Or export a spec that a developer can implement using their AI agent of choice.
## What Makes Dazl Different [#what-makes-dazl-different]
**Real code and real servers.** Every project runs on a real virtual server, not a client-side mock. This enables backend functionality like authentication, database queries, and API integrations.
**Two-way editing.** Visual changes update the code. Code changes update the visual preview. They're always in sync.
**Transparent AI.** Every change the AI makes is visible — review diffs, browse modified files, and inspect elements just like you would in browser DevTools. The AI isn't a black box; it's a collaborator you can verify.
**Context-aware AI.** Select an element on the preview and it's automatically passed as context to the AI. The code analysis engine ensures the AI understands your project's structure, naming conventions, and design system.
Dazl respects the multi-step process of product building. AI supports different stages of your workflow, not a shortcut to skip them.
## Who is Dazl For? [#who-is-dazl-for]
* **Product managers** validating feature ideas with interactive prototypes instead of static mockups
* **Product designers** exploring what the web can actually do — CSS transitions, responsive behaviors, animations — beyond what static design tools allow
* **Teams** who want a single source of truth where product decisions, design, and code come together
## Related Articles [#related-articles]
* [Creating Your Account](/docs/getting-started/creating-your-account) – sign up and get started
* [Your First Project](/docs/getting-started/your-first-project) – create your first interactive prototype
* [The Dashboard](/docs/getting-started/the-dashboard) – find your way around the main screen
# Your First Project (/docs/getting-started/your-first-project)
Following these steps gives you a working interactive prototype and a feel for how Dazl's main parts work together: the **Chat panel**, the live preview, **Edit mode**, and the **Inspect panel**.
## Create a Project [#create-a-project]
From the **Dashboard**, type a description of what you want to build in the prompt box. Be as specific or general as you like — you can always refine later.
For example:
> "Build me an application that's a clone of Uber but uses drones instead of cars and is for pets instead of people"
Click the **Send** button. Dazl generates a complete project and opens it in the **Editor**. The agent can crawl websites and search the web during generation, so including references or mentioning existing products in your prompt helps it produce better results.
If you'd like to review and shape the project structure before generation, enable the **Plan** toggle in the prompt box before sending. Dazl creates an editable plan with pages, features, and theme guidelines that you can refine before clicking **Build**. See [Starting a Project](/docs/building-with-dazl/ideate-and-plan/starting-a-project) for details.
## Explore the Editor [#explore-the-editor]
The Editor has three main areas:
* **Left sidebar** — tabbed panels for Chat, History, Elements, Documents, and more
* **Center area** — your live preview, plus tabs for code and document files
* **Top bar** — project menu, **Edit / Preview** toggle, page navigation, and action buttons
The **Chat panel** is open by default, showing the conversation that generated your project. The center area shows a live, interactive preview of what was built.
Try clicking links and interacting with the preview — it's a real running application, not a static mockup.
The preview runs on a real virtual server. If your project includes forms, authentication, or API calls, they work as expected.
## Start Editing [#start-editing]
At the top of the center area, the **Edit / Preview** toggle controls how you interact with the preview. **Preview** mode is fully interactive — click links, fill out forms, and navigate between pages as a real user would. **Edit** mode lets you select and manipulate elements visually.
The editor opens in **Preview mode** by default. Switch to **Edit** using the toggle in the top bar, then click any element in the preview to select it:
* A **blue outline** marks the selected element; a **green outline** marks its parent component
* The element's name appears as a breadcrumb in the **Action Bar**
* **Double-click** a component to drill into its inner elements
* Hold **Cmd** (Mac) or **Ctrl** (Windows) and click to select any deeply nested element directly
* Your selection is automatically sent to the AI as context in the **Chat panel**
Try these visual editing actions:
* **Click** any element to select it
* **Double-click** text to edit it directly
* **Drag** elements to reposition them
* Use the **Action Bar** that appears below the top bar to change colors, typography, spacing, and more
Every visual change you make is immediately reflected in the source code — no AI call needed, no credits consumed.
## Ask the AI to Make Changes [#ask-the-ai-to-make-changes]
Switch back to the **Chat panel** in the left sidebar. With an element selected on the preview, you'll see it appear as a chip above the prompt box (e.g., `HomeHeroBlock.homeheroblock`), giving the AI context about what you're working on.
Type a request in the prompt box:
> "Change the hero headline to 'Fresh Meals, Delivered by Drone' and make the call-to-action button use the accent color"
The AI makes the changes and shows you exactly what files were modified. You can expand the file cards in the chat to see diffs of every change.
## Inspect What Was Built [#inspect-what-was-built]
Click the **Inspect** button in the top-right corner of the top bar to open the Inspect panel on the right side.
With an element selected, the **Style tab** shows every CSS rule affecting it — grouped by source file, editable inline. The **Props tab** shows the React component's properties.
This works like browser DevTools, but with readable source names and edits that persist in your project's source code.
## Review History [#review-history]
Click the **History** tab in the left sidebar to see a timeline of every change made to your project — AI-generated, visual edits, and manual code changes.
Each revision has a **View changes** button to see the diff and a **Restore** button to roll back to that point. You always know exactly what changed and when.
## What's Next [#whats-next]
You've covered the core loop: prompt, preview, edit, chat, inspect, review. From here, you can:
* **Invite your team** — click Share in the top bar to collaborate on the project in real time
* **Refine your design** — use the Theme panel to adjust colors and typography across the entire project
* **Write documents** — define your requirements in the Documents panel to guide the AI more precisely
* **Add integrations** — connect Supabase for a database or Figma for design imports
* **Share your work** — publish your interactive prototype or connect to GitHub for handoff
## Related Articles [#related-articles]
* [Visual Editing](/docs/building-with-dazl/design-and-refine/visual-editing) – deeper dive into Edit mode and visual manipulation
* [Chat-Driven Editing](/docs/building-with-dazl/design-and-refine/chat-driven-editing) – how to get the best results from the AI
* [The Editor Layout](/docs/feature-reference/the-editor-layout) – full reference for every part of the editor workspace
# Dazl Documentation (/docs)
Welcome to the Dazl documentation. Here you'll find everything you need to get started, build with confidence, and make the most of every feature.
Learn what Dazl is, create your account, and build your first project.
Follow the product journey from ideation through design, iteration, and handoff.
Detailed guides for every panel, tool, and capability in the editor.
Release notes, libraries, and other reference material.