Dev.to WebDev 🛠 Dev 👁 0

How I Built a Free CBT Thought Record Tool in Vanilla JS

I built a free CBT thought record tool that runs entirely in the browser - no signup, no backend, no frameworks. Why Vanilla JS? CBT tools handle sensitive mental health data. Every extra dependency is an att

I built a free CBT thought record tool that runs entirely in the browser - no signup, no backend, no frameworks.

Why Vanilla JS?

CBT tools handle sensitive mental health data. Every extra dependency is an attack surface. Vanilla JS means: zero dependencies, works offline, auditable, portable.

The Core: Thought Record State Machine

A CBT thought record is a 7-step process: Situation -> Emotions -> Thoughts -> Distortions -> Alternatives -> Re-rate -> Action.

Here's the state machine that drives it:

const ThoughtRecord = {
  state: { emotions: [], thoughts: [], distortions: new Set() },
  save() { localStorage.setItem('cbt-thought-record', JSON.stringify(this.state)); },
  detectDistortions(text) {
    const patterns = {
      'all-or-nothing': /always|never|every time/i,
      'mind-reading': /they think|they must think/i,
      'catastrophizing': /what if|disaster/i,
      'should-statements': /should|must|have to/i
    };
    const detected = new Set();
    for (const [d, p] of Object.entries(patterns)) {
      if (p.test(text)) detected.add(d);
    }
    return detected;
  }
};

The UI: Progressive Disclosure

One step at a time with a clear progress indicator - overwhelming = panic for anxious users.

Try It

No signup. No tracking. No frameworks.

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.