<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Foundation SDK fundamentals on Grafana Labs</title><link>https://grafana.com/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/</link><description>Recent content in Foundation SDK fundamentals on Grafana Labs</description><generator>Hugo -- gohugo.io</generator><language>en</language><atom:link href="/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/index.xml" rel="self" type="application/rss+xml"/><item><title>The Foundation SDK builder pattern</title><link>https://grafana.com/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/01-builder-pattern/</link><pubDate>Wed, 24 Jun 2026 15:16:44 +0200</pubDate><guid>https://grafana.com/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/01-builder-pattern/</guid><content><![CDATA[&lt;h2 id=&#34;how-builders-work-in-the-foundation-sdk&#34;&gt;How builders work in the Foundation SDK&lt;/h2&gt;
&lt;p&gt;With the Foundation SDK you define dashboards one step at a time with chained method calls instead of one giant config object.&lt;/p&gt;
&lt;p&gt;&lt;img
  class=&#34;lazyload d-inline-block&#34;
  data-src=&#34;builder-pattern.svg&#34;
  alt=&#34;Diagram showing builder pattern composition: DashboardBuilder chains to PanelBuilder via WithPanel, which chains to DataqueryBuilder via WithTarget&#34;/&gt;&lt;/p&gt;
&lt;h2 id=&#34;follow-the-builder-sequence&#34;&gt;Follow the builder sequence&lt;/h2&gt;
&lt;p&gt;Most dashboard code follows this flow:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Start with &lt;strong&gt;DashboardBuilder&lt;/strong&gt; for dashboard-level settings.&lt;/li&gt;
&lt;li&gt;Add each panel with &lt;strong&gt;PanelBuilder&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Add panel queries with &lt;strong&gt;DataqueryBuilder&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Export the final dashboard JSON from the completed builder chain.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;why-this-matters&#34;&gt;Why this matters&lt;/h2&gt;
&lt;p&gt;The builder pattern has practical advantages when defining dashboards in code.&lt;/p&gt;
&lt;section class=&#34;expand-table-wrapper&#34;&gt;&lt;div class=&#34;responsive-table-wrapper&#34;&gt;
    &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Benefit&lt;/th&gt;
              &lt;th&gt;What it means for you&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Composable&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Build complex dashboards from simple, reusable pieces&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Readable&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Chained calls read like a description of what you want&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;IDE-friendly&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Autocomplete shows valid options at every step&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/section&gt;]]></content><description>&lt;h2 id="how-builders-work-in-the-foundation-sdk">How builders work in the Foundation SDK&lt;/h2>
&lt;p>With the Foundation SDK you define dashboards one step at a time with chained method calls instead of one giant config object.&lt;/p></description></item><item><title>SDK benefits</title><link>https://grafana.com/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/02-types-and-options/</link><pubDate>Wed, 24 Jun 2026 15:16:44 +0200</pubDate><guid>https://grafana.com/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/02-types-and-options/</guid><content><![CDATA[&lt;h2 id=&#34;main-benefits-of-the-foundation-sdk&#34;&gt;Main benefits of the Foundation SDK&lt;/h2&gt;
&lt;p&gt;Using the Foundation SDK provides two main benefits: strong typing and builder blocks.&lt;/p&gt;
&lt;h2 id=&#34;catch-errors-early-with-strong-typing&#34;&gt;Catch errors early with strong typing&lt;/h2&gt;
&lt;p&gt;The Foundation SDK is strongly typed, so the compiler can check your dashboard as you write it. Instead of discovering a broken dashboard after deployment, you see problems while you&amp;rsquo;re still writing code:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Invalid unit values&lt;/strong&gt;: You catch invalid units during development, before they reach production dashboards.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Wrong data types for fields&lt;/strong&gt;: If a field expects one type and gets another, the compiler fails fast with a clear error.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Missing required configuration&lt;/strong&gt;: Required settings are enforced up front, so incomplete panel definitions do not ship.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;use-option-builders-for-complex-settings&#34;&gt;Use option builders for complex settings&lt;/h2&gt;
&lt;p&gt;An option builder is a typed helper the SDK provides to configure one nested part of a panel or dashboard.&lt;/p&gt;
&lt;p&gt;When configuration gets nested, option builders provide typed helpers for those subsections. They keep complex configuration readable while still giving you typed validation:&lt;/p&gt;
&lt;section class=&#34;expand-table-wrapper&#34;&gt;&lt;div class=&#34;responsive-table-wrapper&#34;&gt;
    &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Option builder&lt;/th&gt;
              &lt;th&gt;Controls&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;ReduceDataOptions&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;How to reduce time series into single values (last, avg, sum)&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;VizLegendOptions&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Legend display mode, placement, values shown&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;ThresholdsConfig&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Color-coded value thresholds&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;FieldConfig&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Per-field display overrides&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/section&gt;]]></content><description>&lt;h2 id="main-benefits-of-the-foundation-sdk">Main benefits of the Foundation SDK&lt;/h2>
