Skip to main content

Built and signed on GitHub Actions

It is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
It is unknown whether this package works with Browsers
JSR Score
35%
Published
2 weeks ago (0.1.2)

gooey

A modern gui library for typescript and javascript (yet another web gui).

Work in progress..

Features

  • Flexible API
  • Thoroughly Typed
  • Zero Dependencies
  • Preset Manager
  • Theme Manager
  • Undo History
  • Draggable / Resizable
  • addMany for Bulk Generation
  • Strong Type Inference
  • Reset to Default buttons
  • Monitors
  • LFO / Envelope manager
  • Curve Editor
  • Plugins
  • Svelte Components

Inputs

Status Feature Primitive
Number number
Color Color | ColorRepresentation
Select Array<any>
Switch boolean
Text string
🚧 Textarea string
🚧 Range { min, max }
🚧 Vector3 { x, y, z }
🚧 Vector2 { x, y }

Installation

NPM

pnpm install gooey

or, JSR

jsr add @braebo/gooey

Usage

Create a new Gooey.

import { Gooey } from 'gooey'

const gooey = new Gooey()

You can use the addNumber method directly to create a number input:

const input = gooey.addNumber('count')

input.on('change', console.log)

Or, use the generic add method, and it will infer the type of the input from the value property:

const input = gooey.add('count', { value: 0 })

input.on('change', v => console.log(v))

Add multiple inputs at once with addMany.

gooey.addMany({
  number: 0,
  color: '#ff0000',
  select: ['a', 'b', 'c'],
  switch: true,
  text: 'hello'
})

TODO - More docs...

About

tweakpane was the main inspiration for this project. I recommend it over gooey -- it's a more lightweight solution with more features and an awesome, highly active developer!

I started this to scratch an itch, and pave the way for more advanced features related to 3D / audio / audio-reactivity in the future.

Other, similar projects:

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add @braebo/gooey

Import symbol

import * as mod from "@braebo/gooey/";

Add Package

npx jsr add @braebo/gooey

Import symbol

import * as mod from "@braebo/gooey/";

Add Package

yarn dlx jsr add @braebo/gooey

Import symbol

import * as mod from "@braebo/gooey/";

Add Package

pnpm dlx jsr add @braebo/gooey

Import symbol

import * as mod from "@braebo/gooey/";

Add Package

bunx jsr add @braebo/gooey

Import symbol

import * as mod from "@braebo/gooey/";