Tweak UI

Appearance

Installation ​

Install the library and its peer dependency solid-js:

shell
npm install tweak-ui solid-js

Import the stylesheet:

ts
import 'tweak-ui/style.css'

The package is an ES module with type declarations.

CDN ​

Without a bundler, load the module from a CDN that resolves the dependencies, e.g. esm.sh:

html
<link rel="stylesheet" href="https://unpkg.com/tweak-ui@x.x.x/dist/style.css" />
<script type="module">
  import { mount } from 'https://esm.sh/tweak-ui@x.x.x'
</script>

Usage ​

Mount a panel into a host element:

ts
import { mount } from 'tweak-ui'

const camera = { fov: 60, near: 0.1, far: 1000 }

const panel = mount('#tools', (ui) => {
  ui.group('Camera', (ui) => {
    ui.scalar(camera, 'fov', { min: 10, max: 120, range: true })
    ui.scalar(camera, 'near', { step: 0.01 })
    ui.scalar(camera, 'far', { step: 10 })
  })
})

// call after code outside of the panel changed the camera
panel.redraw()

Or use the components directly, with JSX:

tsx
const [fov, setFov] = createSignal(60)

<ScalarWidget label="FOV" value={fov()} onInput={setFov} min={10} max={120} />

or without JSX, with the shorthand of a component:

ts
uiScalarWidget({ label: 'FOV', value: fov, onInput: setFov, min: 10, max: 120 })

Development ​

shell
pnpm install
pnpm dev        # documentation with live examples
pnpm test       # specs in a headless browser
pnpm build      # library and documentation

Alternatives ​