# html-fiddle

> Middleware (connect) for modifying response html, useful with http-proxy

Latest version **1.0.5** (published 2019-07-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install html-fiddle
pnpm add html-fiddle
yarn add html-fiddle
bun add html-fiddle
```

## 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.5 |
| Published | 2019-07-24 |
| First published | 2019-04-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 0 |
| Unpacked size | 17.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lev Gimelfarb |
| Maintainers | gimelfarb |
| Keywords | html, streaming, transform, reverse, proxy, middleware, connect |

## Links

- npm: https://www.npmjs.com/package/html-fiddle
- Repository: https://github.com/gimelfarb/html-fiddle
- Issues: https://github.com/gimelfarb/html-fiddle/issues
- npm.io page: https://npm.io/package/html-fiddle

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2019-07-24
- 1.0.4 — 2019-07-20
- 1.0.3 — 2019-04-22
- 1.0.2 — 2019-04-21
- 1.0.1 — 2019-04-05
- 1.0.0 — 2019-04-04

## README

# html-fiddle [![Build Status][travis-badge]][travis-href] [![Coverage Status][codecov-badge]][codecov-href] [![Semantic Versioning][semrel-badge]][semrel-href]

[travis-href]: https://travis-ci.org/gimelfarb/html-fiddle
[codecov-href]: https://codecov.io/gh/gimelfarb/html-fiddle
[semrel-href]: https://github.com/semantic-release/semantic-release

[travis-badge]: https://img.shields.io/travis/gimelfarb/html-fiddle/master.svg
[codecov-badge]: https://img.shields.io/codecov/c/gh/gimelfarb/html-fiddle.svg
[semrel-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg

`html-fiddle` is a connect middleware for modifying response html. It can be useful with `http-proxy` to modify HTML returned from the remote target.

## Getting Started

### Installation

```bash
$ npm i --save html-fiddle
```

### Basic Usage

Use as connect middleware in your server. Provide a `through` function which returns a transform stream for HTML.

```javascript
const fiddle = require('html-fiddle');
const replaceStream = require('replacestream');

app.use(fiddle({
    through: () => replaceStream('Original', 'Replaced')
}));
```

Above example uses [`replacestream`](https://github.com/eugeneware/replacestream) library to create a stream which
will transform the HTML. This will cause all text matching `"Original"` to be replaced with `"Replaced"`.

Given: `<html><body>Original!</body></html>`
Result: `<html><body>Replaced!</body></html>`

## Examples

### Use with `http-proxy` to modify proxied HTML

This library is most useful when used in conjunction with [`http-proxy`](https://github.com/nodejitsu/node-http-proxy)
and [node-trumpet2](https://github.com/gofunky/node-trumpet2).

Following code launches a local proxy on http://localhost:8008/ which serves contents of Google homepage, but injects
a script at the bottom, that replaces Google logo image with "Boogle".

```javascript
const express = require('express');
const fiddle = require('html-fiddle');
const trumpet = require('node-trumpet2');
const httpProxy = require('http-proxy');

const app = express();

// html-fiddle middleware has to be added before the proxy
app.use(fiddle({
    // we use trumpet() to parse and modify html elements
    // in a streaming fashion
    through: () => {
        const tr = trumpet();
        tr.select('body', (el) => {
            const es = el.createStream();
            // at the end, add extra markup
            es.on('end', () => es.write(
                `<script>
                    document.querySelector("#main img").removeAttribute("srcset");
                    document.querySelector("#main img").src = "https://booglebookclub.com/images/logo.png";
                </script>`
            ));
            // keep the rest of element contents
            es.pipe(es);
        });
        return tr;
    }
}));

// Proxy to Google homepage
const proxy = httpProxy.createProxyServer({
    target: "https://www.google.com/",
    changeOrigin: true
});

app.use((req, res) => proxy.web(req, res));

// If you visit http://localhost:8008/, you'll see Google search, with
// a modified image (because of the extra injected script)
app.listen(8008, () => console.log('Listening on http://localhost:8008/ ...'));
```

## Contributing

Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](../../tags). 

## Authors

* **Lev Gimelfarb** - *Initial work* - [@gimelfarb](https://github.com/gimelfarb)

See also the list of [contributors](https://github.com/gimelfarb/html-fiddle/contributors) who participated in this project.

## License

This project is licensed under the ISC License - see the [LICENSE.md](LICENSE.md) file for details

## Acknowledgments

* [harmon](https://github.com/No9/harmon) - Initial inspiration to improve upon
* [http-proxy](https://github.com/nodejitsu/node-http-proxy) - Proxying content that prompted development of html-fiddle
* [node-trumpet2](https://github.com/gofunky/node-trumpet2) - Maintained version of 'trumpet' that I wanted to use, hence the need to improve upon 'harmon'

Also, thanks [@PurpleBooth](https://github.com/PurpleBooth), for the [README template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2) you created for all of us to use!

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