Skip to main content

Pro Features New

All 10 Pro modules with live examples. View the source code to see exactly how each API works.

Privacy-First Analytics Pro

Cookie-free page view and event tracking via navigator.sendBeacon. Zero impact on page performance.

Ready — events queue locally and flush in batches.
import { init, track, timing } from 'weblisk/pro/analytics.js';

// Init with your endpoint
init('/api/analytics', {
  pageViews: true,
  flushInterval: 30000
});

// Track custom events
track('cta_click', { button: 'signup', page: 'home' });

// Track performance timings
timing('api_latency', 142);

Full source available with Weblisk Pro

Get Pro Access
A/B Testing Pro

Hash-based deterministic variant assignment. Persists across sessions via localStorage.

Control
Blue CTA 
Assigning variant...
import { experiment, convert } from 'weblisk/pro/ab.js';

const exp = experiment('cta-color', ['control', 'blue-cta']);
const variant = exp.variant(); // deterministic assignment

// On conversion
convert('cta-color');

Full source available with Weblisk Pro

Get Pro Access
Data Table Pro

Sortable, filterable, paginated tables with CSV export — all from a single function call.

import { table, exportCSV } from 'weblisk/pro/table.js';

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'role', label: 'Role', sortable: true },
  { key: 'dept', label: 'Department', sortable: true },
  { key: 'status', label: 'Status', sortable: true,
    render: val => {
      const badge = document.createElement('span');
      badge.className = `status-badge status-${val.toLowerCase()}`;
      badge.textContent = val;
      return badge;
    }
  },
  { key: 'score', label: 'Score', sortable: true }
];

table('#table-target', { data, columns, pageSize: 5 });
exportCSV(data, columns, 'export.csv');

Full source available with Weblisk Pro

Get Pro Access
SVG Charts Pro

Pure DOM SVG charts — bar, line, pie. No canvas, no dependencies, accessible.

import { bar, line, pie } from 'weblisk/pro/chart.js';

const data = [
  { label: 'Jan', value: 30 },
  { label: 'Feb', value: 45 },
  { label: 'Mar', value: 28 },
  { label: 'Apr', value: 62 },
];

bar('#chart', { data, width: 400, height: 200 });
line('#chart', { data, width: 400, height: 200 });
pie('#chart', { data, size: 200 });

Full source available with Weblisk Pro

Get Pro Access
Form Validation Pro

Declarative validation via data-validate attributes. Async submit with loading states.

Fill in the form and submit.
import { enhance } from 'weblisk/pro/form.js';

const { submitting, errors } = enhance('#pro-form', {
  format: 'json',
  onSuccess: () => console.log('Submitted!'),
  onError: err => console.error(err.message)
});

Full source available with Weblisk Pro

Get Pro Access
Client-Side Auth Pro

JWT decode, token lifecycle signals, session management. Works with any backend.

Not authenticated.
import { init, setToken, logout, user, authenticated }
  from 'weblisk/pro/auth.js';

init({ storageKey: 'wl-token' });

// On login — store JWT from your API
setToken(jwtFromServer);

// Reactive signals
effect(() => {
  if (authenticated()) {
    console.log('User:', user().name);
  }
});

// Logout
logout();

Full source available with Weblisk Pro

Get Pro Access
Toast Notifications Pro

Accessible notification system with auto-dismiss, stacking, and theming.

import { toast } from 'weblisk/pro/toast.js';

toast('Operation completed!', {
  type: 'success',     // info | success | warning | error
  duration: 3000,
  position: 'bottom-right'
});

Full source available with Weblisk Pro

Get Pro Access
Accessible Tabs Pro

ARIA-compliant tablist with keyboard navigation (Arrow keys, Home, End).

Overview: Tabs organize content into sections. Fully keyboard-navigable with proper ARIA roles. 
import { tabs } from 'weblisk/pro/tabs.js';

tabs('[data-tabs]', {
  defaultIndex: 0,
  onChange: i => console.log('Switched to tab', i)
});

Full source available with Weblisk Pro

Get Pro Access
CRDT Primitives Pro

Conflict-free replicated data types for offline-first collaboration.

G-Counter ready. Two nodes will count independently.
import { gCounter } from 'weblisk/pro/crdt.js';

const nodeA = gCounter('node-A');
const nodeB = gCounter('node-B');

nodeA.increment();
nodeB.increment();

// Sync state between nodes
nodeA.merge(nodeB.state());
nodeB.merge(nodeA.state());
// Both now agree on the total count

Full source available with Weblisk Pro

Get Pro Access
Payment Request API Pro

Wraps the browser Payment Request API. One function call for checkout — works with any payment processor.

import { pay } from 'weblisk/pro/pay.js';

const result = await pay({
  currency: 'USD',
  amount: 1999,     // $19.99
  label: 'Pro License',
  endpoint: '/api/charge',
});
// → { success: true, data: { ... } }
import { pay } from 'weblisk/pro/pay.js';

const result = await pay({
  currency: 'USD',
  amount: 1999,
  label: 'Pro License',
  endpoint: '/api/charge'
});

if (result.success) {
  toast('Payment successful!', { type: 'success' });
}

Full source available with Weblisk Pro

Get Pro Access

Pro Module Reference

All 10 Pro modules are ES modules — import what you need, tree-shake the rest.

javascript 
import { init, track } from 'weblisk/pro/analytics.js';
import { experiment }    from 'weblisk/pro/ab.js';
import { table, exportCSV } from 'weblisk/pro/table.js';
import { bar, line, pie } from 'weblisk/pro/chart.js';
import { enhance }       from 'weblisk/pro/form.js';
import { init as authInit } from 'weblisk/pro/auth.js';
import { pay }           from 'weblisk/pro/pay.js';
import { toast }         from 'weblisk/pro/toast.js';
import { tabs }          from 'weblisk/pro/tabs.js';
import { gCounter }      from 'weblisk/pro/crdt.js';

Activate Your License

One command, no build step — register your key and start importing.

bash 
weblisk license --key=WL-XXXX-XXXX-XXXX

# Or set in .env:
WL_LICENSE=WL-XXXX-XXXX-XXXX

# That's it — import and use. No build step required.
import { track } from 'weblisk/pro/analytics.js';
View Plans & Pricing Read the Docs