PHPackages                             viscreation/vis-ui.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. viscreation/vis-ui.js

ActiveComponent

viscreation/vis-ui.js
=====================

JavaScript UI generator framework based on jQuery UI and some other elements

0.2.84(5y ago)16.2k3MITJavaScript

Since May 4Pushed 5y ago2 watchersCompare

[ Source](https://github.com/eSlider/vis-ui.js)[ Packagist](https://packagist.org/packages/viscreation/vis-ui.js)[ Docs](https://github.com/eSlider)[ RSS](/packages/viscreation-vis-uijs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (11)Versions (79)Used By (0)

vis-ui.js
=========

[](#vis-uijs)

This package provides JavaScript UI generator based on [Bootstrap](http://www.bootstrap.com) and [jQuery UI](www.jquery-ui.com).

Features
--------

[](#features)

- Generate form and input elements
- Check and fill form
- Tab navigation

Examples
--------

[](#examples)

- [Basic](https://rawgit.com/eSlider/vis-ui.js/master/index.html)

Elements
--------

[](#elements)

Description how to use element generator.

---

### Input

[](#input)

```
$("").generateElements({
    type: "input",
    name: "name",
    title: "Input",
    placeholder: "Enter the name",
    mandatory: true,
    cssClass: "input-css",
    css: {width: "80%"}
})
```

#### Options

[](#options)

- name: Field name
- title: Title string
- placeholder: Place holder in the input field
- mandatory: Mandatory field: true, false or ReExpr ("/^\\d+$/g" - only decimals)
- cssClass: CSS class name
- css: Custom CSS styles object. Example: {width: "80%"}
- value: Default value

---

### Text area

[](#text-area)

```
$("").generateElements({
    type: "textArea",
    name: "description" ,
    title: "Description",
    placeholder: "Enter the description",
})
```

#### Options

[](#options-1)

- name: Field name
- title: Title string
- placeholder: Place holder in the input field
- mandatory: Mandatory field: true, false or ReExpr ("/^\\d+$/g" - only decimals)
- cssClass: CSS class name
- css: Custom CSS styles object. Example: {width: "80%"}
- value: Default value

---

### Check box

[](#check-box)

```
$("").generateElements({
    type: "checkbox",
    name: "check1",
    title: "Checkbox",
    mandatory: true,
    cssClass: "input-css",
    css: {width: "80%"}
})
```

#### Options

[](#options-2)

- name: Field name
- title: Title string
- placeholder: Place holder in the input field
- mandatory: Mandatory field: true, false or ReExpr ("/^\\d+$/g" - only decimals)
- cssClass: CSS class name
- css: Custom CSS styles object. Example: {width: "80%"}
- value: Default value

---

### Radio button

[](#radio-button)

```
$("").generateElements({children:[{
        type: "radio",
        name: "yesNo",
        title: "Yes",
        css: {width: 50%}
    },{
        type: "radio",
        name: "yesNo",
        title: "no",
        css: {width: 50%}
}]})
```

#### Options

[](#options-3)

- name: Field name
- title: Title string
- placeholder: Place holder in the input field
- mandatory: Mandatory field: true, false or ReExpr ("/^\\d+$/g" - only decimals)
- cssClass: CSS class name
- css: Custom CSS styles object. Example: {width: "80%"}
- value: Default value

### Select

[](#select)

```
$("").generateElements({type: "select", value: "de", options: {en:"English", de: "German"} })
```

#### Options

[](#options-4)

- name: Field name
- title: Title string
- mandatory: Mandatory field: true, false or ReExpr ("/^\\d+$/g" - only decimals)
- cssClass: CSS class name
- css: Custom CSS styles object. Example: {width: "80%"}
- value: Default value
- options: key/values object or array
- multiply: Multiply selection. Default false

---

### Basic usage example:

[](#basic-usage-example)

```
var $div = $("");
$div.generateElements({children:[{
    type:  'input',
    title: "Input",
    placeholder: "placeholder value",
    mandatory: true
},{
    type:  'input',
    name: "input2",
    title: "Input #2",
    placeholder: "placeholder value #2"
}]});

$div.popupDialog({
    title:       "Demo",
    maximizable: true,
    buttons:     [{
        text:  "OK",
        click: function(e) {
            var div = $(e.currentTarget).closest(".ui-dialog").find(".popup-dialog");
            div.popupDialog('close');
        }
    }]
});
```

Integration
-----------

[](#integration)

Extend composer dependencies with *eslider/vis-ui.js* and update composer.

```
composer update
```

Load JS library to HTML.

```

```

Add CSS styles.

```

```

Package Managers
----------------

[](#package-managers)

- [Composer](http://packagist.org/packages/viscreation/vis-ui-js): `viscreation/vis-ui.js`

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor2

2 contributors hold 50%+ of commits

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~29 days

Recently: every ~294 days

Total

74

Last Release

1910d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0154eb5bdfa738d2bbc95bb345ba5f971d9395a2318f8724e42fa3bd384ae9c2?d=identicon)[LazerTiberius](/maintainers/LazerTiberius)

![](https://www.gravatar.com/avatar/e968f2c0f91a0501b62970cd09b610faa54713bf831038b82049ca881766c7ec?d=identicon)[eSlider](/maintainers/eSlider)

---

Top Contributors

[![werrolf](https://avatars.githubusercontent.com/u/24895932?v=4)](https://github.com/werrolf "werrolf (166 commits)")[![eSlider](https://avatars.githubusercontent.com/u/1188335?v=4)](https://github.com/eSlider "eSlider (157 commits)")[![DavidPatzke](https://avatars.githubusercontent.com/u/5700151?v=4)](https://github.com/DavidPatzke "DavidPatzke (18 commits)")[![frwg](https://avatars.githubusercontent.com/u/44997160?v=4)](https://github.com/frwg "frwg (10 commits)")[![createreadupdate](https://avatars.githubusercontent.com/u/86948738?v=4)](https://github.com/createreadupdate "createreadupdate (4 commits)")[![chringel21](https://avatars.githubusercontent.com/u/6780575?v=4)](https://github.com/chringel21 "chringel21 (1 commits)")[![simonseyock](https://avatars.githubusercontent.com/u/8100558?v=4)](https://github.com/simonseyock "simonseyock (1 commits)")

---

Tags

jqueryassetsvis-ui

### Embed Badge

![Health badge](/badges/viscreation-vis-uijs/health.svg)

```
[![Health](https://phpackages.com/badges/viscreation-vis-uijs/health.svg)](https://phpackages.com/packages/viscreation-vis-uijs)
```

###  Alternatives

[mistic100/jquery-querybuilder

jQuery plugin for user friendly query/filter creator

1.7k54.1k2](/packages/mistic100-jquery-querybuilder)[cedriclombardot/admingenerator-generator-bundle

Admingenerator for Symfony2 based on YAML configuration and Twig templating

36485.6k4](/packages/cedriclombardot-admingenerator-generator-bundle)[efficiently/jquery-laravel

This package provides jQuery and the jQuery-ujs driver for your Laravel >= 6 application.

1311.0k1](/packages/efficiently-jquery-laravel)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)