<fieldset>
  <legend>Enter some config details</legend>
  <textarea></textarea>
  <button id="btnSave">save config</button>
</fieldset>
body {
  font-family: 'Helvetica neue', sans-serif;
  font-size: 16px;
}

fieldset {
  max-width: 30%;
  margin: 5em auto;
  padding: 2em;
  border: 3px groove #ececec;  
  border-radius: 4px;
}
textarea {
  width: 100%;
  min-height: 15em;
  display: block;
  border: 1px solid #999;
  border-radius: 4px;
}
button {
  display: block;
  margin: 1em 0 0;
  border: 1px solid dark;
  padding: 0.75em;
  line-height: 1;
  border-radius: 2px;
  font-size: 16px;
}
const downloadToFile = (content, filename, contentType) => {
  const a = document.createElement('a');
  const file = new Blob([content], {type: contentType});
  
  a.href= URL.createObjectURL(file);
  a.download = filename;
  a.click();
  
  URL.revokeObjectURL(a.href);
};

document.querySelector('#btnSave').addEventListener('click', () => {
  const textArea = document.querySelector('textarea');
  
  downloadToFile(textArea.value, 'my-new-file.txt', 'text/plain');
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.