Tweak UI

Appearance

Tweak UI

Tweak panels for numbers, colors, vectors and more.

Components
Concepts

Builder

Builds panels with controls and containers. Binds the controls to plain objects, signals or stores.

Concepts

Solid components

Each control is a solid-js component. No virtual DOM. Use the components with JSX, or without a compiler.

Components

Isolated styles

A precompiled stylesheet with css variables for the theme. It does not change the styles of the application.

Theme

Getting started ​

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'

Add a host element:

html
<div id="tools"></div>

Mount a panel:

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()