CloudWatch Dashboards as Code: A Developer-Focused Accelerator

Introduction#

Coming from a DevOps/Platform engineering background, my recent challenge was to create an easier way for developers to build CloudWatch dashboards using Infrastructure as Code (IaC). Traditionally, engineers construct dashboards in the AWS console, perfect their layout, then extract the JSON definitions to incorporate into their IaC workflows for consistent, automated deployments at scale.

While functional, this approach remains fundamentally manual - a significant limitation when supporting multiple development teams. As platform engineers, we need to provide teams with:

• Standard dashboard templates containing essential metrics for each AWS service
• The ability to customize and extend these base dashboards
• A seamless path to IaC integration

In this article, I’ll walk through my journey of creating a web-based CloudWatch Dashboard Generator - built through “vibe coding” - that addresses this platform engineering challenge.

• Introduction
• The Challenge
• Vibe Coding My Way to a Solution
• Harder than I thought
• See it in action
• How to customize it for your own needs?
  • Adding new resources
• Conclusion

The Challenge#

As a platform engineer, I recognized two competing needs:

1. Standardization: Ensuring all teams monitor the right metrics for each AWS service

   • Critical for security, compliance, and operational excellence
   • Example: All Lambda functions should track invocations, errors, and throttles by default

2. Customization: Allowing application teams to add service-specific metrics

   • Necessary for debugging and optimization
   • Example: A payment service might want to track Lambda duration percentiles

Traditional approaches forced teams to either:

• Build dashboards manually (time-consuming, inconsistent)
• Use rigid templates (limited flexibility)

Vibe Coding My Way to a Solution#

While researching options on the interweb, I found exactly the right starting point - the AWS CloudWatch Dashboard Generator. This Python-based tool demonstrated how to programmatically generate dashboard JSONs from simple inputs, solving the fundamental automation problem.

However, I needed to adapt it for:

• Broader accessibility (no local Python setups)
• Standardized starting points (pre-built templates for common services)

With zero formal web development experience and access to a plethora of AI coding assistants 😀, I ventured into this journey purely on 💥“Vibes”💥

1. Started with the AWS CloudWatch Dashboard Generator Python project
2. Decided to make it web-accessible (no Python env setup required)
3. Used basic HTML/JS with heavy reliance on:
   • AI coding assistants for syntax fixes
   • Browser developer tools for debugging
   • AWS documentation for widget specifications

The result? A functional MVP built in hours rather than weeks.

The result keeps all the power of the original tool while solving my specific needs around standardization and scale.

Harder than I thought#

The initial version worked, but required several refinements to make it truly maintainable or scalable - I found myself in a loop of:

1. Write prompt → 2. Generate code → 3. Realize it’s not quite right → 4. Fine tune my prompt → 5. Repeat

The key improvement came when I externalized all dashboard logic into separate JSON templates. This allowed:

• Updating widgets without modifying application code
• Adding new services through configuration alone

The final architecture achieved what I consider true DevOps-friendly design:

• Platform teams manage templates via JSON
• Developers get self-service dashboard generation
• No JavaScript changes required for most updates

See it in action#

The application is deployed as github pages and can be accessed here - Cloudwatch Dashboard Generator. All the source code can be found here - aws-dashboard-generator-spa.Refer the below for a quick demo of the app.

How to customize it for your own needs?#

Adding additional AWS resources or updating existing dashboard definition is very simple and requires minimal to absolutely no javascript knowledge

Adding new resources#

Adding resources would need a change to the following file - src/data/templates/index.js. Refer below for the change summary.

Conclusion#

Building this CloudWatch Dashboard Generator has been both fun and rewarding. Many thanks to the creators of the original Python tool that inspired this solution. By transforming it into a web-based SPA with JSON templates, I’ve created a maintainable system that:

• Enforces monitoring standards
• Preserves team customization
• Scales across hundreds of services

Sometimes the most useful tools come from iterating on existing ideas - this project proves just that.