lydio
v3.0.1
Published
Beautiful, modular, programmatic HTML
Maintainers
alexstevovichReadme
Lydio
Beautiful, modular, programmatic HTML
Canonical URL: https://alexstevovich.com/a/lydio-nodejs
Software URL: https://midnightcitylights.com/software/lydio-nodejs
Write a tag. Make a component. Build a site. All in plain JavaScript.
Quick Example:
import lydio from 'lydio';
const html = new lydio.Tag('html');
const head = html.addTag('head');
const body = html.addTag('body');
body.withText('Lydio is Awesome!');
console.log(html.toHtml());
/*
<html><head></head><body>Lydio is Awesome!</body></html>
*/With Components:
import lydio from 'lydio';
class MyHeader extends lydio.Tag {
constructor(brandSrc, brandAlt) {
super('header');
const brand = this.addTag('a').withAttribute('href', '/');
brand
.addLeaf('img')
.withAttribute('src', brandSrc)
.withAttribute('alt', brandAlt);
}
}
const body = new lydio.Tag('body');
body.addNode(new MyHeader('./lydio-brand.webp', 'A picture of Lydio'));Installation
npm install lydioLight & No framework:
- Each element outputs standard HTML
- No forced bundlers
- No forced server architecture
Core Types
Three core types are offered to express HTML, and they all extend from one base type.
Node (Abstract Base)
Lydio gives you three basic building blocks to express HTML programmatically:
Tag: For regular elements like<div>.Leaf: For self-closing elements like<img>.Fragment: For grouping elements without a wrapper.
These all extend from a shared base Node with common methods and properties.
Lydio Family
- Enhanced standard HTML elements: @lydio/html
- Common HTML element patterns: @lydio/primitives
- The modern suite of meta-tags: @lydio/meta-tags
- Schema script node: @lydio/schema
- Google Analytics node: @lydio/google-tag
- Pure HTML DOM: @lydio/dom
- Production HTML Dom: @lydio/megalodom
- Standard Login Form: @lydio/login-form
- Bubble Transforms: @lydio/bubbles
License
Licensed under the Apache License 2.0.
Trademark
“Lydio” and related marks are trademarks of Alex Stevovich.
See TRADEMARK.md for details.