&lt;p>Using the Foundation SDK provides two main benefits: strong typing and builder blocks.&lt;/p>
&lt;h2 id="catch-errors-early-with-strong-typing">Catch errors early with strong typing&lt;/h2>
&lt;p>The Foundation SDK is strongly typed, so the compiler can check your dashboard as you write it. Instead of discovering a broken dashboard after deployment, you see problems while you&amp;rsquo;re still writing code:&lt;/p></description></item><item><title>Build a dashboard learning path</title><link>https://grafana.com/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/03-build-dashboard-path/</link><pubDate>Wed, 24 Jun 2026 15:16:44 +0200</pubDate><guid>https://grafana.com/docs/learning-hub/dashboards-as-code/02-sdk-fundamentals/03-build-dashboard-path/</guid><content><![CDATA[&lt;h2 id=&#34;learning-path-build-a-dashboard-with-the-foundation-sdk&#34;&gt;Learning path: Build a dashboard with the Foundation SDK&lt;/h2&gt;
&lt;p&gt;The following table describes the steps you&amp;rsquo;ll work through in the learning path.&lt;/p&gt;
&lt;section class=&#34;expand-table-wrapper&#34;&gt;&lt;div class=&#34;responsive-table-wrapper&#34;&gt;
    &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Step&lt;/th&gt;
              &lt;th&gt;What you&amp;rsquo;ll do&lt;/th&gt;
              &lt;th&gt;Outcome&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;1. Set up your project&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Install the Foundation SDK and create a project&lt;/td&gt;
              &lt;td&gt;A working SDK project in Go or TypeScript&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;2. Create a dashboard&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Use DashboardBuilder to define a dashboard with UID, tags, and time range&lt;/td&gt;
              &lt;td&gt;A complete dashboard definition&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;3. Add panels and queries&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Attach stat and time series panels with data queries&lt;/td&gt;
              &lt;td&gt;A dashboard with live visualizations&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;4. Export JSON&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Call build() and serialize the output to a file&lt;/td&gt;
              &lt;td&gt;A deployment-ready JSON file&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;5. Verify the output&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;Inspect the JSON and optionally import into Grafana&lt;/td&gt;
              &lt;td&gt;Confirmed valid dashboard JSON&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/section&gt;&lt;h2 id=&#34;before-you-start&#34;&gt;Before you start&lt;/h2&gt;
&lt;p&gt;Have these ready before you open the path:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Go 1.21&#43;&lt;/strong&gt; or &lt;strong&gt;Node.js 18&#43;&lt;/strong&gt; installed&lt;/li&gt;
&lt;li&gt;A terminal and code editor&lt;/li&gt;
&lt;li&gt;A Grafana Cloud account (optional, for manual import verification)&lt;/li&gt;
&lt;/ul&gt;









  
  
&lt;div class=&#34;learning-path-card&#34;&gt;
  




  
  
    
  


&lt;div class=&#34;pathway-row__label mb-1&#34;&gt;
  
  &lt;svg width=&#34;40&#34; height=&#34;40&#34; viewBox=&#34;0 0 40 40&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;&lt;rect x=&#34;0.5&#34; y=&#34;0.5&#34; width=&#34;39&#34; height=&#34;39&#34; rx=&#34;3.5&#34; fill=&#34;white&#34; stroke=&#34;#D8D8DF&#34;&gt;&lt;/rect&gt;&lt;path d=&#34;M8 20H14C16.5 20 18.5 18 18.5 15.5V12&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;2&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;&gt;&lt;/path&gt;&lt;path d=&#34;M8 20H14C16.5 20 18.5 22 18.5 24.5V28&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;2&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;&gt;&lt;/path&gt;&lt;path d=&#34;M14 20H32&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;2&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;&gt;&lt;/path&gt;&lt;circle cx=&#34;18.5&#34; cy=&#34;12&#34; r=&#34;2&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;2&#34; fill=&#34;white&#34;&gt;&lt;/circle&gt;&lt;circle cx=&#34;18.5&#34; cy=&#34;28&#34; r=&#34;2&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;2&#34; fill=&#34;white&#34;&gt;&lt;/circle&gt;&lt;path d=&#34;M29 17L32 20L29 23&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;2&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;&gt;&lt;/path&gt;&lt;/svg&gt;

  Learning path
