HA Automation Visualizer

HA Automation Visualizer is a small showcase project born from experimenting with OpenAI Codex. Its aim is to make Home Assistant automations easy to share. Each YAML automation is grouped into a category so the collection can grow into a helpful library for any smart home.

Most of the code has been generated by OpenAI Codex with only minor manual tweaks. The project is open source and you are welcome to reuse or adapt the code. A live demo is available on GitHub Pages.

How it works

• Automations are stored in public/automations/.
• When the app loads, the YAML files are fetched and parsed with js-yaml.
• Mermaid renders the automations as flow charts.
• The front end uses React, TypeScript and Tailwind CSS via Vite.

Development

npm install
npm run dev

After making changes you can create a production build:

npm run build

Use npm run preview to test the built site locally.

Deploying to GitHub Pages

1. Ensure the base path in vite.config.ts is correct:

   export default defineConfig({
     base: '/ha-automation-visualizer/',
   });

2. Push your changes to the main branch. A GitHub Actions workflow will build the site and publish the contents of the dist folder to gh-pages.

3. To verify the result locally, run:

   npx serve dist

GitHub Pages then serves the static site from the gh-pages branch.