Custom integration for file editor. Useful for home assistant docker

Share your Projects! Custom Integrations
1

Blueprint Studio - A Modern File Editor for Home Assistant :rocket:

Category: Integrations

Tags: integration #editor yaml #custom-component hacs

Hey everyone! :wave:

I’m excited to share Blueprint Studio, a new custom integration I’ve been working on that brings a professional, VS Code-like file editing experience directly into your Home Assistant dashboard.

:thinking: The Problem

We’ve all been there - you need to quickly edit a YAML file, tweak an automation, or fix a configuration error. Your options are usually:

  • SSH into your system

  • Use an external SFTP client

  • Install a heavy add-on like VS Code Server

  • Use the basic File Editor add-on

What if you could just… edit files directly in Home Assistant with a modern, powerful editor? That’s why I built Blueprint Studio.

:sparkles: What is Blueprint Studio?

Blueprint Studio is a custom integration that adds a full-featured code editor to your Home Assistant sidebar. Think VS Code, but built right into your HA interface.

Blueprint Studio HACS HA

:dart: Key Features

Professional Editor

  • :white_check_mark: Syntax highlighting for YAML, JSON, Python, JavaScript, HTML, CSS, Markdown, Shell

  • :white_check_mark: Real-time YAML validation - Catch errors before you save!

  • :white_check_mark: Multi-tab interface - Edit multiple files at once

  • :white_check_mark: Code folding, bracket matching, line numbers

  • :white_check_mark: Search and replace functionality

  • :white_check_mark: Keyboard shortcuts (Ctrl+S to save, Ctrl+F to search, etc.)

File Management

  • :white_check_mark: File tree explorer with expandable folders

  • :white_check_mark: Create, delete, rename, copy, move files and folders

  • :white_check_mark: Upload files or entire folders (ZIP support)

  • :white_check_mark: Download files or folders as ZIP archives

  • :white_check_mark: File search to quickly find what you need

Security & Safety

  • :lock: Admin-only access - Only administrators can use it

  • :shield: Path protection - Can’t access files outside config directory

  • :page_facing_up: File type restrictions - Only edit safe text files

  • :closed_lock_with_key: Critical file protection - Can’t delete configuration.yaml or secrets.yaml

  • :dark_sunglasses: Hidden sensitive folders - .storage and other critical directories are hidden

Dark Theme

  • :crescent_moon: Clean, VS Code-inspired dark interface

  • :eye: Easy on the eyes for late-night config editing

  • :art: Syntax highlighting optimized for dark backgrounds

:wrench: Installation

Via HACS (Recommended)

  1. Add Custom Repository:

  • Open HACS

  • Go to Integrations

  • Click the three dots (⋮) → Custom repositories

  • Add: https://github.com/soulripper13/blueprint-studio

  • Category: Integration

  1. Install:

  • Search for “Blueprint Studio” in HACS

  • Click Download

  • Restart Home Assistant

  1. Configure:

  • Go to Settings → Devices & Services → Add Integration

  • Search for “Blueprint Studio”

  • Click to add

  1. Access:

  • Look for “Blueprint Studio” in your sidebar

  • Start editing!

Manual Installation

Download from GitHub Releases, extract to custom_components/blueprint_studio, restart, and add via integrations.

:mortar_board: Use Cases

Here’s what I’ve been using it for:

  • :pencil2: Quick edits to automations.yaml without restarting SSH

  • :mag: Debugging integration configurations with syntax highlighting

  • :memo: Creating and editing Lovelace dashboard YAML

  • :bug: Fixing YAML syntax errors with real-time validation

  • :package: Backing up configs by downloading folders as ZIP

  • :rocket: Testing new automations in a separate file before merging

What would you use it for?

:vs: How Does It Compare?

| Feature | Blueprint Studio | File Editor (Add-on) | VS Code Server | SSH/SFTP |

|---------|------------------|---------------------|----------------|----------|

| Installation | Custom Component | Add-on | Add-on | External |

| Resource Usage | Lightweight | Low | High | Minimal |

| Interface | VS Code-like, Multi-tab | Simple, Single file | Full VS Code | Terminal |

| YAML Validation | :white_check_mark: Built-in | :x: | :white_check_mark: Extensions | :x: |

| File Management | :white_check_mark: Full | :warning: Basic | :white_check_mark: Full | :white_check_mark: Full |

| Learning Curve | Low | Very Low | Medium | High |

:keyboard: Keyboard Shortcuts

One of my favorite features - familiar shortcuts that just work:

  • Ctrl+S / Cmd+S - Save file

  • Ctrl+Shift+S - Save all open files

  • Ctrl+F - Search in file

  • Ctrl+H - Search and replace

  • Ctrl+G - Go to line

  • Ctrl+/ - Toggle comment

  • Ctrl+W - Close tab

  • Ctrl+Z - Undo

  • Ctrl+Y - Redo

:bug: Known Issues & Limitations

Being transparent about current limitations:

  • No light theme yet - Dark theme only (planned for v1.1)

  • No git integration - Can’t commit changes directly (planned for future)

  • Admin only - By design for security, but means non-admin users can’t use it

  • Config directory only - Can’t edit files outside HA config (security feature)

:world_map: Roadmap

