New Card: Replacement for text_input editor

skavan · December 10, 2024, 10:07pm

Hi,

I’m new to all this so go easy on me. I just created a replacement for the ha-text-editor (it uses ha-text-editor under the hood). I wanted real-time updates and more.

Super Text Input Card for Home Assistant

I hate the default text_input card. It’s huge, ugly and the onblur update is annoying. Especially on mobile. I wanted a replacement that was compact, flexible, could easily be styled and had icon(s)/button(s).

So, I made one. A highly customizable text input card that provides real-time updates, buttons (and actions), advanced styling options and more. It also supports firing events after text updates, to same on creating automations. It supports text entities as well as text_input entities.

Want to edit in real-time (with debounce) - yes.
Want to send your text to TTS with a built in button - yes.
Want to update the text and then send an action with the text supplied - yes.
Want 4 buttons - yes.

Again - I’m new to this and hacked my way to this card. Must be bugs. Must be missing things. Just let me know. I’ll do my best! Also feel free to edit the code and send me PR’s. The code is heavily commented. Not quite ready for HACS yet. So manual install.

DelanoLima · January 30, 2025, 1:16am

Hi. It doesn’t work for me.

I did all the steps, but the card doesn’t appear in my home assistant.

skavan · January 30, 2025, 9:46pm

What’s the error? Did you refresh? Restart?

wobeca85 · October 30, 2025, 2:12pm

Hi @skavan,

I’m using your super-text-input card as a search bar solution on my HA dashboard.

It works pretty good, but it would be great if the realtime update mode would be enhanced. Did you make any progress on that subject? On the repository page you mentioned a hack for this. Care to inform me/us what this hack is?

Thanks for the addition of a great card!

davidesolito · April 6, 2026, 10:13am

After updating to Home Assistant 2026.4, the input_text card no longer works correctly.
The configured parameters no longer have any effect, especially in the editor section.
The editor parameters don’t influence anything anymore, and the editor is no longer positioned in front of the card but appears offset/misaligned.

Are there any solutions? It was the best card for me to enter text to announce on my Amazon Echo devices.

Here’s the screenshot of how it was before and how it became after the update.

This shows that the editor is no longer aligned with the card behind it and no longer follows the set parameters.

skavan · May 29, 2026, 9:44pm

Sorry all. I've refactored and upgraded the widget.

Give it a whirl and let me know if its working now.

Here's some eye candy:

skavan · May 29, 2026, 9:55pm

fixed in latest version I hope.

skavan · May 29, 2026, 9:55pm

Fixed in latest version I think!

wobeca85 · June 2, 2026, 9:38am

Hi,

Thank you very much for all your efforts!

Unfortunately, after replacing the files with the new ones from your repository and restarting home assistant, the card doesn't seem to be working.

The card isn't rendering (not in the visual editor, but neither when I add it to my view).
Also, after selecting a text_input helper, I'm not able to change from blur to real-time mode (the option is there, but it doesn't react when clicking on it).

Anything I need/can change to test or troubleshoot? Or am I doing something wrong?

I'm using Edge as a browser.

Thanks!

skavan · June 2, 2026, 3:26pm

Ugh. Sorry.

Did you download Release Fixed config ui to catchup with codebase · skavan/super-text-input · GitHub -- in the version just before that, it had that bug you describe (works in yaml but not in config, was fixed, I thought in 0.3.22).
Did you do a hard refresh of the browser (open dev tools F12), right click on refresh and select hard refresh
Could you try on chrome
Are you on the latest HA? Please post HA version.

Some things to try:
1. Which version are you actually loading? Open your dashboard, then open browser DevTools (F12) → Console tab, and paste this:

js

window.customCards?.find(c => c.type === 'super-text-input')?.version

If it prints "0.3.22" you have the latest. If it prints anything older, the browser is loading a cached or older copy.

2. Check the resource URL. In HA: Settings → Dashboards → ⋮ menu → Resources. Find the super-text-input.js row. If the URL is /local/community/super-text-input/super-text-input.js?v=0.3.18 (or anything older than ?v=0.3.22), edit it and bump the ?v= to 0.3.22. Save. Hard-refresh again.

3. Console errors. With DevTools open, reload the dashboard. Paste any red error lines you see.

**4. Finally, could you copy paste the yaml's from super-text-input/sample-yaml.yaml at 3036b06055070b0df8c17b2c2282312d0fd1dc24 · skavan/super-text-input · GitHub into a clean dashboard and if that works?

Probably should move this to a github issue so we can get more involved w/o cluttering up the thread!

wobeca85 · June 2, 2026, 7:32pm

Hi @skavan,

It was the resource URL. After updating it to "/local/community/super-text-input/super-text-input.js?v=0.3.22" and hard refreshing it, it works

Thanks for the feedback!

skavan · June 25, 2026, 6:54pm

