# simple-html-builder

> Simple tool to build html strings with javascript.

Latest version **1.0.2** (published 2022-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-html-builder
pnpm add simple-html-builder
yarn add simple-html-builder
bun add simple-html-builder
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-10-19 |
| First published | 2022-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | mrRodrigo |
| Maintainers | fuzzye |

## Links

- npm: https://www.npmjs.com/package/simple-html-builder
- Repository: https://github.com/mrRodrigo/html-builder
- Homepage: https://github.com/mrRodrigo/html-builder#readme
- Issues: https://github.com/mrRodrigo/html-builder/issues
- npm.io page: https://npm.io/package/simple-html-builder

## Dependencies (1)

- [html-tags](https://npm.io/package/html-tags.md) ^3.2.0

## Recent versions

- 1.0.2 (latest) — 2022-10-19
- 1.0.1 — 2022-10-19
- 0.1.2 — 2022-08-29
- 0.1.1 — 2022-08-29
- 0.1.0 — 2022-08-27

## README

# Simple html builder for js



```
npm i simple-html-builder
```



Each html tag has two functions, eg: using p tag:


```javascript

const html = new HtmlBuilder();

html.p(); // this function stack p tag and resolve on the build function

html.innerp(); // this function auto build and close the p tag


```

For tag functions you can pass 3 args:

- `attributes` (Object) => here you can set all params to you tag like class, style and key

- `innerContent` (String) => here you can set the inner text for this tag

- `options` (Object) => Only option is a boolean for `close`. When set this to true this tag is closed immediately and not respect the stack of tags. (works only for non "inner" functions)



For build simple html string:

```javascript

const HtmlBuilder = require('../index.js');


const html = new HtmlBuilder()
    .div({ class: 'test' })
    .p({}, 'test')
    .build();

console.log(html);

//output

//<div class="test"><p>test</p></div>

```

For build html with inner tags with custom params like class and styles.

```javascript

const HtmlBuilder = require('../index.js');


const html = new HtmlBuilderhtmlBuilder()
            .tr()
            .td(
              { class: 'column' },
              htmlBuilder.innerp({ class: 'larger' }, 'date'),
              { close: true }
            )
            .td(
              { class: 'column' },
              htmlBuilder.innerdiv(
                { style: 'text-align: center;' },
                htmlBuilder.innerimg({
                  width: '23',
                  src: 'src',
                })
              )
            )
            .p(
              {
                style: 'margin: 5px 0; text-align: center;',
              },
              htmlBuilder.innera(
                { class: 'link', href: 'test' },
                'test'
              ),
              { close: true }
            )
            .build();

console.log(html);

//output (formatted)

<tr>
   <td class="column">
      <p class="larger">date</p>
   </td>
   <td class="column">
      <div style="text-align: center;"><img width="23" src="src"></img></div>
      <p style="margin: 5px 0; text-align: center;"><a class="link" href="test">test</a></p>
   </td>
</tr>

```

---
_Source: https://npm.io/package/simple-html-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._