# Getting Started with Dynamic Content Blocks

> Learn how to create your first Dynamic Content Block in a Canvas Dashboard with this step-by-step tutorial.

This tutorial walks you through creating your first Dynamic Content Block. By the end, you'll understand the basic workflow and be ready to build more complex templates.

## Prerequisites

- A Canvas Dashboard where you want to add the block
- A dataset with the fields you want to display

## Step-by-Step Tutorial

### Step 1: Add a Visualization Block

Start by adding a new Visualization block to your Canvas Dashboard, just like you would add any other chart.

### Step 2: Choose Markdown Visualization Type

In the visualization type selector, choose **Markdown** as your chart type. This enables the Dynamic Content Block editor with two tabs:
- **Chart Data**: Preview your data
- **Editor**: Write your template

### Step 3: Add Your Data Fields

Drag and drop the data fields you want to use in your template, just like building a Table or Pivot Table:

- Add dimensions (e.g., Product Name, Customer Name, Date)
- Add measures (e.g., Revenue, Order Count, Conversion Rate)
- Apply filters and sorting as needed

Use the **Chart Data** tab to preview your data and ensure it contains the information you need.

### Step 4: Build Your Template

Switch to the **Editor** tab to start building your template. You can use:

- **HTML**: For complete control over structure and styling
- **Markdown**: For simpler, text-based formatting
- **Mix both**: Combine HTML and Markdown as needed

### Step 5: Inject Your Data

Use template syntax to inject your data into the content. Here's a simple example:

```html

  {{ rows[0].`Product Name` }}
  Revenue: {{ rows[0].`Revenue` }}

```

The editor provides real-time preview so you can see how your template renders with actual data.

## Your First Template

Let's create a simple "Top Product" card. Assuming you have fields `Product Name` and `Revenue`:

```html
<style>
  .product-card {
    padding: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    max-width: 300px;
  }
  .product-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
  }
  .product-card .revenue {
    font-size: 1rem;
    color: lightgreen
  }
  .product-card .title {
    font-size: 0.875rem;
    opacity: 0.8;
  }
</style>

  Top Product
  {{ rows[0].`Product Name` }}
  {{ rows[0].values.`Revenue` }}

```

## Next Steps

Now that you've created your first Dynamic Content Block:

- **[Syntax Reference](./syntax-reference.md)**: Learn all the template syntax options, including loops, raw values, and conditional styling
- **[Template Gallery](./gallery/)**: Browse ready-to-use examples for inspiration