https://github.com/dobschal/html.js
A simple HTML in Javascript implementation with Model View Binding.
https://github.com/dobschal/html.js
html-css-javascript html-in-javascript javascript mvvm reactive
Last synced: 6 months ago
JSON representation
A simple HTML in Javascript implementation with Model View Binding.
- Host: GitHub
- URL: https://github.com/dobschal/html.js
- Owner: dobschal
- Created: 2025-02-28T07:25:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-28T13:51:44.000Z (over 1 year ago)
- Last Synced: 2025-02-28T13:54:39.965Z (over 1 year ago)
- Topics: html-css-javascript, html-in-javascript, javascript, mvvm, reactive
- Language: JavaScript
- Homepage:
- Size: 119 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML.js
A simple HTML in Javascript implementation featuring Model View Binding. It allows you to create HTML elements using
template literals and bind them to your model.
[](https://www.npmjs.com/package/@dobschal/html.js)
## Installation
```bash
npm install --save @dobschal/html.js
```
## Examples
### Hello World
The example below creates a simple div element with the text "Hello World" and appends it to the body.
```javascript
import {html} from '@dobschal/html.js';
document.body.append(
html`
Hello World`
);
```
### Model View Binding
The created `view` is bound to the `count` observable. When the count changes, the view is updated:
```javascript
import {html} from '@dobschal/html.js';
import {Observable} from '@dobschal/observable';
const count = Observable(0);
const view = html`
👉 ${count}
Count Up 🚀
`;
document.body.append(...view);
```
**Example for binding input values:**
```javascript
const name = Observable("Sascha");
const view = html`
👉 ${name}
`;
```
## API
### html
`html` is a tagged template literal function that creates an HTML element or elements from a template string.
```javascript
// Create a div element with the text "Hello World"
const element = html`
Hello World`;
console.log(element instanceof HTMLElement); // true
```
In case the HTML template contains multiple elements, an array of elements is returned!
When appending to the DOM, you can use the spread operator to append all elements at once.
```javascript
document.body.append(...html`
Hello World 1
Hello World 2
`);
```
### Components
You can create components by defining a function that returns an HTML element.
```javascript
function MyComponent() {
return html`
Hello World`;
}
function App() {
return html`
${MyComponent()}
`;
}
document.body.append(App());
```
### Event Listeners
You can add event listeners to elements by using the standard HTML event attributes.
```javascript
html`
Click Me
`;
```
### Model View Binding
You can bind an observable to an element by using the observable directly in the template.
```javascript
import {Observable} from '@dobschal/observable';
const count = Observable(0);
const view = html`
👉 ${count}
Count Up 🚀
`;
```
### Conditional Rendering
You can conditionally render elements by using the ternary operator or the custom `if` attribute.
```javascript
const show = Observable(true);
// With the ternary operator
const view = html`
${show ? html`
Hello World` : null}
`;
// With the if attribute
const view = html`
Hello World
`;
```
### List Rendering
You can render lists by using the `map` function on an array or observable array.
```javascript
const items = Observable([1, 2, 3]);
const view = html`
- ${item} `)}
${items.map(item => html`
`;
```
# Author
Sascha Dobschal