A digital adaptation of an evidence-based pencil-and-paper intervention developed with NIHR funding to help prevent self-harm in autistic adults. This privacy-focused, frontend-only web application increases accessibility and personalisation of the intervention, guiding users through a structured approach to identifying coping strategies, warning signs, and support contacts – all stored securely in the browser with no data leaving the user’s device.
Solution
The platform guides users through a step-by-step workflow to build a comprehensive safety plan. Users work through sections covering warning signs, coping strategies, support contacts, and crisis resources, with built-in training elements including instructions and guidance.

The app includes customizable distress scales with adjustable colors, labels, and intensity levels, along with sketch tools for users to draw or upload personal imagery. Progress auto-saves to browser storage, allowing users to resume at any time. Completed plans can be exported as Word documents (.docx) or printed to PDF for offline access or sharing with healthcare providers.
Tech Stack
React, TypeScript, Vite, Tailwind CSS, shadcn/ui, IndexedDB, and Azure Static Web Apps
Key Features
- Fully offline & private – all data stored in browser (localStorage, cookies, IndexedDB)
- Step-by-step guided form with auto-save progress
- Customizable distress scales (colors, labels, number of steps, direction)
- Sketch canvas and image upload tools
- Export to Word (.docx) with embedded images
- Print to PDF via browser
- Responsive, accessible UI
- Automatic CI/CD deployment via Azure Pipelines
Funding
This work is supported by Autism Action and builds on research funded by the National Institute for Health and Care Research (NIHR)


Leave a Reply