Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wandererxii/tstags
https://github.com/wandererxii/tstags
Last synced: 14 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/wandererxii/tstags
- Owner: WandererXII
- Created: 2022-11-16T23:45:02.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-23T00:54:39.000Z (about 2 years ago)
- Last Synced: 2024-10-30T08:56:12.455Z (2 months ago)
- Language: TypeScript
- Size: 59.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tsTags: typescript HTML generator
[](https://www.npmjs.com/package/@liskadan/tstags)
Simply and quickly generate HTML. No need to write HTML directly.
## What it does?
Turns this:
```typescript
section([
h1(article.title),
h2(article.subtitle),
div({ class: 'my-class' }, p(article.text)),
]);
```
Into this:
```html
Title
Subtitle
Lorem ipsum dolor sit amet consectetur adipisicing elit.
```
### Custom tags
You can also use custom tags:
```typescript
tag('outer-tag', tag('inner-tag'));
```
And generate:
```html
```
### CSS-like class and id specifiers
With `tag` you can also specify class and id in the selector.
```typescript
tag('div.wrap', tag('div#id123'));
```
```HTML
```
`tag` might also be better, that you don't need to import a separate function for each tag type.
### Syntax
#### Empty elements:
```typescript
title();
// or
tag('title');
```
Both become the same:
```HTML
```
#### Attributes:
```typescript
a({ href: 'url' });
// or
tag('a', { href: 'url' });
```
#### Inner data:
String:
```typescript
div('Content');
// or
tag('div', 'Content');
```
```HTML
Content
```
Element:
```typescript
div(button());
// or
tag('div', tag('button'));
```
```HTML
```
Or multiple inner elements:
```typescript
ul([
li('Apples'),
li('Bees'),
li('Cider'),
li('Deer'),
li('Egg'),
li('Fruit'),
li('Gorilla'),
]);
// or
tag('ul', [
tag('li', 'Apples'),
tag('li', 'Bees'),
tag('li', 'Cider'),
tag('li', 'Deer'),
tag('li', 'Egg'),
tag('li', 'Fruit'),
tag('li', 'Gorilla'),
]);
```
```HTML
- Apples
- Bees
- Cider
- Deer
- Egg
- Fruit
- Gorilla
```
Of course you can combine the syntax in any reasonable way. The advantage of tag is that you need to import only one function, which may or may not matter, depending on your use-case.
Generated HTML is not formatted.
If you want to write the result to a file, simply use something like:
```javascript
fs = require('fs');
fs.writeFileSync('index.html', myGeneratedHtml);
```
### Tag description
MDN description in tooltip.
