⚡ What is ContinueJS?

ContinueJS makes losing user progress on the web extremely difficult.

Every day, users lose progress due to accidental tab closures, browser crashes, lost Wi-Fi connections, or misclicked navigation links. ContinueJS acts as an automated, local-first persistence layer between user input and browser storage (IndexedDB), preserving state until it is explicitly submitted or discarded.

• 🔒 Local-First & Privacy-Preserving: Zero network calls, zero tracking, zero telemetry.
• ⚡ Framework Agnostic: Pure Vanilla JS under 10 KB gzipped with first-class adapters for React, Vue, and Svelte.
• 🛡️ Smart Security: Password fields and sensitive inputs are automatically excluded. Optional Web Crypto AES-GCM 256-bit client-side encryption.
• 🤖 Agentic Ready: Designed for AI browser agents and automated form filling workflows.

📦 Installation

# Core library
npm install @continuejs/core

# UI Web Components (Optional)
npm install @continuejs/ui

# Framework Adapters (Optional)
npm install @continuejs/react    # React 18 & 19
npm install @continuejs/vue      # Vue 3
npm install @continuejs/svelte   # Svelte 4 & 5

🚀 Quick Start (Vanilla JS)

import { attach } from '@continuejs/core';
import '@continuejs/ui'; // Registers <continuejs-banner> Web Component

// 1. Attach ContinueJS to any form with one line
const { draft } = attach({
  target: document.querySelector('#job-application'),
  id: 'applicant-draft-v1',
  options: {
    retention: '7d', // Auto-expires after 7 days
    debounceMs: 300,
  },
});

// 2. Check if an unsaved draft exists from a previous session
if (await draft.hasDraft()) {
  const lastSaved = await draft.lastSaved();
  
  const banner = document.createElement('continuejs-banner');
  banner.setAttribute('last-saved', String(lastSaved));
  
  banner.addEventListener('continuejs-restore', async () => {
    await draft.restore(); // Automatically fills out all form fields!
  });
  
  banner.addEventListener('continuejs-discard', async () => {
    await draft.delete();
  });
  
  document.body.prepend(banner);
}

🌐 CDN Usage (No Build Step)

<script type="module">
  import { createDraft, attach } from 'https://esm.sh/@continuejs/core';
  import 'https://esm.sh/@continuejs/ui';

  attach({
    target: document.querySelector('#feedback-form'),
    id: 'feedback-draft',
  });
</script>

🎨 White-Labeling via CSS Shadow Parts

ContinueJS Web Components (<continuejs-banner> and <continuejs-modal>) feature full white-labeling capability:

/* Customizing <continuejs-banner> */
continuejs-banner::part(banner) {
  background: #0f172a;
  border-radius: 16px;
  border: 1px solid #6366f1;
}

continuejs-banner::part(restore-button) {
  background: #6366f1;
  color: white;
  border-radius: 9999px;
}

🤖 AI / IDE Agent Support

To prevent AI coding assistants (Cursor, GitHub Copilot, Gemini CLI, Windsurf, Claude Code) from hallucinating function signatures, ContinueJS includes:

• llms.txt: Standard machine-readable specification.
• AGENTS.md: Explicit code generation context and anti-hallucination rules.

📖 Documentation & Contact

• 📚 Official Documentation: continuejs.vercel.app
• 🐙 GitHub Repository: https://github.com/EldrexDelosReyesBula/ContinueJS
• 📧 Author & Contact: Eldrex Delos Reyes Bula ([email protected])
• 📝 License: MIT License