# @rhtml/renderer

> Reactive HyperText Markup Language

Latest version **0.0.148** (published 2026-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rhtml/renderer
pnpm add @rhtml/renderer
yarn add @rhtml/renderer
bun add @rhtml/renderer
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.148 |
| Published | 2026-05-02 |
| First published | 2019-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kristiyan Tachev |
| Maintainers | rxdi |

## Links

- npm: https://www.npmjs.com/package/@rhtml/renderer
- Repository: https://github.com/rhtml/rhtml
- Homepage: https://github.com/rhtml/rhtml#readme
- Issues: https://github.com/rhtml/rhtml/issues
- npm.io page: https://npm.io/package/@rhtml/renderer

## Dependencies (1)

- [@rxdi/lit-html](https://npm.io/package/@rxdi/lit-html.md) ^0.7.225

## Recent versions

- 0.0.148 (latest) — 2026-05-02
- 0.0.147 — 2026-05-02
- 0.0.146 — 2026-03-25
- 0.0.145 — 2026-01-31
- 0.0.144 — 2026-01-29
- 0.0.143 — 2026-01-29
- 0.0.142 — 2026-01-28
- 0.0.141 — 2026-01-13
- 0.0.140 — 2026-01-12
- 0.0.139 — 2026-01-07
- 0.0.138 — 2026-01-06
- 0.0.137 — 2026-01-05
- 0.0.136 — 2025-08-28
- 0.0.135 — 2025-08-26
- 0.0.134 — 2025-02-27
- … 115 more at https://npm.io/package/@rhtml/renderer/versions

## README

# @rhtml/renderer

#### Installation

```bash
npm i @rhtml/renderer
```

#### Usage

```typescript
import { LitElement, Component, html } from '@rxdi/lit-html';

import '@rxdi/renderer';

interface State { counter: number; }

@Component({
  selector: 'r-html-view',
  template(this: RHtmlViewComponent) {
    return html`
      <r-renderer
        .options=${{
          state: { counter: 1 },
          render: (res: State, setState: (res: State) => State) =>
            html`
              <button
                @click=${() => setState({ counter: res.counter + res.counter })}
              >
                Increment
              </button>
              ${res.counter}
            `,
          loading: () =>
            html`
              Loading...
            `,
          error: () =>
            html`
              Error
            `
        }}
      ></r-renderer>
    `;
  }
})
export class RHtmlViewComponent extends LitElement {}
```


##### Can be provided also `observable` value

```typescript
import { LitElement, Component, html } from '@rxdi/lit-html';
import { BehaviorSubject } from 'rxjs';

import '@rxdi/renderer';

interface State { counter: number; }

@Component({
  selector: 'r-html-view',
  template(this: RHtmlViewComponent) {
    return html`
      <r-renderer
        .options=${{
          state: new BehaviorSubject({ counter: 1 }),
          render: (res: State, setState: (res: State) => State) =>
            html`
              <button
                @click=${() => setState({ counter: res.counter + res.counter })}
              >
                Increment
              </button>
              ${res.counter}
            `,
          loading: () =>
            html`
              Loading...
            `,
          error: () =>
            html`
              Error
            `
        }}
      ></r-renderer>
    `;
  }
})
export class RHtmlViewComponent extends LitElement {}
```

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