&lt;/div&gt;

&lt;h4&gt;Build a dashboard with the Foundation SDK&lt;/h4&gt;
&lt;p&gt;Welcome to the learning path that shows you how to define a Grafana dashboard as strongly typed code and export it as deployment-ready JSON.&lt;/p&gt;

&lt;div class=&#34;d-sm-flex gap-half mb-2&#34;&gt;
  &lt;div class=&#34;d-flex align-items-center gap-half text-gray-12 mt-half body-small&#34;&gt;
    &lt;div class=&#34;journey-list__icon&#34;&gt;
  &lt;svg width=&#34;24&#34; height=&#34;24&#34; viewBox=&#34;0 0 24 24&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;
  &lt;path fill-rule=&#34;evenodd&#34; clip-rule=&#34;evenodd&#34; d=&#34;M11.9995 22.5039C17.7985 22.5039 22.4995 17.8029 22.4995 12.0039C22.4995 6.20492 17.7985 1.50391 11.9995 1.50391C6.20052 1.50391 1.49951 6.20492 1.49951 12.0039C1.49951 17.8029 6.20052 22.5039 11.9995 22.5039Z&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path d=&#34;M11.9995 12.0039V8.25391&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path d=&#34;M11.9995 12.0078L16.6865 16.6958&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
&lt;/svg&gt;
&lt;/div&gt;
    &lt;span&gt;11 min&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class=&#34;d-flex align-items-center gap-half text-gray-12 mt-half body-small&#34;&gt;
    &lt;div class=&#34;journey-list__icon&#34;&gt;
  &lt;svg width=&#34;24&#34; height=&#34;25&#34; viewBox=&#34;0 0 24 25&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;
  &lt;path fill-rule=&#34;evenodd&#34; clip-rule=&#34;evenodd&#34; d=&#34;M0.75 9.83984C0.75 7.6307 2.54086 5.83984 4.75 5.83984H19.25C21.4591 5.83984 23.25 7.6307 23.25 9.83984V19.1198C23.25 21.329 21.4591 23.1198 19.25 23.1198H4.75C2.54086 23.1198 0.75 21.329 0.75 19.1198V9.83984Z&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path fill-rule=&#34;evenodd&#34; clip-rule=&#34;evenodd&#34; d=&#34;M14.25 1.52344H9.75C8.92157 1.52344 8.25 2.16815 8.25 2.96344V5.84344H15.75V2.96344C15.75 2.16815 15.0784 1.52344 14.25 1.52344Z&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path fill-rule=&#34;evenodd&#34; clip-rule=&#34;evenodd&#34; d=&#34;M12 15.923C12.8284 15.923 13.5 15.2783 13.5 14.483C13.5 13.6877 12.8284 13.043 12 13.043C11.1716 13.043 10.5 13.6877 10.5 14.483C10.5 15.2783 11.1716 15.923 12 15.923Z&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path fill-rule=&#34;evenodd&#34; clip-rule=&#34;evenodd&#34; d=&#34;M13.2742 8.91315L13.7162 10.309C13.8671 10.7897 14.3806 11.0756 14.8902 10.9628L16.3622 10.6354C16.9349 10.5115 17.5249 10.7602 17.8175 11.2488C18.11 11.7374 18.037 12.3519 17.6372 12.7647L16.6062 13.8312C16.2493 14.1997 16.2493 14.7703 16.6062 15.1388L17.6372 16.2053C18.0379 16.6179 18.1115 17.2331 17.8188 17.7222C17.526 18.2113 16.9353 18.4601 16.3622 18.3356L14.8902 18.0082C14.3806 17.8953 13.8671 18.1812 13.7162 18.662L13.2742 20.0559C13.1055 20.5961 12.5877 20.9661 12.0002 20.9661C11.4128 20.9661 10.8949 20.5961 10.7262 20.0559L10.2842 18.661C10.1333 18.1803 9.61982 17.8944 9.11021 18.0072L7.63821 18.3346C7.06469 18.4597 6.47325 18.2109 6.18034 17.7213C5.88742 17.2317 5.96161 16.6159 6.36321 16.2034L7.39421 15.1368C7.75116 14.7684 7.75116 14.1978 7.39421 13.8293L6.36321 12.7628C5.96346 12.35 5.89039 11.7354 6.18296 11.2468C6.47553 10.7582 7.06551 10.5096 7.63821 10.6335L9.11021 10.9608C9.61923 11.0739 10.1324 10.7889 10.2842 10.309L10.7262 8.91507C10.8944 8.37473 11.412 8.00435 11.9995 8.00391C12.5869 8.00346 13.1051 8.37307 13.2742 8.91315V8.91315Z&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
