$('div.thing', $('p', 'hello')) → <div class="thing"><p>hello</p></div>
import{$}from'inline';constapp=$('#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);npm install github:brookesb91/inlineimport{$}from'inline';CDN:
<scripttype="module">import{$}from'https://cdn.jsdelivr.net/gh/brookesb91/inline@master/dist/inline.js';</script>$(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.
// basics$('h1','hello')$('input#email.form-control',{type: 'email',required: true})$('.card',$('h2','Title'),$('p','Body'))// formconstlogin=$('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'));// componentconstProductCard=(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)=>{constctx=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)=>newChart(el,config));