Uploaded May 2021 | Updated September 2026, 3 hours ago
Having an autosave fallback is an increasingly common pattern in forms that require a lot of writing, like GitHub issues and blog editors. I have closed a tab or accidentally refreshed a form to lose fifteen minutes of work many times in my life, and it's annoying to say the least. This comes even more into play for people in areas without consistent internet or cell service, they may flicker on and offline and need to have their data persisted even if they lose internet. In certain circumstances such as medical systems, finance, and mining data loss could have dire consequences.
In this tutorial, we'll be building an online offline note editor. When a user exits the page, their partially completed form data will be saved and load back into the form automatically when they come back to the page. We will differentiate between the post loaded into the editor and the completed notes by flagging the in-progress Note as a draft.
👩🏼💻 Links Mentioned 👩🏼💻
Blog post - welearncode.com/offline-editor
AWS Amplify Documentation - https://docs.amplify.aws/
Full Code - github.com/aspittel/offline-notes-vanilla-js
AWS Amplify Admin UI - sandbox.amplifyapp.com/getting-started
🌸 My Links 🌸
Blog - https://welearncode.com
Twitter - twitter.com/aspittel
Twitch - twitch.tv/aspittel
Portfolio - http://alispit.tel
Having an autosave fallback is an increasingly common pattern in forms that require a lot of writing, like GitHub issues and blog editors. I have closed a tab or accidentally refreshed a form to lose fifteen minutes of work many times in my life, and it's annoying to say the least. This comes even more into play for people in areas without consistent internet or cell service, they may flicker on and offline and need to have their data persisted even if they lose internet. In certain circumstances such as medical systems, finance, and mining data loss could have dire consequences.
In this tutorial, we'll be building an online offline note editor. When a user exits the page, their partially completed form data will be saved and load back into the form automatically when they come back to the page. We will differentiate between the post loaded into the editor and the completed notes by flagging the in-progress Note as a draft.
👩🏼💻 Links Mentioned 👩🏼💻
Blog post - welearncode.com/offline-editor
AWS Amplify Documentation - https://docs.amplify.aws/
Full Code - github.com/aspittel/offline-notes-vanilla-js
AWS Amplify Admin UI - sandbox.amplifyapp.com/getting-started
🌸 My Links 🌸
Blog - https://welearncode.com
Twitter - twitter.com/aspittel
Twitch - twitch.tv/aspittel
Portfolio - http://alispit.tel
