# \[New Plugin\] Programmable templates

**URL:** <https://forum.bubble.io/t/new-plugin-programmable-templates/217592>\
**Category:** Showcase\
**Created:** [July 29, 2022, 6:36am UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592 "2022-07-29T06:36:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![elmo.gomes](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@elmo.gomes](https://forum.bubble.io/u/elmo.gomes)\
**Post date:** [July 29, 2022, 6:36am UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/1 "2022-07-29T06:36:15Z")

</div>

Hello Everyone,

We have just released a new plug that allow you to add programmable templates to your app. This can be used in several ways. Here are some use cases:

- Allow the app user to create its own email templates, inserting dynamic date with the double curly brackets notation: “Hi {{first name}},…”

- Create dynamic HTML templates that are much easier to maintain.

- Create reports formatting data dynamically.

The plugin uses a javascript library from Adam Mark ([https://github.com/adammark/Markup.js/#readme](https://github.com/adammark/Markup.js/#readme)) and has powerful features, including:

- The transformation of dynamic data with different functions (pipes)
- Use of conditional structures within the template (IF…THEN….) - so avoiding the creation of multiple conditions in the Bubble elements, replicating the text and increasing the burden of maintenance
- Loops within the template  
\*Creation of in-template variables

The plugin can also be extended with new functions (or pipes), following the structure in GitHub page above.

We are looking forward to the contributions from the Bubble community, and will be happy to implement the new pipes (functions) that are sent through. There is an opportunity to have calculation functions for individual items and arrays, growing it into a report maker with calculations.

Well, this is intended as a community-driven plugin. Help us out.

🔗 Editor: [Beyondnocode-plugins-demo | Bubble Editor](https://bubble.io/page?type=page&name=programmable_templates&id=beyondnocode-plugins-demo&tab=tabs-1)  
🔗 Preview/Demo : [https://beyondnocode-plugins-demo.bubbleapps.io/version-test/programmable\_templates?debug\_mode=true](https://beyondnocode-plugins-demo.bubbleapps.io/version-test/programmable_templates?debug_mode=true)

Elmo  
Beyond Nocode

---

<div class="post-metadata">

**Author:** ![bart](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/bart/32/169086_2.png) [@bart](https://forum.bubble.io/u/bart)\
**Post date:** [August 31, 2022, 12:39pm UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/2 "2022-08-31T12:39:18Z")

</div>

Hi!

I’m looking for a solution for my SaaS, where my users should be able to create a text (in this case a contract) template, where they can insert dynamic data tags. I’ll give you a contract example where the brackets should be the dynamic data the user should be able to insert in the text editor:

* * *

[Company name] at [Company adress] , hereinafter referred to as: ‘the lessor’,

and

[First name] [Last name] born on [Date of birth], hereinafter referred to as: ‘tenant’,

Have agreed:

**Article 1. The rented,**

The landlord rents out to the tenant the non-independent living space, hereinafter referred to as ‘the rented property’: [Street name] [House number] [Location of object], [Name of space].

* * *

Hopefully someone can help 🙂

---

<div class="post-metadata">

**Author:** ![elmo.gomes](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@elmo.gomes](https://forum.bubble.io/u/elmo.gomes)\
**Post date:** [September 6, 2022, 9:44am UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/3 "2022-09-06T09:44:45Z")

</div>

Hi Bart, our plugin does exactly that. If you insert the variables of the contract in the Data Dictionary field of the Programmable Template component and the template in the Template field, you will have the contract customized as the output. In this way, your users can use contract templates like the one above. Fields will be in double brackets.

---

<div class="post-metadata">

**Author:** ![michael.fielding](https://avatars.discourse-cdn.com/v4/letter/m/a88e57/32.png) [@michael.fielding](https://forum.bubble.io/u/michael.fielding)\
**Post date:** [January 27, 2023, 5:59pm UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/4 "2023-01-27T17:59:48Z")

</div>

This seems very useful. As a suggestion, I think it would be even more useful if it came with client-side and server-side actions to process templates. So, for example, a scheduled workflow action could send out emails.

There’s a [node module for the Mark.up library](https://www.npmjs.com/package/markup-js) so it can be [included in the dependencies for a server side action](https://manual.bubble.io/account-and-marketplace/building-plugins/building-actions#using-node-modules-in-a-server-side-action).

---

<div class="post-metadata">

**Author:** ![michael.fielding](https://avatars.discourse-cdn.com/v4/letter/m/a88e57/32.png) [@michael.fielding](https://forum.bubble.io/u/michael.fielding)\
**Post date:** [January 27, 2023, 6:18pm UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/5 "2023-01-27T18:18:07Z")

</div>

This is the tested code for a Server Side Action (SSA) that uses the template and data\_dictionary parameters just as you defined them for the Element version. It also accepts two other optional parameters, for Mark.up’s includes and globals functions. Those parameters should be defined in the plugin UI as key-value parameters with text values.

It would be great if you would consider trying/implementing this! Either that or I release it as a new plugin?

```
function(properties, context) {
  var Mark = require('markup-js');
    
  /* properties.includes and .globals are in arrays of {"key": x, "value": y} objects, but Mark.up expects
     a simple object with key-value pairs, so we need to transform them using map-reduce.*/
  var options = {
    "includes": properties.includes.reduce((map, obj) => (map[obj.key] = obj.value, map), {}),
    "globals": properties.globals.reduce((map, obj) => (map[obj.key] = obj.value, map), {})
  }
    	
  return { 
      "result": Mark.up( properties.template , JSON.parse(properties.data_dictionary), options )
  }
}
```

---

<div class="post-metadata">

**Author:** ![elmo.gomes](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@elmo.gomes](https://forum.bubble.io/u/elmo.gomes)\
**Post date:** [March 9, 2023, 3:55pm UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/7 "2023-03-09T15:55:42Z")

</div>

Michael. Thx, will test including it next week

---

<div class="post-metadata">

**Author:** ![smb4apps](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@smb4apps](https://forum.bubble.io/u/smb4apps)\
**Post date:** [September 10, 2023, 4:07am UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/9 "2023-09-10T04:07:14Z")

</div>

Hi @elmo.gomes ,

First of all thank you for this great plugin. We were using your plugin without any issue and suddenly it stops working. It does not produce anything anymore and the pdf generated is blank. I am wondering what might cause the issue?

Thank you

---

<div class="post-metadata">

**Author:** ![smb4apps](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@smb4apps](https://forum.bubble.io/u/smb4apps)\
**Post date:** [September 10, 2023, 4:09am UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/10 "2023-09-10T04:09:27Z")

</div>

![image](https://us1.discourse-cdn.com/bubble/original/3X/8/b/8b220359d2d2fc086987bf99576af3d1e4fb2fc9.png)  
result is empty…not sure why. It was working before. Any clue?

---

<div class="post-metadata">

**Author:** ![smb4apps](https://avatars.discourse-cdn.com/v4/letter/s/e495f1/32.png) [@smb4apps](https://forum.bubble.io/u/smb4apps)\
**Post date:** [September 15, 2023, 2:50am UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/11 "2023-09-15T02:50:19Z")

</div>

Hi man,  
Any update? I am stuck with your plugin.

---

<div class="post-metadata">

**Author:** ![elmo.gomes](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@elmo.gomes](https://forum.bubble.io/u/elmo.gomes)\
**Post date:** [November 17, 2023, 4:55pm UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/12 "2023-11-17T16:55:00Z")

</div>

Apologies for taking a long time. There were no changes in the plugin. I will check.

---

<div class="post-metadata">

**Author:** ![salvatore.percival](https://avatars.discourse-cdn.com/v4/letter/s/90db22/32.png) [@salvatore.percival](https://forum.bubble.io/u/salvatore.percival)\
**Post date:** [November 27, 2023, 9:28pm UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/13 "2023-11-27T21:28:56Z")

</div>

Hey there - was this ever solved? I also am seeing empty result when setting this plugin up ! I have followed your setup in the example and unfortunately cannot get the output to populate. Thanks!

---

<div class="post-metadata">

**Author:** ![elmo.gomes](https://avatars.discourse-cdn.com/v4/letter/e/a698b9/32.png) [@elmo.gomes](https://forum.bubble.io/u/elmo.gomes)\
**Post date:** [November 28, 2023, 6:20am UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/14 "2023-11-28T06:20:22Z")

</div>

Hi, can you please paste screenshots of your input?

---

<div class="post-metadata">

**Author:** ![qwatkins](https://avatars.discourse-cdn.com/v4/letter/q/3ec8ea/32.png) [@qwatkins](https://forum.bubble.io/u/qwatkins)\
**Post date:** [March 18, 2026, 5:36pm UTC](https://forum.bubble.io/t/new-plugin-programmable-templates/217592/15 "2026-03-18T17:36:01Z")

</div>

Hello, I am using this in my bubble app and it has been working just fine for several months and I am now having an issue with it. What happens is the plugin works in the dev environment but when I run it in live I get the following error:

The plugin Programmable templates / element ({Programmable Template}} threw the following error: TypeError: Cannot read properties of null (reading ‘match’)  
at Object.up ([https://87447906ef6619a30447ba9a7a93370b.cdn.bubble.io/f1658982872376x194325098171653120/markup.min.js:6:1264](https://87447906ef6619a30447ba9a7a93370b.cdn.bubble.io/f1658982872376x194325098171653120/markup.min.js:6:1264))  
at eval (PLUGIN\_1659307131116x301179675898019840/Programmable-templates-update----Programmable-Template—.js:5:19) (please report this to the plugin author)

It is causing my app to not work at all. Do you have a solution for this? Please advise, thank you
