@snagtag/web-component

Drop-in <test-kit> custom element for SnagTag. Works in any web page - no React required.

Install

npm install @snagtag/web-component

Or use the IIFE bundle via a script tag (no bundler needed):

<script src="https://unpkg.com/@snagtag/web-component/dist/index.global.js"></script>

Usage

<!-- Local adapter (default - stores in IndexedDB) -->
<test-kit></test-kit>

<!-- Supabase adapter -->
<test-kit
  adapter="supabase"
  supabase-url="https://your-project.supabase.co"
  supabase-key="your-anon-key"
></test-kit>

<!-- REST adapter -->
<test-kit
  adapter="rest"
  rest-url="https://api.example.com/snagtag"
></test-kit>

Features

• Shadow DOM for style isolation
• FAB button with pulse animation
• Element inspector with hover detection and keyboard navigation
• Test report modal (single/batch modes)
• Screenshot capture
• CSS custom properties for theming
• Works with supabase, rest, or local adapters

Theming

Override CSS custom properties on the host element:

test-kit {
  --st-primary: #9333ea;
  --st-bg: #1f2937;
  --st-text: #f9fafb;
  --st-border: #4b5563;
}

Attributes

| Attribute | Values | Default | |-----------|--------|---------| | adapter | local, supabase, rest | local | | supabase-url | Supabase project URL | - | | supabase-key | Supabase anon key | - | | rest-url | REST API base URL | - | | tenant-id | Tenant ID | - | | user-id | User ID | - |

License

MIT