I’m actively developing and have plans for:

  • :sun_with_face: Light theme option

  • :gear: Configurable editor settings (font size, tab size, etc.)

  • :arrows_counterclockwise: File diff viewer

  • :bar_chart: Git integration for version control

  • :mag: Search across all files

  • :floppy_disk: Built-in backup/restore

  • :scroll: File history/versioning

What features would YOU like to see? Drop your ideas in the comments!

:handshake: Looking for Feedback!

This is v1.0.0 - the first stable release. I’ve tested it extensively on my own system, but I’d love to hear from the community:

  • :bug: Bug reports - If something breaks, please let me know!

  • :bulb: Feature suggestions - What’s missing? What would make it better?

  • :camera_flash: Screenshots - If you install it, share screenshots!

  • :star: General feedback - Too simple? Too complex? Just right?

I’m very open to contributions and suggestions. This is for the community, so your input matters!

:books: Documentation & Links

:pray: Acknowledgments

Big thanks to:

  • CodeMirror for the excellent editor library

  • The HA Community for inspiration and feedback during development

  • VS Code for design inspiration

  • Everyone who beta tested this!

:speech_balloon: Let’s Discuss!

I’d love to hear your thoughts:

  • Would this be useful for your setup?

  • What features are must-haves for you?

  • Any concerns about security or performance?

  • Have you tried it? How was your experience?

Drop a comment below and let me know what you think!

:star2: Support the Project

If you find Blueprint Studio useful:

  • :star: Star it on GitHub - Helps with visibility

  • :loudspeaker: Share it - Tell others who might benefit

  • :bug: Report bugs - Help make it better

  • :bulb: Suggest features - Shape the roadmap

  • :handshake: Contribute - PRs welcome!

Thanks for reading, and happy editing! :rocket:

P.S. - This is my first public Home Assistant integration, so constructive feedback is especially welcome!

TL;DR: New custom integration that adds a VS Code-like file editor to Home Assistant. Multi-tab editing, YAML validation, file management, all from your HA dashboard. Available via HACS. Looking for feedback!

2 Likes
2

Great initiative! I’m giving it a spin, I was looking for an alternative to vscode and file editor

3

Great tool so far, I’ve recently gotten into HA and this is a great tool for my docker installation. Is there any plan for some auto-completion?

4

Thanks. I got tired of always have to open files externally for HA docker.

5

Hmm didn’t think of it. Will try to implement it. :grin:

6

Love it so far, please keep it going.

1 Like
7

I’m waiting for my PR to review to make available in default HACS list.

8

I’ve implemented the auto completion and some other updates. Check it out and let me know

9

New Release is out with new features

10

Really nice! Great alternative to the resource-eating monster Studio Code :+1:

1 Like
11

More new features and polishes added. Check it out. And spread the word. :grin:

12

I looked for that but couldn’t work out how. Pls guide me.

13

What do you mean? Just go to GitHub - soulripper13/blueprint-studio: Modern VS Code-like file editor for Home Assistant. Edit YAML configs with syntax highlighting, multi-tab support, and file management and click on :star: on the top right…

14

I’ve released a new minor update v1.3.1. There will a new one v1.3.2 also soon with new features that i’m curently testing and debugging. In a day or two.

# Blueprint Studio v1.3.2 Release Notes

This release introduces powerful visual tools for reviewing code changes, bulk file management, and a significantly upgraded search experience.

## ✨ New Features

### 📦 Bulk Download
*   **Select Multiple**: Enter selection mode via the new checklist icon to pick multiple files and folders.
*   **Auto-Zipping**: Click download to receive a single `.zip` file containing all your selected items, keeping directory structures intact.

### 🔍 Visual Diff Viewer (Integrated)
*   **Compare Changes Anywhere**: See exactly what you changed directly from the file explorer.
*   **Side-by-Side View**: Modified files now show a "Difference" icon in the tree; click it to see your current work vs the last commit.
*   **Color Coded**: Deletions are highlighted in red, additions in green, optimized for high readability in both Dark and Light themes.

### 🔎 Professional Search & Replace
We've significantly upgraded the search functionality to make finding and navigating code even easier!
*   **Enhanced Widget**: A new floating search tool with dedicated buttons for Next, Previous, Replace, and Replace All.
*   **Live Match Counting**: Instantly see "X of Y" matches (e.g., "1 of 10") in the search toolbar as you navigate.
*   **Distinct Active Highlight**: The currently selected match is now highlighted in vivid orange with black text.
*   **Smart Wrapping**: Search now automatically wraps around to the beginning (or end) of the file.
*   **Keyboard Shortcuts**: `Ctrl+F` to Find, `Ctrl+H` to Replace. Use `Enter` for next, `Shift+Enter` for previous.

### 🛡️ Optimized .gitignore Editor
*   **Clean & Efficient**: The exclusions manager now automatically detects redundant rules. If you ignore a folder, it won't clutter your `.gitignore` file with every single file inside it.
*   **Intelligent Toggle**: Background Git tasks and UI notifications now fully respect your Git Integration settings.

## 🚀 Improvements & Polish
*   **Enhanced Scrolling**: Improved the diff viewer behavior on smaller screens and mobile devices.
*   **Smart Selection**: Improved cascading checkbox logic for complex folder structures.
*   **Theme Optimization**: Fine-tuned colors for syntax highlighting and UI elements to ensure maximum readability.