Lithen Functions

Functions to use with html and css to create simple and powerful UI elements. Its part of Lithen modules. It works alone but is created to use with Web Components.

Getting started

You can see the Getting started page, teaching how to setup a Vanilla project or a project with Vite.

After the Getting started, try this counter modal example:

function counterModal() {
  const count = signal(0)
  const dialogRef = ref<HTMLDialogElement>()

  function increment() {
    count.set(value => value + 1)
  }

  return html`
    <dialog ref=${dialogRef}>
      <p>Count: ${count}</p>
      <button on-click=${increment}>
        Increment
      </button>
      <button on-click=${() => dialogRef.el?.close()}>
        Close
      </button>
    </dialog>
    
    <button on-click=${() => dialogRef.el?.showModal()}>
      Open Modal
    </button>
  `
}

document.body.append(counterModal())

List of including functions, tag functions and its features

• html
  • Web Components and Slots as self closed tags
  • Add Events
  • Element's dot attributes
  • XSS prevention
  • Elements merge
• el
• raw
• css
• createStyled
• refs
• signals
  • DataSignal
  • DataSignalRecord
  • Shell

VSCode Extensions Recommendation

• lit-plugin which came with lit-html and styled components extensions.
• Auto Close Tag for auto closing HTML tags.
• es6-string-html for HTML syntax highlight to custom tag functions, good to work with the el tag function.
• inline HTML for emmet and IntelliSense in html and css tag functions.

Other libs that are part of Lithen

• lithen-super-element
• lithen-router