bug: generated Markdown output loses all user content on browser tab refresh — no localStorage persistence means a 30-minute README draft is permanently lost on accidental page reload

[divyanshim27]

Summary

ReadmeForge is a pure browser-based README generator with zero backend.
All user input lives in DOM form fields managed by readmeforge.js. There
is no localStorage persistence layer — when a user refreshes the page,
navigates away, or accidentally closes the tab, every field they've filled
in is instantly and permanently lost.

Concrete User Impact

A developer spends 25 minutes filling in project title, description,
installation steps, usage examples, tech stack, and screenshots across
all ReadmeForge sections. They accidentally hit Ctrl+R. The page
reloads. Every input field is blank. The generated Markdown preview
is empty. There is no recovery path.

This is the single highest-friction UX failure for a tool whose primary
use case requires sustained data entry across multiple sections.

Proposed Fix

Add auto-save to localStorage in readmeforge.js:

// readmeforge.js — add auto-save and restore

const STORAGE_KEY = 'readmeforge_draft';

// Auto-save all inputs on every change
function saveDraft() {
  const inputs = document.querySelectorAll('input, textarea, select');
  const draft = {};
  inputs.forEach(input => {
    if (input.id) draft[input.id] = input.value;
  });
  localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));
}

// Restore saved draft on page load
function restoreDraft() {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (!saved) return;

  try {
    const draft = JSON.parse(saved);
    Object.entries(draft).forEach(([id, value]) => {
      const el = document.getElementById(id);
      if (el) {
        el.value = value;
        el.dispatchEvent(new Event('input')); // trigger preview refresh
      }
    });
    showToast('Draft restored from last session');
  } catch (e) {
    localStorage.removeItem(STORAGE_KEY);
  }
}

// Clear draft after successful copy/export
function clearDraft() {
  localStorage.removeItem(STORAGE_KEY);
}

// Wire up: save on every input event
document.addEventListener('input', saveDraft);
document.addEventListener('DOMContentLoaded', restoreDraft);

Also add a "Clear Draft" button to the UI so users can intentionally
reset to a blank slate when starting a new project README.

Acceptance Criteria

• All form field values auto-saved to localStorage on every input event
• Draft restored automatically on DOMContentLoaded
• Toast notification shown when draft is restored
• "Clear Draft" button added near the Reset/Copy controls
• Draft cleared after user clicks "Copy Raw" (successful export)
• No external dependencies — pure localStorage API

Labels: bug, enhancement, ux, level: beginner

[divyanshim27]

Hey @Mohit-368 ,
I have deeply gone through the project repo and understood and analysed the project through local running & testing , based on which I found this as major lagging/point of enhancement .
Based on my skill-set and problem understanding , I would want to work on the issue and contribute to the repo.
Please assign it to me.

[aaniya22]

pls assign this under gssoc