Vanilla JS & Web Components Integration

Integration guide for plain JavaScript projects and Web Component applications.

Simple HTML Form Integration

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vanilla JS Example</title>
</head>
<body>

  <div id="banner-slot"></div>

  <form id="job-application">
    <input type="text" name="applicantName" placeholder="Full Name">
    <input type="email" name="applicantEmail" placeholder="Email Address">
    <textarea name="coverLetter" placeholder="Cover Letter"></textarea>
    
    <button type="submit">Submit Application</button>
  </form>

  <script type="module">
    import { attach } from '@continuejs/core';
    import '@continuejs/ui';

    const form = document.querySelector('#job-application');

    // Attach ContinueJS
    const { draft } = attach({
      target: form,
      id: 'job-application-v1',
    });

    // Check for saved draft
    async function init() {
      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();
        });
        
        banner.addEventListener('continuejs-discard', async () => {
          await draft.delete();
          form.reset();
        });
        
        document.querySelector('#banner-slot').appendChild(banner);
      }
    }

    init();
  </script>
</body>
</html>

Vanilla JS & Web Components Integration ​

Simple HTML Form Integration ​

Vanilla JS & Web Components Integration

Simple HTML Form Integration