jsKjs Get jsKjs

Build with AI · Recipes

Vibe recipes

A prompt on the left, the result running on the right. Each result is idiomatic jsKjs: attributes first, a few lines of JavaScript at most.

Recipe 1

Newsletter signup with server validation

The prompt

Prompt
Use jsKjs. Add a newsletter form that posts to subscribe.php without reloading, shows the server's message below it, and shows "Subscribing…" while the request runs.

With the rules file in place, agents produce markup like this — zero JavaScript.

Live · Newsletter signup with server validation

View the source for this demo
HTML
<form kj-post="/api/subscribe.php" kj-target="#rc-msg" kj-indicator="#rc-spin" class="row">
  <label for="rc-email" class="sr-only">Email</label>
  <input id="rc-email" name="email" type="email" required placeholder="you@example.com" style="flex:1;min-width:200px">
  <button type="submit">Subscribe</button>
</form>
<p id="rc-spin" hidden class="muted">Subscribing…</p>
<p id="rc-msg" aria-live="polite"></p>

Recipe 2

Pricing toggle

The prompt

Prompt
Use jsKjs. Turn the pricing card into a kj-data component with a Monthly / Yearly toggle (yearly = 2 months free). Use aria-pressed on the toggle buttons.

With the rules file in place, agents produce markup like this — zero JavaScript.

Live · Pricing toggle

View the source for this demo
HTML
<div kj-data="{ yearly: false, base: 12 }">
  <div class="row toggle-row" role="group" aria-label="Billing period">
    <button type="button" @click="yearly = false" :aria-pressed="yearly ? 'false' : 'true'">Monthly</button>
    <button type="button" @click="yearly = true" :aria-pressed="yearly ? 'true' : 'false'">Yearly · 2 months free</button>
  </div>
  <p style="margin-top:16px"><span class="price-big" kj-text="'$' + (yearly ? base * 10 : base)"></span>
    <span class="muted" kj-text="yearly ? '/ year' : '/ month'"></span></p>
</div>

Recipe 3

Live search with highlighted matches

The prompt

Prompt
Use jsKjs and PHP. Add a search box that queries search.php as I type (debounced), and have the PHP wrap the matched text in <mark>, escaping everything else.

With the rules file in place, agents produce markup like this — zero JavaScript.

Live · Live search with highlighted matches

    View the source for this demo
    HTML
    <label for="rc-q">Search packages</label>
<input id="rc-q" name="q" type="search" autocomplete="off" style="margin-top:6px"
       kj-get="/api/search.php" kj-trigger="keyup delay:250ms" kj-target="#rc-results">
<ul id="rc-results" class="list-plain" aria-live="polite" style="font-family:var(--mono);font-size:14px"></ul>