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
- Live demo: https://alexcoledev.github.io/cbt-toolkit/
- GitHub: https://github.com/alexcoledev/cbt-toolkit
No signup. No tracking. No frameworks.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.