editable-title | Vaadin

A title element that can be edited


The <editable-title> component allows a title that can be modified.

  <h1>Title Here</h1>

showing off the component


npm install editable-title



open is available as both an attribute and a property. When the editable title is open it will display the edit mode. When it is not open, the title will be displayed.

<editable-title open>
  <h1>Title Here</h1>

Or modify the property:

let editableTitle = document.querySelector('editable-title');

editableTitle.open = false;

change event

Any time the title changes, a change event is fired. The event.detail contains a string of the new title.

let editableTitle = document.querySelector('editable-title');

editableTitle.addEventListener('change', ev => {
  console.log('New title is', ev.detail);


These variables are available:


Controls the height of the input.


Controls the width of the input.


Controls the font-size of the input.


Controls the outline of the input.


Controls the font-size of all buttons.


Controls all buttons' background-color style.


Controls the border of all buttons.




Link to this version
ImportedReleased 12 January 2019BSD 2-clause "Simplified" License
Framework Support
Browser Independent
Install with
npm install editable-title"@1.0.2"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.2