A versatile and efficient JavaScript library for creating isomorphic HTML templates using concise literal syntax. Jilto seamlessly bridges server-side and client-side rendering, enabling developers to write clean, maintainable code for dynamic web applica
JavaScript Isomorphic Literal Template Objects (jilto) is a lightweight JavaScript library designed for creating HTML content using template literals. It simplifies the process of generating dynamic, isomorphic HTML content, making it easier for developers to write clean and maintainable code for both server-side and client-side rendering in web applications.
Install jilto via npm:
npm install jilto
<script src="https://cdn.jsdelivr.net/npm/jilto@2.0.5"></script>
Below are some examples of how jilto can be used to generate various HTML elements:
createElement
const element = createElement('div', { class: 'my-class', id: 'my-id' }, 'Hello World!');
console.log(element); // Output: <div class="my-class" id="my-id">Hello World!</div>
generateList
const list = generateList({
items: [{ content: 'Item 1', id: 'item1' }, { content: 'Item 2', id: 'item2' }],
ulClass: 'my-ul-class',
liClass: 'my-li-class',
ulId: 'my-ul-id'
});
console.log(list); // Output: <ul class="my-ul-class" id="my-ul-id"><li class="my-li-class" id="item1">Item 1</li><li class="my-li-class" id="item2">Item 2</li></ul>
generateTable
const table = generateTable({
data: [['Cell 1', 'Cell 2'], ['Cell 3', 'Cell 4']],
tableClass: 'my-table-class',
tableId: 'my-table-id'
});
console.log(table); // Output: <table class="my-table-class" id="my-table-id"><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></table>
generateParagraph
const paragraph = generateParagraph({ text: 'This is a paragraph.', pClass: 'my-p-class', pId: 'my-p-id' });
console.log(paragraph); // Output: <p class="my-p-class" id="my-p-id">This is a paragraph.</p>
generateLinks
const links = generateLinks({
lstLinks: [{ href: '/home', text: 'Home', id: 'link1' }, { href: '/about', text: 'About', id: 'link2' }],
linkClass: 'my-link-class',
containerId: 'my-container-id'
});
console.log(links); // Output: <div class="my-link-class" id="my-container-id"><a href="/home" class="my-link-class" id="link1">Home</a><a href="/about" class="my-link-class" id="link2">About</a></div>
generateHref
const href = generateHref({ url: '/home', text: 'Home', linkClass: 'my-href-class', linkId: 'my-href-id' });
console.log(href); // Output: <a href="/home" class="my-href-class" id="my-href-id">Home</a>
generateNavbar
const navbar = generateNavbar({
links: [{ href: '/home', text: 'Home', id: 'navlink1' }, { href: '/about', text: 'About', id: 'navlink2' }],
navClass: 'my-nav-class',
linkClass: 'my-nav-link-class',
navId: 'my-nav-id'
});
console.log(navbar); // Output: <nav class="my-nav-class" id="my-nav-id"><a href="/home" class="my-nav-link-class" id="navlink1">Home</a><a href="/about" class="my-nav-link-class" id="navlink2">About</a></nav>
generateDiv
const div = generateDiv({ content: 'This is a div.', divClass: 'my-div-class', divId: 'my-div-id' });
console.log(div); // Output: <div class="my-div-class" id="my-div-id">This is a div.</div>
generateInput
const input = generateInput({
inputType: 'text',
inputName: 'myInput',
inputValue: 'Hello',
inputClass: 'my-input-class',
placeholder: 'Enter text',
inputId: 'my-input-id'
});
console.log(input); // Output: <input type="text" name="myInput" value="Hello" class="my-input-class" placeholder="Enter text" id="my-input-id">
generateHtmlPage
const htmlPage = generateHtmlPage({
pageTitle: 'My Page',
headHtml: '<link rel="stylesheet" href="style.css">',
contentHtml: '<h1>Welcome to My Page</h1>'
});
console.log(htmlPage);
/* Output:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Page</h1>
</body>
</html>
*/
jilto provides the following functions for HTML generation:
generateList(items, ulClass, liClass): Creates an unordered list (ul) with list items (li). Each item in the items array will be a list item. generateTable(data, tableClass): Generates a table (table) from a two-dimensional array. Each sub-array in data represents a row, with its elements representing cells. generateParagraph(text, pClass): Produces a paragraph (p) with the provided text. generateNavbar(links, navClass, linkClass): Constructs a navigation bar (nav) using an array of link objects. Each link object should have href and text properties.
Contributions to jilto are welcome! If you have suggestions, bug reports, or improvements, please feel free to fork the repository and submit a pull request. Ensure your contributions are well-documented and follow the existing coding style.
jilto is open source and is available under the GNU GENERAL PUBLIC LICENSE. See the LICENSE file in the repository for more details.
FAQs
A versatile and efficient JavaScript library for creating isomorphic HTML templates using concise literal syntax. Jilto seamlessly bridges server-side and client-side rendering, enabling developers to write clean, maintainable code for dynamic web applica
The npm package jilto receives a total of 5 weekly downloads. As such, jilto popularity was classified as not popular.
We found that jilto 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
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.