Getting started
3: Build a dashboard

Build Your First Dashboard

You're ready to start building! Let’s walk through creating a basic dashboard in Embeddable - from adding your first component to embedding the result.

Create a New Embeddable

  • On your workspace homepage, click Create new Embeddable to create a fresh dashboard.

Add a Text Component

  1. Click Add component (top right).
  2. Scroll down and choose Text component.
  3. Fill in Title and Body, then hit Save.
💡

The available components come from your code repository.

Add a Dataset

  1. In the Datasets panel (bottom right), click the + icon.
  2. Name your dataset, select My customers (or any other sample data model), then Save.

Add a Pie Chart

  1. Click Add component again. Pick Pie Chart.
  2. In the edit panel, set Dataset to display to the dataset you just created.
  3. Select your preferred Slice and Metric.
  4. Save and position your pie chart on the canvas.

Add Interactivity

Let's add a search input that filters the data. Watch and follow this quick video:

Embed Your Dashboard

  1. Click Publish at the top of your dashboard.
  2. In the pop-up, copy your API Key and Embeddable ID.
Image 0
  1. In your code repo, open embedding-preview.cjs (inside scripts).
  2. Update the BASE_URL, API_KEY, and EMBEDDABLE_ID with the values from your dashboard.
  3. Run: 
    node src/embeddable.com/scripts/embedding-preview.cjs
  4. Go to http://localhost:8080/ (opens in a new tab) to see your embedded dashboard in action!

Next Steps

  • Try More Components: Explore different charts, text blocks, or interactive controls.
  • Connect your data: Securely connect your database.
2: Set up your workspaceConnections API