lydio
Version:
Beautiful, modular, programmatic HTML
211 lines (77 loc) • 3.42 kB
Markdown
# Lydio
> Beautiful, modular, programmatic HTML
**Canonical URL:**
[https://alexstevovich.com/r/lydio-nodejs](https://alexstevovich.com/r/lydio-nodejs)
Write a tag. Make a component. Build a site. All in plain JavaScript.
---
### Quick Example:
```js
const html = new Tag('html');
const head = html.addTag('head');
const body = html.addTag('body');
body.addText('Lydio is Awesome!');
console.log(html.toHtml());
/*
<html><head></head><body>Lydio is Awesome!</body></html>
*/
```
### With Components:
```js
class MyHeader extends Tag {
constructor(brandSrc, brandAlt) {
super('header');
const brand = this.addTag('a').setAttribute('href', '/');
brand.addLeaf('img').setAttribute('src', brandSrc).setAttribute('alt', brandAlt);
}
}
const body = new Tag('body');
body.addNode(new MyHeader('./lydio-brand.webp', 'A picture of Lydio'));
```
## Installation
```sh
npm install lydio
```
## Features
### API:
- Elegant, clear, and minimal HTML writing.
- Fluent when you want it to be.
- Fully programmatic, full control.
- The programmatic nature allows complex HTML components to be easily made and shared.
### No framework:
- Each piece outputs standard HTML
- No forced bundlers
- No forced server architecture
- No proprietary documents
- No black boxes
# Core Types
3 core types are offered to express HTML 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.
# Advanced Features
## Bubble
Bubbling a node lets a function recursively be applied to all nested nodes. You can transform an entire hierarchy however you want.
Apply BEM, style scopes and more. You can write your own but I provide a default library of these here:
[@lydio/bubbles](https://alexstevovich.com/r/lydio-bubbles-nodejs)
## Components
You can make reusable configurable components easily. Here's a few premade plugins:
- The entire web standard semantics: [@lydio/semantics](https://alexstevovich.com/r/lydio-semantics-nodejs)
- The head meta web standard: [@lydio/meta](https://alexstevovich.com/r/lydio-meta-nodejs)
## Audit
#### `audit()`
Check your structure at any time with `.audit()` to catch invalid HTML and get helpful feedback. You can even extend audits on your own components for custom validation.
### Meaning
#### `toMeaning()`
Get a semantic summary of your site, including hidden content like `aria-labels` and `alt` text.
Useful for extracting plain-text structure to share with copy editors or LLMs, or for auditing meaningful content across your project.
Each component can override `toMeaning()` to define its own output.
## Css
[@lydio/css](https://alexstevovich.com/r/lydio-css) a companion package for programmatic CSS authoring.
## License
Licensed under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0).
## Trademark
“Lydio” and related marks are trademarks of Alex Stevovich.
See [TRADEMARK.md](./TRADEMARK.md) for details.