&lt;/svg&gt;
&lt;/div&gt;
    &lt;span&gt;Intermediate&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;div class=&#34;d-flex align-items-center gap-half text-gray-12 mt-half body-small&#34;&gt;
    &lt;div class=&#34;journey-list__icon&#34;&gt;
  &lt;svg width=&#34;24&#34; height=&#34;24&#34; viewBox=&#34;0 0 24 24&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;
  &lt;path fill-rule=&#34;evenodd&#34; clip-rule=&#34;evenodd&#34; d=&#34;M0.75 2.75C0.75 1.64543 1.64543 0.75 2.75 0.75H21.25C22.3546 0.75 23.25 1.64543 23.25 2.75V21.25C23.25 22.3546 22.3546 23.25 21.25 23.25H2.75C1.64543 23.25 0.75 22.3546 0.75 21.25V2.75Z&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path d=&#34;M12 4.5L7.5 10.5L4.5 7.5&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path d=&#34;M14.25 8.25H18.75&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path d=&#34;M12 13.5L7.5 19.5L4.5 16.5&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
  &lt;path d=&#34;M14.25 17.25H18.75&#34; stroke=&#34;#FF671D&#34; stroke-width=&#34;1.5&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34;/&gt;
&lt;/svg&gt;
&lt;/div&gt;
    &lt;span&gt;Docs &amp;amp; blog posts&lt;/span&gt;
  &lt;/div&gt;
  
&lt;/div&gt;







  


&lt;div class=&#34;orange-outline-list br-12 border-color-orange-flat border-width-2 p-1-5 pb-1&#34; x3-data=&#34;selectStack(&#39;/docs/learning-paths/build-dashboard-sdk&#39;)&#34;&gt;
  &lt;div class=&#34;icon-heading d-flex&#34;&gt;
    &lt;div class=&#34;icon-heading__container&#34;&gt;
  &lt;svg width=&#34;30&#34; height=&#34;30&#34; viewBox=&#34;0 0 25 26&#34; fill=&#34;none&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;
  &lt;path d=&#34;M16.1401 14.4402C16.2141 14.4402 16.2852 14.4101 16.3373 14.3581C16.5355 14.1569 21.1904 9.39886 21.1904 5.0513C21.1904 2.26537 18.924 0 16.1391 0C13.3541 0 11.0878 2.26537 11.0878 5.0513C11.0878 9.39886 15.7427 14.1569 15.9419 14.3581C15.9939 14.4111 16.065 14.4402 16.1401 14.4402ZM13.5814 5.0513C13.5814 3.63882 14.7266 2.49262 16.1401 2.49262C17.5536 2.49262 18.6978 3.63781 18.6978 5.0513C18.6978 6.46478 17.5526 7.60999 16.1401 7.60999C14.7276 7.60999 13.5814 6.46478 13.5814 5.0513Z&#34; fill=&#34;#FF671D&#34;/&gt;
  &lt;path d=&#34;M24.9034 21.9305C24.0595 18.9113 17.9561 17.4147 12.5704 16.0933C9.54023 15.3496 5.76827 14.4246 5.73524 13.6037C5.72823 13.4225 5.97949 12.7398 9.52922 11.5516C9.80551 11.4585 9.96668 11.1842 9.91262 10.8989C9.85856 10.6136 9.60229 10.4164 9.318 10.4304C4.13956 10.6807 0.501743 12.1602 0.0482666 14.1993C-0.172966 15.1944 0.26149 16.749 3.58398 18.5009L4.29773 18.8763C6.54509 20.0545 8.16879 20.9064 8.1808 21.6992C8.19482 22.6502 5.93745 24.0507 3.72713 25.296C3.58398 25.3761 3.5139 25.5433 3.55495 25.7024C3.59699 25.8616 3.74014 25.9717 3.90431 25.9717H23.0354C23.1315 25.9717 23.2226 25.9337 23.2907 25.8656C24.6971 24.4581 25.2397 23.1347 24.9034 21.9305Z&#34; fill=&#34;#FBC55A&#34;/&gt;
