inline

$('div.thing', $('p', 'hello')) → <div class="thing"><p>hello</p></div>

import { $ } from 'inline';

const app = $(
  '#app',
  $('h1', 'todos'),
  $('form', { onsubmit(e) { e.preventDefault(); add(); } },
    $('input#new', { type: 'text', placeholder: 'what needs doing?' }),
    $('button', 'add')
  ),
  $('ul', ...items.map(t => $('li', t)))
);

document.body.append(app);

Install

npm install github:brookesb91/inline

import { $ } from 'inline';

CDN:

<script type="module">
  import { $ } from 'https://cdn.jsdelivr.net/gh/brookesb91/inline@master/dist/inline.js';
</script>

How it works

$(selector, ...args)

Selector is tag#id.class1.class2. Omit the tag and you get a div.

Everything after the selector is variadic and order doesn't matter:

Arg type	What happens
string	Text node
HTMLElement	Child
object	Properties via Object.assign
function	Called with the element

Returns a real DOM element. TypeScript knows the type from the tag — $('input') is HTMLInputElement, $('canvas') is HTMLCanvasElement, etc.

Examples

// basics
$('h1', 'hello')
$('input#email.form-control', { type: 'email', required: true })
$('.card', $('h2', 'Title'), $('p', 'Body'))

// form
const login = $(
  'form#login',
  { onsubmit(e) { e.preventDefault(); submit(); } },
  $('input', { type: 'text', placeholder: 'username', required: true }),
  $('input', { type: 'password', placeholder: 'password', required: true }),
  $('button', { type: 'submit' }, 'sign in')
);

// component
const ProductCard = (p: Product, onBuy: () => void) =>
  $('.product',
    $('img', { src: p.image, alt: p.name }),
    $('h3', p.name),
    $('span.price', `$${p.price}`),
    $('button', { onclick: onBuy }, 'buy')
  );

// typed callbacks — c is HTMLCanvasElement
$('canvas', { width: 800, height: 600 }, (c) => {
  const ctx = c.getContext('2d')!;
  ctx.fillRect(0, 0, 800, 600);
});

// dynamic
$('ul', ...tasks.map((t, i) =>
  $('li', $('span', t), $('button', { onclick: () => rm(i) }, '×'))
));

// tailwind
$('div.flex.items-center.gap-4.p-6.rounded-xl.shadow-lg',
  $('img.w-12.h-12.rounded-full', { src: avatar }),
  $('div', $('p.font-bold', name), $('p.text-gray-500', role))
);

// htmx
$('button', { 'hx-get': '/api/data', 'hx-target': '#out' }, 'load');

// third-party
$('canvas#chart', (el) => new Chart(el, config));