Live inline template previews

[karwosts]

Proposed change

Not totally sure about this one, just an idea I was exploring, wanted to get some more opinions.

What if we add a button on the template selector to turn on a live template render preview, similar to developer tools. In a lot of situations I could imagine that being pretty useful, though it also has some significant limitations (like dealing with variables).

Or showing template errors:

For the future, we could integrate this more tightly into the automation editor; where if you had an action like weather.get_forecasts in the automation with a response variable, if you run that action in the editor, then the response variable gets automatically added to the context of the template previews. Or if you run a define_variables action, those variables get added to the context of the preview. So you can kind of build up these more complex workflows with a much more rich editing experience, without having to jump all around between several different developer-tool windows and copy/pasting variable data.

I imagine that could get pretty complicated though, like if you have define variables action with templates that references yet other variables.

Didn't add anything like that here yet, but was just an idea for where this might go and be useful. Maybe this is enough on it's own to be worthwhile to start?

This probably needs more work before merging, e.g. it doesn't appear in the fullscreen mode of code editor, but first wanted to see if we like something like this to continue.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[Petro31]

This will make template entities much easier to understand in the ui when there is more than 1 template involved. This is a very good change IMO

[MindFreeze]

I love this. We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in. This could help with the variables issue as well, as it would let us roll it out gradually only where we are confident.

We need to find a good icon for the button.

[oerix]

I love this. We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in.

If not already, maybe this could be tied to 'Advanced mode' under Profile settings?

[Petro31]

I love this. We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in. This could help with the variables issue as well, as it would let us roll it out gradually only where we are confident.

We need to find a good icon for the button.

A calculator. Or an icon that represents results. I have a few from work (that I made) that I can share

[karwosts]

We already show a preview in some cases though (Template helpers, cards) so maybe it should be opt-in.

I made this opt out for the markdown card, since it's definitely not needed there, but I can't really think of any other place where we would want to disable this? (devtools/template doesn't use the template selector)

Petro says he wants this for template helpers even with the existing preview, since that's previewing the overall entity result, which is not the same thing as seeing the result of rendering an individual template. (Template entities may be a combination of multiple different individual templates).

We need to find a good icon for the button.

I used the 'test' icon (flask) we already use for testing conditions, but I'm fine with something else as well.

If not already, maybe this could be tied to 'Advanced mode' under Profile settings?

I would say not since this control is on the way out, we are trying to remove it. Anyway it's probably the non-advanced users who could most benefit from the help. The really un-advanced users won't be anywhere near a template selector anyway 😅

[parautenbach]

I really like this initiative, but want to point out that this will not directly benefit users like myself that exclusively use YAML to configure automations and scripts. Of course, one can experiment via the UI and then transfer the YAML as a workaround.

[silamon]

I think the code would be a lot easier to maintain if you add this feature within the ha-code-editor. That will also help with the problem that this live preview doesn't appear yet in the fullscreen view.

Given how many hearts this already attracked, I think people will love it and it's nice and clean embedded within the UI. I would personally allow to enable it on places, just to not have to solve every place in this pull request.

If I can suggest a different icon, I would pick mdiBugPlay.

[piitaya]

@silamon IMO, the logic should stay in ha-template-selector because all ha-code-editor are not for template and I would put template specific code and checks into this component. However, we could use a slot to display the preview and then it can be included in fullscreen mode.

[marcinbauer85]

Some notes:

1. Please use mdi:flask and mdi:flask-off for states
2. Don't wrap it in an alert, but rather use similar styling as we do have in the Developer tools -> Template view
3. Also add it in the fullscreen view: On narrow screens split horizontally, on wide screens split vertically. Fullscreen could maybe reuse wa-splitpane for resizing ?

[karwosts]

Also add it in the fullscreen view: On narrow screens split horizontally, on wide screens split vertically. Fullscreen could maybe reuse wa-splitpane for resizing ?

Is this necessary for a first iteration? Sounds pretty complex and I think it could be a followup PR.