Skip to main content
Home
Browse packagesDocsSign in

@braebo/gooey@0.2.12
Built and signed on GitHub Actions

latest
braebo/gooey
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
11 months ago (0.2.12)

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 gui = new Gooey()

Inputs

The add method takes a title string and an options object. It will infer the type of the input from the value property and generate the appropriate input.

const input = gui.add('count', 1)
//    ^? InputNumber

// Pass in options.
const input = gui.add('count', 1, { min: 0, max: 10, step: 1 })

Add multiple inputs at once with addMany.

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

You can use each individual adder methods directly to create a specific input:

gui.addNumber('count', 1)
gui.addText('name', 'John Doe')
gui.addColor('fav color', '#00FFFF')
gui.addSelect('type', ['a', 'b', 'c'])
gui.addButton('log', () => console.log('clicked'))
gui.addSwitch('enabled', true)
gui.addButtonGrid('playback', TODO)

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

Folder

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

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@braebo/gooey

Import symbol

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

Import directly with a jsr specifier

import * as gooey from "jsr:@braebo/gooey";

Add Package

pnpm i jsr:@braebo/gooey
or (using pnpm 10.8 or older)
pnpm dlx jsr add @braebo/gooey

Import symbol

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

Add Package

yarn add jsr:@braebo/gooey
or (using Yarn 4.8 or older)
yarn dlx jsr add @braebo/gooey

Import symbol

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

Add Package

vlt install jsr:@braebo/gooey

Import symbol

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

Add Package

npx jsr add @braebo/gooey

Import symbol

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

Add Package

bunx jsr add @braebo/gooey

Import symbol

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