Major updates (bug fixes and features) and HACS (custom) support.

Edwin_D · July 1, 2026, 9:02pm

Thanks for this great component, and you helping me improve my home announcement widget. It allows us to send messages to the dashboard to each individual room or to all rooms at once, using tts to Google Home devices:

I also used UIX to make a foundry, which wraps this in a component I can reuse.

Which buttons are shown can be set by parameters, so I can put one in each room dashboard with only the appropriate button. This is the code for the uix foundry:

uix_foundries:
  message-editbox:
    forge:
      mold: card
      billets:
        edwin: false
        fleur: false
        rianne: false
        jasper: false
        allen: false
        hide_label: true
    element:
      type: custom:uix-forge
      forge:
        mold: card
      element:
        type: horizontal-stack
        square: false
        cards: |
          [
            {{ {
              "type": "custom:super-text-input",
              "entity": "input_text.tts_tekst",
              "placeholder": "Omroeptekst",
              "hide_label": hide_label,
              "update_mode": "realtime",
              "debounce_time": 300,
              "style": {
                "card": {
                  "height": "32px",
                  "border-radius": "0px",
                  "padding": "0px",
                  "margin": "0px"  
                },
                "editor": {
                  "vertical-align": "center"
                  }
              }
            } }}

            {% if jasper %}
              , {{ {
                "type": "custom:button-card",
                "entity": "input_button.tts_jasper",
                "show_entity_picture": true,
                "show_name": false,
                "entity_picture": "[[[ return states['person.jasper_delsman'].attributes.entity_picture ]]]",
                "styles": {
                  "card": [
                    {
                      "border-radius": "50%",
                      "height": "32px",
                      "width": "32px",
                      "padding": "0"
                    }
                  ],
                  "icon": [
                    {
                      "border-radius": "50%",
                      "width": "100%"
                    }
                  ]
                },
                "tap_action": {
                  "action": "toggle"
                },
                "hold_action": {
                  "action": "toggle"
                }
              } }}
            {% endif %}
            {% if rianne %}
              , {{ {
                "type": "custom:button-card",
                "entity": "input_button.tts_rianne",
                "show_entity_picture": true,
                "show_name": false,
                "entity_picture": "[[[ return states['person.rianne_delsman'].attributes.entity_picture ]]]",
                "styles": {
                  "card": [
                    {
                      "border-radius": "50%",
                      "height": "32px",
                      "width": "32px",
                      "padding": "0"
                    }
                  ],
                  "icon": [
                    {
                      "border-radius": "50%",
                      "width": "100%"
                    }
                  ]
                },
                "tap_action": {
                  "action": "toggle"
                },
                "hold_action": {
                  "action": "toggle"
                }
              } }}
            {% endif %}
            {% if edwin %}
              , {{ {
                "type": "custom:button-card",
                "entity": "input_button.tts_edwin",
                "show_entity_picture": true,
                "show_name": false,
                "entity_picture": "[[[ return states['person.edwin'].attributes.entity_picture ]]]",
                "styles": {
                  "card": [
                    {
                      "border-radius": "50%",
                      "height": "32px",
                      "width": "32px",
                      "padding": "0"
                    }
                  ],
                  "icon": [
                    {
                      "border-radius": "50%",
                      "width": "100%"
                    }
                  ]
                },
                "tap_action": {
                  "action": "toggle"
                },
                "hold_action": {
                  "action": "toggle"
                }
              } }}
            {% endif %}
            {% if fleur %}
              , {{ {
                "type": "custom:button-card",
                "entity": "input_button.tts_fleur",
                "show_entity_picture": true,
                "show_name": false,
                "entity_picture": "[[[ return states['person.fleur_delsman'].attributes.entity_picture ]]]",
                "styles": {
                  "card": [
                    {
                      "border-radius": "50%",
                      "height": "32px",
                      "width": "32px",
                      "padding": "0"
                    }
                  ],
                  "icon": [
                    {
                      "border-radius": "50%",
                      "width": "100%"
                    }
                  ]
                },
                "tap_action": {
                  "action": "toggle"
                },
                "hold_action": {
                  "action": "toggle"
                }
              } }}
            {% endif %}
            {% if allen %}
              , {{ {
                "type": "custom:button-card",
                "entity": "input_button.tts_allen",
                "icon": "mdi:account-group",
                "show_icon": true,
                "show_name": false,
                "styles": {
                  "card": [
                    {
                      "border-radius": "50%",
                      "height": "32px",
                      "width": "32px",
                      "padding": "0"
                    }
                  ],
                  "icon": [
                    {
                      "border-radius": "50%",
                    }
                  ]
                },
                "tap_action": {
                  "action": "toggle"
                },
                "hold_action": {
                  "action": "toggle"
                }
              } }}
            {% endif %}
           ]
          }