# javascript-ui

Latest version **1.1.0** (published 2023-10-22) · GPL-2.0-only license · 0 weekly downloads

## Install

```sh
npm install javascript-ui
pnpm add javascript-ui
yarn add javascript-ui
bun add javascript-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-10-22 |
| First published | 2022-08-29 |
| Weekly downloads | 0 |
| License | GPL-2.0-only |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 106.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Brandon Jordan |
| Maintainers | electrikmilk |
| Keywords | javascript-ui, css-in-js, swift-ui |

## Links

- npm: https://www.npmjs.com/package/javascript-ui
- Repository: https://github.com/electrikmilk/javascript-ui
- Homepage: https://github.com/electrikmilk/javascript-ui#readme
- Issues: https://github.com/electrikmilk/javascript-ui/issues
- npm.io page: https://npm.io/package/javascript-ui

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-10-22
- 1.0.9 — 2023-09-03
- 1.0.8 — 2023-09-03
- 1.0.7 — 2023-09-03
- 1.0.6 — 2023-09-03
- 1.0.5 — 2023-07-20
- 1.0.4 — 2023-05-31
- 1.0.3 — 2022-09-15
- 1.0.2 — 2022-09-15
- 1.0.1 — 2022-09-15
- 0.1.9 — 2022-09-15
- 0.1.8 — 2022-09-15
- 0.1.7 — 2022-09-15
- 0.1.6 — 2022-09-15
- 0.1.5 — 2022-09-13
- … 15 more at https://npm.io/package/javascript-ui/versions

## README

<p align=center>
	<img src="https://i.imgur.com/HnRViVq.png"/>
</p>

# JavaScript UI

[![License](https://img.shields.io/github/license/electrikmilk/javascript-ui)](https://github.com/electrikmilk/javascript-ui/blob/main/LICENSE)
[![Version](https://img.shields.io/npm/v/javascript-ui)](https://www.npmjs.com/package/javascript-ui)

Javascript UI is a JavaScript framework. It describes HTML and CSS in Javascript similar to SwiftUI.

## ❇️ Features

- ✔️ Declarative syntax, functions nest within each other, similar to HTML, but with methods instead of CSS properties and HTML attributes.
- 😎 Useful shorthands for HTML tags and attributes and CSS properties (e.g. `Image().caption()`).
- 🦋 Built-in standard animations like rotate, fade, flip, shake, and more!
- 🤓 Methods for CSS tricks like `truncate()`, `fontSmoothing()`, fit, etc. More CSS tricks are abstracted into views and stacks like `ScrollView()`, `GridStack()`, `HStack()`, `VStack()`, etc.
- 🐰 It's fast! Element objects simply provide helpful methods and are used during the first render, but they keep a reference to their element or document fragment. They modify the element directly rather than re-rendering it. There are never entire page re-renders, only selective re-renders when needed for state management.

## 🔧 Built-ins

- 💾 Stores
- ⚛️ State management
- 🧭 Router

[Playground](https://codepen.io/internetgho5t/pen/ZExgBbm)
&bull; [Documentation](https://github.com/electrikmilk/jsUI/wiki)

## Usage

Install via NPM:

```console
npm i javascript-ui
```

Import and add elements to the `view()` function.

```javascript
import {view, Section, Paragraph} from 'javascript-ui';

view([
    Section([
        Paragraph('Hello, World!')
            .textColor('green')
    ])
]);
```

Resulting HTML:

```html

<section>
    <p style="color: green;">Hello, World!</p>
</section>
```

Result in browser:

![Example](https://i.imgur.com/8MgKcE4.png)

---

This project aims to create a framework that allows you to create UI in a way that feels natural and easy.

---
_Source: https://npm.io/package/javascript-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._