@talqui-oss/template-builder 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +129 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<div align="center"><strong>Template Builder</strong></div>
|
|
4
|
+
<div align="center">Preview, validate and create WhatsApp message templates.<br />One JSON object, every provider.</div>
|
|
5
|
+
<br />
|
|
6
|
+
<div align="center">
|
|
7
|
+
|
|
8
|
+
[](https://www.npmjs.com/package/@talqui-oss/template-builder)
|
|
9
|
+
[](https://github.com/talqui-oss/template-builder/blob/main/.nvmrc)
|
|
10
|
+
[](https://www.typescriptlang.org/)
|
|
11
|
+
[](https://github.com/talqui-oss/template-builder/blob/main/LICENSE.md)
|
|
12
|
+
|
|
13
|
+
</div>
|
|
14
|
+
<div align="center">
|
|
15
|
+
<a href="https://template-builder.dev">Website</a>
|
|
16
|
+
<span> · </span>
|
|
17
|
+
<a href="https://github.com/talqui-oss/template-builder">GitHub</a>
|
|
18
|
+
<span> · </span>
|
|
19
|
+
<a href="https://www.npmjs.com/package/@talqui-oss/template-builder">npm</a>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
## Introduction
|
|
23
|
+
|
|
24
|
+
A small toolkit for WhatsApp message templates, written in TypeScript. Describe a template as plain JSON, check it against Meta's rules before you submit it, render a faithful preview in React or Vue, and get the exact request to create it on Meta, Twilio or Talqui. Prefer the browser? [template-builder.dev](https://template-builder.dev) does all of it with a shareable link, no account needed.
|
|
25
|
+
|
|
26
|
+
## Why
|
|
27
|
+
|
|
28
|
+
Templates are the first thing every WhatsApp integration has to get right, and the last thing anyone wants to debug. The rules live in scattered docs, each provider wants a different payload, and you only find out what was wrong after a rejection. Building a template should feel like writing any other piece of typed code: you see it, the editor tells you what breaks, and shipping it is one request away.
|
|
29
|
+
|
|
30
|
+
## Install
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
npm i @talqui-oss/template-builder @talqui-oss/template-builder-react
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Using Vue? Install `@talqui-oss/template-builder-vue` instead of the React package.
|
|
37
|
+
|
|
38
|
+
## Getting started
|
|
39
|
+
|
|
40
|
+
Describe your template and render it with `<TemplatePreview />`.
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import type { Template } from "@talqui-oss/template-builder";
|
|
44
|
+
import { TemplatePreview } from "@talqui-oss/template-builder-react";
|
|
45
|
+
|
|
46
|
+
const template = {
|
|
47
|
+
name: "order_shipped",
|
|
48
|
+
language: "en_US",
|
|
49
|
+
category: "UTILITY",
|
|
50
|
+
header: { type: "TEXT", text: "Your order is on the way" },
|
|
51
|
+
body: { text: "Hi {{name}}, order {{order}} is on the way." },
|
|
52
|
+
footer: { text: "Reply STOP to opt out" },
|
|
53
|
+
buttons: [
|
|
54
|
+
{ type: "URL", text: "Track order", url: "https://acme.com/t/{{order}}" },
|
|
55
|
+
],
|
|
56
|
+
variables: { name: { example: "Maria" }, order: { example: "4512" } },
|
|
57
|
+
} satisfies Template;
|
|
58
|
+
|
|
59
|
+
export default function App() {
|
|
60
|
+
return <TemplatePreview template={template} />;
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Then validate it and generate the request for your provider.
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import { validate, toRequests, toCurl } from "@talqui-oss/template-builder";
|
|
68
|
+
import { meta } from "@talqui-oss/template-builder/adapters/meta";
|
|
69
|
+
|
|
70
|
+
const result = validate(template);
|
|
71
|
+
if (!result.valid) console.log(result.issues);
|
|
72
|
+
|
|
73
|
+
console.log(toCurl(toRequests(template, meta())));
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Using with AI
|
|
77
|
+
|
|
78
|
+
Install the Template Builder skill to teach your coding agent (Claude Code, Codex, Cursor, GitHub Copilot, and others) how to build and validate templates:
|
|
79
|
+
|
|
80
|
+
```sh
|
|
81
|
+
npx skills add talqui-oss/template-builder
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The docs are also available for LLMs at [template-builder.dev/llms.txt](https://template-builder.dev/llms.txt).
|
|
85
|
+
|
|
86
|
+
## API
|
|
87
|
+
|
|
88
|
+
A few functions and one component, all typed end to end.
|
|
89
|
+
|
|
90
|
+
- [TemplatePreview for React](https://github.com/talqui-oss/template-builder/tree/main/packages/template-builder-react)
|
|
91
|
+
- [TemplatePreview for Vue](https://github.com/talqui-oss/template-builder/tree/main/packages/template-builder-vue)
|
|
92
|
+
- [validate](https://github.com/talqui-oss/template-builder/tree/main/packages/template-builder)
|
|
93
|
+
- [toRequests](https://github.com/talqui-oss/template-builder/tree/main/packages/template-builder)
|
|
94
|
+
- [toCurl](https://github.com/talqui-oss/template-builder/tree/main/packages/template-builder)
|
|
95
|
+
- [defineAdapter](https://github.com/talqui-oss/template-builder/tree/main/packages/template-builder)
|
|
96
|
+
- [JSON Schema](https://github.com/talqui-oss/template-builder/tree/main/packages/template-builder)
|
|
97
|
+
|
|
98
|
+
## Integrations
|
|
99
|
+
|
|
100
|
+
Templates built with Template Builder can be created on any provider through an adapter. These ship with the package:
|
|
101
|
+
|
|
102
|
+
- [Meta Cloud API](https://github.com/talqui-oss/template-builder/tree/main/examples/meta)
|
|
103
|
+
- [Twilio](https://github.com/talqui-oss/template-builder/tree/main/examples/twilio)
|
|
104
|
+
- [Talqui](https://github.com/talqui-oss/template-builder/tree/main/examples/talqui)
|
|
105
|
+
|
|
106
|
+
Missing yours? [Request an adapter](https://github.com/talqui-oss/template-builder/issues/new?template=adapter_request.yml) or write one with [`defineAdapter`](https://github.com/talqui-oss/template-builder/tree/main/examples/custom-adapter).
|
|
107
|
+
|
|
108
|
+
## Support
|
|
109
|
+
|
|
110
|
+
Every template type is checked against the rules Meta applies before review, and every preview is compared with the real app.
|
|
111
|
+
|
|
112
|
+
| Android | iOS | Web | Desktop | Meta | Twilio | Talqui |
|
|
113
|
+
| ---------- | ---------- | ---------- | ---------- | -------- | ---------- | -------- |
|
|
114
|
+
| In testing | In testing | In testing | In testing | Verified | Unverified | Verified |
|
|
115
|
+
|
|
116
|
+
## Development workflow
|
|
117
|
+
|
|
118
|
+
1. [Setting up your development environment](https://github.com/talqui-oss/template-builder/blob/main/CONTRIBUTING.md#setup)
|
|
119
|
+
2. [Running the commands](https://github.com/talqui-oss/template-builder/blob/main/CONTRIBUTING.md#commands)
|
|
120
|
+
3. [Opening a pull request](https://github.com/talqui-oss/template-builder/blob/main/CONTRIBUTING.md#pull-requests)
|
|
121
|
+
4. [Reporting a Meta rule change](https://github.com/talqui-oss/template-builder/blob/main/CONTRIBUTING.md#meta-rule-changes)
|
|
122
|
+
|
|
123
|
+
## Contributing
|
|
124
|
+
|
|
125
|
+
- [Contribution Guide](https://github.com/talqui-oss/template-builder/blob/main/CONTRIBUTING.md)
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
Brought to you by [Talqui](https://talqui.chat), MIT License.
|