Tarhon is a Javascript Library for building user interfaces.
Declarative Tarhon makes it truly painless to build interactive UIs. Create simple views using its html templating mechanism, and Tarhon will efficiently make use of the browser capacities to render, and the Observable series allow you to manage state changes at every level with instant UI response.
Component based Tarhon allows you to create interactive UI in a Component Object Model fashion. Since the actual HTML code and the component logic are written together in javascript rather than having extra languages or templating engines, you can easily pass rich data through to the components.
Learn Once, Write anywhere Tarhon uses technology present in all modern browsers and since you already know most of the things it relies on, you have very little to learn. We do not make any assumptions on the other frameworks you may use and due to the way it's designed it can be used with any of them painlessly.
True HTML, no JSX Tarhon uses named template literals rather than relying on a transpiler and some subset / superset of HTML language. It works exactly as you expect it to.
use a browser window where you import our module file: unpkg.com CDN
Import as script type module
<script crossorigin type="module" src="https://unpkg.com/tarhon?module"></script>
import as ESM Module
import * as tarhon from 'https://unpkg.com/tarhon?module';
use npm and link into your public folder
npm install tarhon
and then you can import from the npm package (please note that you may need to link or use a bundler.)
import * as tarhon from 'tarhon';
More examples and an actual documentation will come soon.
/index.mjs
import { observeComponent, html, styled } from 'tarhon';
export class Button extends observeComponent(HTMLElement) {
static get selector() {
return 'zalter-button';
}
static style = styled({
':host': {
'align-items': 'center',
'appearance': 'none',
'border-radius': '4px',
'cursor': 'pointer',
'display': 'inline-flex',
'justify-content': 'center',
'font-family': 'Arial, sans-serif',
'font-weight': 600,
'font-size': '14px',
'line-height': '1.3',
'letter-spacing': '0.25px',
'outline': 0,
'padding': '8px 12px',
'position': 'relative',
'user-select': 'none',
'white-space': 'nowrap',
'background-color': '#4f44e0',
'color': '#ffffff'
},
':host(:active)': {
'box-shadow': '0px 0px 0px 4px rgba(79, 68, 224, 0.2)'
}
});
constructor() {
super();
this.render();
}
render() {
super.render();
this.renderRoot.appendChild(html`
<div>
<slot></slot>
</div>
`);
}
}
customElements.define(Button.selector, Button);
/index.html
<html>
<head>
<script type="module" src="index.mjs"></script>
</head>
<body>
<zalter-button>
Click Me
</zalter-button>
</body>
</html>
FAQs
Web Component Library
We found that tarhon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.