https://github.com/electrikmilk/javascript-ui

JavaScript framework based on Swift UI
https://github.com/electrikmilk/javascript-ui

css-in-js javascript javascript-ui js-framework swiftui

Last synced: 3 months ago
JSON representation

JavaScript framework based on Swift UI

• Host: GitHub
• URL: https://github.com/electrikmilk/javascript-ui
• Owner: electrikmilk
• License: gpl-2.0
• Created: 2022-08-26T16:44:57.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2025-04-24T14:42:30.000Z (9 months ago)
• Last Synced: 2025-07-07T08:56:36.199Z (7 months ago)
• Topics: css-in-js, javascript, javascript-ui, js-framework, swiftui
• Language: JavaScript
• Homepage: https://electrikmilk.github.io/javascript-ui
• Size: 2.52 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


	



# 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.

- 🤓 Methods for CSS tricks like `truncate()`, `fontSmoothing()`, fit, etc. More CSS is 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-in

- 💾 Stores

- ⚛️ State management

- 🦋 Standard animations (rotate, fade, flip, shake, and more!)

- 🧭 Router

[Playground](https://codepen.io/internetgho5t/pen/ZExgBbm)

• [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';

window.onload = () => {

    view([

        Section([

            Paragraph('Hello, World!')

                .textColor('green')

        ])

    ]);

};

```

Resulting HTML:

```html

    
Hello, World!


```

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.