The IOUX for
enterprise web apps

// Share your exact view as a link
const link = ctrlk.share.createLink({
  name: 'Healthcare watchlist',
});
// → https://app.co/loans#ctrlk=eJxVj8...

// Paste in Slack. Colleague clicks.
// Their app restores your exact view:
//   same filters, columns, sort, scroll.
// Zero infrastructure needed.

// Preview without applying:
ctrlk.share.peekLink(url);
// → { name, sharedBy, hasGridState: true }

// Publish to team — appears in Ctrl+K
await ctrlk.share.publish(
  'Monday Surveillance',
  { scope: 'team' }
);

// Team members see it in the palette:
//   "Monday Surveillance — shared by Alice"

// Load a team view
await ctrlk.share.load(viewId);

// Usage tracking built in
// → "Used 47 times by 5 team members"

// Tier 3 (Enterprise): Live sharing
ctrlk.share.startBroadcast();
// Others follow your view in real-time

<!-- Add to any page. Zero config. -->
<script src="ctrlk.runtime.js"></script>

<!-- Ctrl+K now opens command palette.
     All buttons auto-discovered.
     Density control active. -->

import ctrlk from 'ctrlk';

ctrlk.commands.register({
  id: 'filter.failed',
  title: 'Show Failed Only',
  shortcut: 'Alt+F',
  execute: () => setFilter('failed'),
});

// Save complete app state as a named view
ctrlk.views.save('Monday Surveillance');

// Select by expression — no clicks
ctrlk.selection.where(
  row => row.spread > 500
);

import { useCtrlkCommand, useCtrlkView }
  from '@ctrlk/react';

function SurveillanceGrid() {
  useCtrlkCommand({
    id: 'grid.refresh',
    title: 'Refresh Data',
    shortcut: 'Ctrl+R',
    execute: () => fetchData(),
    undo: (prev) => setData(prev),
  });

  const [filters, setFilters] =
    useCtrlkView('grid.filters', {});

  return <Grid filters={filters} />;
}

<!-- Register commands from templates -->
<button
  ctrlkCommand="export.csv"
  ctrlkCommandTitle="Export CSV"
  ctrlkCommandShortcut="Ctrl+Shift+E"
  (click)="exportCsv()">
  Export
</button>

<!-- Register fields for jump-to -->
<input
  ctrlkField="patient.name"
  ctrlkFieldLabel="Patient Name"
  ctrlkFieldSection="Demographics"
  [(ngModel)]="patient.name" />