https://github.com/juliendargelos/gui

Light and expressive GUI with web components
https://github.com/juliendargelos/gui

gui web-components

Last synced: about 2 months ago
JSON representation

Light and expressive GUI with web components

• Host: GitHub
• URL: https://github.com/juliendargelos/gui
• Owner: juliendargelos
• License: mit
• Created: 2020-02-03T09:58:05.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T07:53:03.000Z (almost 2 years ago)
• Last Synced: 2024-11-03T02:07:16.922Z (2 months ago)
• Topics: gui, web-components
• Language: TypeScript
• Homepage: https://julien.gl/gui
• Size: 5.07 MB
• Stars: 13
• Watchers: 2
• Forks: 2
• Open Issues: 20
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# GUI

[![test](https://github.com/juliendargelos/gui/workflows/test/badge.svg?branch=master)](https://github.com/juliendargelos/gui/actions?workflow=test)

[![build](https://github.com/juliendargelos/gui/workflows/build/badge.svg?branch=master)](https://github.com/juliendargelos/gui/actions?workflow=build)

[![version](https://img.shields.io/github/package-json/v/juliendargelos/gui)](https://github.com/juliendargelos/gui)

*Light and expressive GUI with web components*


**[Repository](https://github.com/juliendargelos/gui)** | **[Documentation](https://julien.gl/gui)** | **[Demo](https://julien.gl/gui/demo)**

```typescript

const target = {

  lorem: 1,

  ipsum: 'foo',

  dolor: new File([], 'foo.txt'),

  sit: name => alert(`Hey ${name}`),

  amet: {

    consectetur: false,

    adipisicing: 'rgba(35, 50, 75, 0.5)',

    elit: '//picsum.photos/400/200.jpg'

  }

}

const gui = new GUI({ target })

  .add('lorem')

  .add('ipsum')

  .add('dolor')

  .add('sit', { args: [{ value: 'Bob' }] })

  .group('amet', group => group

    .add('consectetur')

    .add('adipisicing')

    .add('elit')

  )

```

### Install

```bash

npm install @juliendargelos/gui --save

```

```bash

yarn add @juliendargelos/gui

```

### Usage

*Coming soon*