import { div, h1, p } from "javascript-to-html";
div({ class: "home-page" },
h1("Hello World!"),
p("This is a simple example of using HT.JS")
);compiles to
<div class="home-page">
<h1>Hello World!</h1>
<p>This is a simple example of using HT.JS</p>
</div>That's it... Congratulations! you are now an expert in HT.JS. Add it to your CV.
import { button } from "javascript-to-html";
button({
id: "awesome-button",
class: "btn btn-primary",
onclick: "alert('Button clicked!')",
"data-attribute": "value",
"aria-label": "Awesome Button",
"role": "button"
}, "Click Me" );compiles to
<button id="awesome-button" class="btn btn-primary" onclick="alert('Button clicked!')" data-attribute="value" aria-label="Awesome Button" role="button">Click Me</button>All html5 elements can be used, with the exception of <var> (You can probably figure out why)
you can also use fragment() to 'wrap' elements, without the need for a <div> like so:
import { fragment, head, title, meta, link } from "javascript-to-html";
const globalHeadElements = fragment(
meta({ charset:"UTF-8" }),
meta({ name:"viewport", content:"width=device-width, initial-scale=1.0" }),
link({ rel:"stylesheet", href:"/css/style.css" })
)
head(
globalHeadElements,
title("HT.JS"),
)compiles to
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>HT.JS</title>
</head>HT.JS is designed to be extensible. You can easily create your own functions that will render anything from small components to entire pages.
// hero.js
import { div, h1 } from "javascript-to-html";
export default (title, image) => div({
class: "hero",
style: `background-image: url('${image}')`
},
h1(title),
)You can then import and use this component in your application like so:
import { section } from "javascript-to-html";
import hero from "./hero.js";
section({ class: "hero-section" },
hero("Welcome to HT.JS", "/images/hero.jpg")
);compiles to
<section class="hero-section">
<div class="hero" style="background-image: url('/images/hero.jpg')">
<h1>Welcome to HT.JS</h1>
</div>
</section>The motivation behind HT.JS is to provide a simple and intuitive way to generate HTML in JavaScript, without the need for complex templating engines or frameworks.
Given the ubiquity of full feature frameworks, like React, finding just a simple templating solution that didn't include the 'kitchen sink' of features was surprisingly challenging.
By just focusing on only transforming JavaScript to HTML (basically functions that return strings) HT.JS is an incredibly lightweight, easy-to-use, flexible and extensible solution, that can be used in many scenarios.
It can be used directly in the frontend (SPA style) in a build process to create static-sites, or even for server-side rendering (SSR).