Getting Started

Clone the repository, run the docs locally, then compose Lui components as typed JSX functions.

Clone repository

Packages are not published yet. Use the repository directly while Lui is in early development.

bash
git clone https://github.com/zoxon/lui.git
cd lui
pnpm install
pnpm dev

Import styles

Import the CSS bundle once at your application entrypoint.

ts
import '@zoxon/lui/index.css'

Render a component

Compose components as JSX and render the resulting TemplateResult only at the boundary.

tsx
import { render } from '@zoxon/mater'
import { Button } from '@zoxon/lui/components/index.js'

const view = <Button label="Save" />
const htmlString = render(view)

Mount in the browser

Parse the rendered string and replace the target contents without assigning innerHTML.

ts
const parser = new DOMParser()
const doc = parser.parseFromString(render(view), 'text/html')

container.replaceChildren(...Array.from(doc.body.childNodes))