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
• Documentation

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

Hello, World!


``

Result in browser:

!Example

---

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