The filter should change which drafts are visible while keeping the edited text. Regeneration has a different purpose: it creates fresh drafts from the current settings and can replace those edits. Keeping those operations separate makes the interface easier to understand and the output easier to trust.

The complete runnable HTML example is included in A category filter should not reset an edited textarea. Save the code as example.html to try the editing sequence.

Keep the template and the edited draft separate

A template generator has three useful inputs to distinguish. The original template defines the starting words. Personalization values fill its placeholders. The editable draft contains the words a person currently wants to use, including any changes they made after generation.

For example, a generated reminder might say “Please bring a notebook.” A person could replace that with “Bring the blue registration folder.” Rebuilding the message from its original template would erase that decision.

Use a stable identifier for each template, such as event-reminder. In a small page, a map from that identifier to an existing card is enough to find its textarea without recreating the control:

const cards = new Map(templates.map((template) => [
  template.id,
  document.querySelector(`[data-id="${template.id}"]`),
]));

The textarea’s value is the current editable text. Copying the original template or reading its initial HTML content can miss later edits. MDN explains how the textarea value property reads and sets its current contents.

For a larger interface that removes cards from the DOM, store the edited text by the same stable identifier and restore it when a card returns. Keeping existing controls is simpler for a short list; it does not provide persistence across a page reload.

Make filtering change visibility

The filter handler only needs to update which cards are shown:

function filterCards() {
  for (const template of templates) {
    const card = cards.get(template.id);
    card.hidden = category.value !== 'all'
      && template.category !== category.value;
  }
}

This function never writes to a textarea. A draft can disappear when someone selects another category and return with the same text. The HTML hidden attribute controls whether a card is rendered. It is a visibility mechanism, so any later operation that needs only visible drafts must explicitly filter for them. MDN documents the hidden attribute and its behavior.

A common failure is connecting the category selector to a general “render everything” function that also assigns newly generated text. The list looks correctly filtered, but the person’s edits have disappeared. Give visibility and generation separate functions so the category handler cannot accidentally replace the draft.

Make replacement deliberate

Regeneration intentionally assigns fresh values:

function regenerate() {
  const values = {
    group: group.value.trim() || 'Community team',
    time: time.value.trim() || 'Thursday at 6pm',
  };
  for (const template of templates) {
    const card = cards.get(template.id);
    card.querySelector('textarea').value = template.build(values);
    updateCount(card);
  }
  filterCards();
}

In this standalone example, changing the settings leaves the current drafts intact until a person clicks Regenerate drafts. The warning beside that button explains that regeneration replaces manual edits in every draft, including hidden drafts.

TheFaithApp’s SMS generator uses a related boundary: changing the occasion preserves edited drafts, while changing personalization or opt-out settings rebuilds them. That replacement policy needs visible wording beside the settings and a clear status message. An explicit button, as used in the example, is another way to make the boundary easy to see.

Avoid saying “your edits are saved” when they only remain in the current page. Tell people to copy or download their work before leaving if the tool has no persistent draft storage.

Copy and download the current text

Read the textarea when the person requests an output. A freshly generated message may differ from the text they have just reviewed.

function visibleDrafts() {
  return templates
    .filter((template) => !cards.get(template.id).hidden)
    .map((template) => ({
      title: template.title,
      message: cards.get(template.id).querySelector('textarea').value,
    }));
}

A per-card copy action can read that card’s textarea directly. Await the clipboard write before displaying a success message. If the browser rejects the write, select the draft and offer manual copying. Clipboard access has security requirements and can fail, so the fallback should preserve the text. MDN describes the clipboard write operation and its failure conditions.

For a download, collect the current visible drafts, build a text Blob, and create a temporary object URL. Release that URL after initiating the download. MDN explains object URLs and their lifecycle.

The example’s Array.from(text).length counter counts Unicode code points. It does not calculate visible grapheme clusters, SMS segments, or delivery charges. JavaScript string iteration yields code points.

Keep entered text out of analytics

The sample uses no analytics, network calls, or storage. If a production tool records interactions, a fixed template identifier and a fixed action name can describe a copy or filter event. Draft text, personalization values, and clipboard contents should stay out of those event payloads.

Check the complete editing sequence

Exercise the interaction as a person would use it:

1. Edit a generated draft, select another category, and return. The edited text should remain unchanged.

2. Change the settings and regenerate. Fresh text should replace the earlier edits according to the stated policy.

3. Edit that fresh draft again, then copy it. The output should match the final textarea value.

4. Download one category. The file should contain its current edits and exclude hidden drafts.

5. Deny clipboard access. The page should offer manual copying without claiming that the automatic copy succeeded.

Those checks cover the handoff from generated text to a person’s work. Keeping that handoff explicit protects the draft through the small interactions people use to find, refine, and keep it.

Disclosure: AI assisted the wording and code example.