&lt;/svg&gt;
&lt;/div&gt;
    &lt;div class=&#34;no-anchor-heading&#34;&gt;
      &lt;h4&gt;Open in Grafana Cloud&lt;/h4&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&#34;mt-1&#34;&gt;
    &lt;p class=&#34;mb-1 maxw-650&#34;&gt;
      
        Complete this learning path directly in your Grafana Cloud stack, or in the Grafana Play stack, with an interactive learning experience.
      
    &lt;/p&gt;
    &lt;div class=&#34;d-flex column-gap-1 justify-content-end&#34;&gt;
      &lt;a
        x3-bind:href=&#34;launchUrl&#34;
        class=&#34;btn btn--primary br-8&#34;
        target=&#34;_blank&#34;
        x3-on:click=&#34;trackPathfinderClick(&#39;build-dashboard-sdk&#39;, &#39;Build a dashboard with the Foundation SDK&#39;)&#34;&gt;
        Open in Grafana Cloud
      &lt;/a&gt;
      
      &lt;a
        x3-bind:href=&#34;playUrl&#34;
        class=&#34;btn btn--primary br-8&#34;
        target=&#34;_blank&#34;
        x3-on:click=&#34;trackPlayClick(&#39;build-dashboard-sdk&#39;, &#39;Build a dashboard with the Foundation SDK&#39;)&#34;&gt;
        Try in Grafana Play
      &lt;/a&gt;
      
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;div class=&#34;mt-1&#34;&gt;
  &lt;a
    href=&#34;/docs/learning-paths/build-dashboard-sdk/&#34;
    target=&#34;_blank&#34;
    rel=&#34;noopener noreferrer&#34;
    class=&#34;btn btn--outline arrow w-100p br-8&#34;
    x3-on:click=&#34;$dispatch(&#39;track-view-on-website&#39;, {
      pathId: &#39;build-dashboard-sdk&#39;,
      pathTitle: &#39;Build a dashboard with the Foundation SDK&#39;
    })&#34;&gt;
    View on website
  &lt;/a&gt;
&lt;/div&gt;

&lt;/div&gt;



]]></content><description>&lt;h2 id="learning-path-build-a-dashboard-with-the-foundation-sdk">Learning path: Build a dashboard with the Foundation SDK&lt;/h2>
&lt;p>The following table describes the steps you&amp;rsquo;ll work through in the learning path.&lt;/p>
&lt;section class="expand-table-wrapper">&lt;div class="responsive-table-wrapper">
&lt;table>
&lt;thead>
&lt;tr>
&lt;th>Step&lt;/th>
&lt;th>What you&amp;rsquo;ll do&lt;/th>
&lt;th>Outcome&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>&lt;strong>1. Set up your project&lt;/strong>&lt;/td>
&lt;td>Install the Foundation SDK and create a project&lt;/td>
&lt;td>A working SDK project in Go or TypeScript&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>&lt;strong>2. Create a dashboard&lt;/strong>&lt;/td>
&lt;td>Use DashboardBuilder to define a dashboard with UID, tags, and time range&lt;/td>
&lt;td>A complete dashboard definition&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>&lt;strong>3. Add panels and queries&lt;/strong>&lt;/td>
&lt;td>Attach stat and time series panels with data queries&lt;/td>
&lt;td>A dashboard with live visualizations&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>&lt;strong>4. Export JSON&lt;/strong>&lt;/td>
&lt;td>Call build() and serialize the output to a file&lt;/td>
&lt;td>A deployment-ready JSON file&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>&lt;strong>5. Verify the output&lt;/strong>&lt;/td>
&lt;td>Inspect the JSON and optionally import into Grafana&lt;/td>
&lt;td>Confirmed valid dashboard JSON&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;/div>
&lt;/section>&lt;h2 id="before-you-start">Before you start&lt;/h2>
&lt;p>Have these ready before you open the path:&lt;/p></description></item></channel></rss>