# @onflow/util-template

> Template Literal used for Cadence Interop

Latest version **1.2.4** (published 2025-09-08) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @onflow/util-template
pnpm add @onflow/util-template
yarn add @onflow/util-template
bun add @onflow/util-template
```

## Health

**Score 65/100 (B)** — status: stable.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.2.4 |
| Published | 2025-09-08 |
| First published | 2020-09-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 39.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 333 |
| Author | Flow Foundation |
| Maintainers | han210, dapperj, dapper_labs, jeffreydoyle, harry.eth, turbolent_flow, chasefleming, gregsantos, gregorggg, jribbink, bthaile, nialexsan, sisyphussmiling, lmcmze |

## Links

- npm: https://www.npmjs.com/package/@onflow/util-template
- Repository: https://github.com/onflow/fcl-js
- Homepage: https://flow.com
- Issues: https://github.com/onflow/fcl-js/issues
- npm.io page: https://npm.io/package/@onflow/util-template

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.25.7
- [@onflow/util-logger](https://npm.io/package/@onflow/util-logger.md) 1.3.4

## Recent versions

- 1.2.4 (latest) — 2025-09-08
- 1.2.3-alpha.0 (alpha) — 2024-10-22
- 1.2.2-event-streaming.1 (event-streaming) — 2023-11-29
- 1.2.0-typescript.0 (typescript) — 2023-11-01
- 1.2.3 — 2024-11-27
- 1.2.2 — 2024-03-26
- 1.2.2-alpha.2 — 2023-12-07
- 1.2.2-alpha.1 — 2023-12-07
- 1.2.2-alpha.0 — 2023-12-04
- 1.2.2-event-streaming.0 — 2023-11-29
- 1.2.1 — 2023-11-09
- 1.2.0 — 2023-10-22
- 1.2.0-alpha.0 — 2023-08-04
- 1.1.0 — 2023-06-02
- 1.1.0-alpha.2 — 2023-06-02
- … 12 more at https://npm.io/package/@onflow/util-template/versions

## README

# template

Utility to help with string interop in SDK and FCL

## Usage

```javascript
import {templar} from "onflow/template"

const template = templar`
From: ${o => o.from}
To: ${o => o.to}
Message: ${o => o.msg}
`

const letter = template({
  from: "Bob the Builder",
  to: "Postman Pat",
  msg: "Please pick up your black and white cat.",
})

// prettier-ignore
assert( letter, `
From: Bob the Builder
To: Postman Pat
Message: Please pick up your black and white cat.
`)
```

```javascript
import {templar} from "@onflow/template"

const template1 = templar`
a: ${o => o.a}
b: ${o => o.b}
`

const template2 = templar`
x: ${o => o.x}
y: ${o => o.y}
`

const template3 = templar`
${template1}
${template2}
oh hello!
${template1}
${template2}
`

const rawr = template3({a: "A", b: "B", x: "X", y: "Y"})

// prettier-ignore
assert(rawr, `
a: A
b: B
x: X
y: Y
oh hello!
a: A
b: B
x: X
y: Y
`)
```

## Examples

**Role your own graphql libary**

```javascript
// gql.js
import {templar} from "@onflow/template"

export const gql = templar

export const gqlr = (...args) => (opts = {}) => {
  const params = opts.params || {}
  const headers = opts.headers || {}
  const endpoint = opts.endpoint || ""

  return fetch(endpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify({
      query: gql(...args)(params),
    }),
  }).then(d => d.json())
}

// somewhere-else.js
import React, {useEffect, useState} from "react"
import {gqlr, gql} from "./gql"

const USER = gql`
  fragment USER on User {
    username
  }
`

const query = gqlr`
  query {
    me { ...USER }
  }
  ${USER}
`

export const Username = () => {
  const [username, setUsername] = useState(null)

  useEffect(() => {
    query({
      endpoint: "http://...",
      headers: {authorization: "bearer ..."},
    }).then(response => setUsername(response.data.me.username))
  }, [])

  return username == null ? null : username
}
```

**Role your own pipeline thing?**

```javascript
const pipe = (fns = []) => token => {
  return fns.reduce((token, fn) => fn(token), token)
}

const param = (key, value) => token => {
  token.params = token.parms || {}
  token.params[key] = value
  return token
}

const script = (...args) => token => {
  token.type = "script"
  token.value = templar(...args)(token.params)
  return token
}

const query = (...args) => token => {
  token.type = "query"
  token.value = templar(...args)(token.parms)
  return token
}

const desc = (...args) => token => {
  token.description = templar(...args)(token.params)
  return token
}

const rawr = pipe([
  param("msg", "woot woot im a boot"),
  script`
    pub fun main() {
      log("msg: ${o => o.msg}")
    }
  `,
  desc`
    the message: ${o => o.msg}
  `,
])

assert(rawr, {
  params: {
    msg: "woot woot im a boot",
  },
  type: "script",
  code: `
    pub fun main() {
      log("msg: woot woot im a boot")
    }
  `,
  descrition: `
    the message: woot woot im a boot
  `,
})
```

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