# ember-render-helpers

> Helpers that complement @ember/render-modifiers

Latest version **3.0.2** (published 2026-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-render-helpers
pnpm add ember-render-helpers
yarn add ember-render-helpers
bun add ember-render-helpers
```

## Health

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

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2026-05-28 |
| First published | 2019-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | 22.* \|\| >= 24 |
| Dependencies | 2 |
| Unpacked size | 25.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | Jan Buschtöns |
| Maintainers | buschtoens, ijlee2 |
| Keywords | ember-addon, ember-helper, ember-template-helper, template-helper, helper, render, @ember/render-modifiers, did-insert, did-update, will-destroy |

## Links

- npm: https://www.npmjs.com/package/ember-render-helpers
- Repository: https://github.com/buschtoens/ember-render-helpers
- Homepage: https://github.com/buschtoens/ember-render-helpers#readme
- Issues: https://github.com/buschtoens/ember-render-helpers/issues
- npm.io page: https://npm.io/package/ember-render-helpers

## Dependencies (2)

- [decorator-transforms](https://npm.io/package/decorator-transforms.md) ^2.3.0
- [@embroider/addon-shim](https://npm.io/package/@embroider/addon-shim.md) ^1.10.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 3.0.2 (latest) — 2026-05-28
- 3.0.1 — 2026-05-08
- 3.0.0 — 2026-05-04
- 2.0.0 — 2025-09-12
- 1.0.5 — 2025-09-12
- 1.0.4 — 2025-02-18
- 1.0.3 — 2024-11-11
- 0.2.1 — 2024-11-11
- 1.0.2 — 2024-04-30
- 1.0.1 — 2024-04-08
- 1.0.0 — 2024-04-08
- 0.2.0 — 2020-12-18
- 0.1.1 — 2019-11-11
- 0.1.0 — 2019-08-28

## README

[![This project uses GitHub Actions for continuous integration.](https://github.com/buschtoens/ember-render-helpers/actions/workflows/ci.yml/badge.svg)](https://github.com/buschtoens/ember-render-helpers/actions/workflows/ci.yml)

# ember-render-helpers

Use the `{{did-insert}}`, `{{did-update}}`, `{{will-destroy}}` modifiers from [`@ember/render-modifiers`][render-modifiers] as template helpers.

The original idea came from [this Pre-RFC][pre-rfc].

[render-modifiers]: https://github.com/emberjs/ember-render-modifiers#readme
[pre-rfc]: https://github.com/emberjs/rfcs/issues/484

## Installation

```
ember install ember-render-helpers
```

<details>

<summary>Use Glint or <code>&lt;template&gt;</code> tag? ✨</summary>

- Update your template registry to extend this addon's. Check the [Glint documentation](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) for more information.

    ```ts
    import '@glint/environment-ember-loose';

    import type EmberRenderHelpersRegistry from 'ember-render-helpers/template-registry';

    declare module '@glint/environment-ember-loose/registry' {
      export default interface Registry extends EmberRenderHelpersRegistry, /* other addon registries */ {
        // local entries
      }
    }
    ```

- In a `<template>` tag, use the named import to consume the helpers.

    ```ts
    import { action } from '@ember/object';
    import Component from '@glimmer/component';
    import { didInsertHelper } from 'ember-render-helpers';

    export default class HelloComponent extends Component {
      @action sayHello() {
        console.log('Hello!');
      }

      <template>
        {{didInsertHelper this.sayHello}}
      </template>
    }
    ```

</details>


## Usage

`ember-render-helpers` provides 3 helpers. To avoid name conflicts with `@ember/render-modifiers`, these helpers are suffixed with `-helper`.

- `{{did-insert-helper}}`
- `{{did-update-helper}}`
- `{{will-destroy-helper}}`

All helpers expect a callback function as the 1st positional argument. You can pass parameters to this callback function as subsequent positional arguments, as named arguments, or using both.

```hbs
{{did-insert-helper this.sayHello "Zoey"}}
```

```ts
import Component from '@glimmer/component';
import type { NamedParameters, PositionalParameters } from 'ember-render-helpers';

export default class HelloComponent extends Component {
  @action sayHello(positional: PositionalParameters, _named: NamedParameters) {
    const name = positional[0] as string;

    console.log(`Hello, ${name}!`);
  }
}
```


### Example

Clicking the `Toggle` button will toggle the `isVisible` flag. When it switches
to `true`, `onDidInsert` will be called, because the `{{did-insert-helper}}` helper is
inserted. When it switches to `false`, `onWillDestroy` will be called, because
the `{{will-destroy-helper}}` helper is removed.

Clicking the `Random` button will set `randomValue` to a new random value. Every
time this happens, while `isVisible` is `true`, `onDidUpdate` will be called,
because one of the parameters passed to the `{{did-update-helper}}` helper was updated.

Clicking the `Random` button _does not_ cause `{{did-insert-helper}}` or
`{{will-destroy-helper}}` to call `onDidInsert` and `onWillDestroy`, since these
helpers are not triggered by parameter updates.

```hbs
{{#if this.isVisible}}
  {{did-insert-helper   this.onDidInsert   1 2 3 this.randomValue foo="bar" qux="baz"}}
  {{will-destroy-helper this.onWillDestroy 1 2 3 this.randomValue foo="bar" qux="baz"}}
  {{did-update-helper   this.onDidUpdate   1 2 3 this.randomValue foo="bar" qux="baz"}}
{{/if}}

<button {{on "click" this.toggleVisibility}}>Toggle</button>
<button {{on "click" this.rollTheDice}}>Random</button>
```

```ts
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked isVisible = false;

  @tracked randomValue?: number;

  @action
  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }

  @action
  rollTheDice() {
    this.randomValue = Math.random();
  }

  @action
  onDidInsert(positional: unknown[], named: Record<string, unknown>) {
    console.log({ positional, named });
    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
  }

  @action
  onWillDestroy(positional: unknown[], named: Record<string, unknown>) {
    console.log({ positional, named });
    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
  }

  @action
  onDidUpdate(positional: unknown[], named: Record<string, unknown>) {
    console.log({ positional, named });
    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
  }
}
```


## Compatibility

- Ember.js v4.12 or above
- Node.js v22 or above

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