# pub-preview

> Browserify script for client-side navigation and pub-pkg-editor preview rendering (uses jQuery)

Latest version **2.0.0** (published 2026-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install pub-preview
pnpm add pub-preview
yarn add pub-preview
bun add pub-preview
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

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

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-02-21 |
| First published | 2015-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jürgen Leschner |
| Maintainers | jldec |

## Links

- npm: https://www.npmjs.com/package/pub-preview
- Repository: https://github.com/jldec/pub-server-monorepo
- Homepage: https://github.com/jldec/pub-server-monorepo#readme
- Issues: https://github.com/jldec/pub-server-monorepo/issues
- npm.io page: https://npm.io/package/pub-preview

## Dependencies (1)

- [page](https://npm.io/package/page.md) ^1.11.6

## Recent versions

- 2.0.0 (latest) — 2026-02-21
- 1.3.9 — 2024-09-01
- 1.3.8 — 2022-01-16
- 1.3.7 — 2020-07-26
- 1.3.5 — 2020-03-07
- 1.3.4 — 2019-04-07
- 1.3.3 — 2019-02-14
- 1.3.2 — 2019-01-10
- 1.3.1 — 2015-11-06
- 1.3.0 — 2015-08-09
- 1.2.0 — 2015-08-05
- 1.1.1 — 2015-08-04
- 1.1.0 — 2015-08-03
- 1.0.0 — 2015-07-22

## README

# pub-preview

Browserify script for client-side navigation and pub-pkg-editor preview rendering (uses jQuery).

### Installation

- This module is included as a dependency of `pub-pkg-editor`
- The module simply exports a fully qualified path to `pub-preview.js`which can then can be served as a browserScript through `pub-config.js`. E.g

```js
{ path: require('pub-preview'),  route: '/pub/js' }
```

The script can be injected into any pub-server generated HTML with

```js
var $script = $('<script src="/pub/js/pub-preview.js"></script>');
$('body').append($script);
```

#### Note

- the script assumes a global instance of `pub-generator` in `window.generator`

- client-side navigation is performed by the [page](https://github.com/visionmedia/page.js) module which depends on history.pushstate support in the browser.


### How it works

- `pub-preview.js` loads the `page` module which takes over click events and manages browser history. Any internal link to another page will trigger a generator `nav` event.

- `jqueryview.js` listens for generator 'nav', 'loaded', and 'updatedText' events and emits 'update-view' when content in the DOM has been replaced with newly generated HTML. This allows the same mechanism to be used for offline navigation as well as source changes in an editor.

### html template guidelines

When content is modified an attempt is made to determine whether the edit affects the layout, the page or fragment container, or just the  html rendered from markdown

In order to maximize responsiveness, the editor relies on data attributes on html tags to replace just the affected HTML


- `data-render-layout` = name of layout template - wrapper auto-inserted by {{{renderLayout}}})
- `data-render-page` = name of page template - wrapper div auto-inserted by  {{{renderPage}}}
- `data-render-html` = _href of fragment or page - wrapper div auto-inserted by {{{html}}}

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