Strapi Snippets

A plugin for Strapi CMS that populates custom snippets into API response data.

Get Started

• Features
• Installation
• Configuration
• User Guide
• Troubleshooting
• Support or Donate
• Roadmap

✨ Features

• Create variables to use throughout your content, which are replaced in API response data.
• Copy and paste easily into your text fields.
• Updating the snippet code automatically updates all of your data entries in Strapi with the new code.
• Supports API models, plugin models, components, and dynamic zones.

💎 Installation

yarn add strapi-plugin-snippets@latest

🔧 Configuration

contentTypes

By default, all API models and components are parsed by the snippets plugin. However, models defined in plugins are not automatically included.

Use the allow and deny props of contentTypes to include or exclude certain UIDs which can include API content types, plugin content types, and components.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
// ./config/plugins.js`
'use strict';

module.exports = {
  snippets: {
    config: {
      contentTypes: {
        allow: [ 'plugin::menus.menu', 'plugin::menus.menu-item' ],
        deny: [ 'api::example.example', 'comp.example-component' ],
      },
    },
  },
};

ignoreUnmatched

If true, unmatched codes will remain unparsed in response data, otherwise they are replaced with an empty string.

Example

1
2
3
4
5
6
7
8
9
10
// ./config/plugins.js`
'use strict';

module.exports = {
  snippets: {
    config: {
      ignoreUnmatched: false,
    },
  },
};

Consider a scenario where we have 2 snippets, one called SNIPPET_ONE and another called SNIPPET_TWO and both will be replaced with the string "foobar". We also have an entity with a title and summary fields where both fields use snippets.

The snippet named SNIPPET_MISSING does not actually exist and will either be replaced with an empty string or ignored completely. See the example below.

Response data BEFORE parsing snippets

1
2
3
4
5
6
7
8
9
10
{
  "data": {
    "id": 1,
    "attributes": {
      "title": "Testing snippet {SNIPPET_ONE} and {SNIPPET_MISSING}.",
      "summary": "Testing snippet {SNIPPET_ONE} and {SNIPPET_TWO}."
    }
  },
  "meta": {}
}

Response with ignoreUnmatched set to true

1
2
3
4
5
6
7
8
9
10
{
  "data": {
    "id": 1,
    "attributes": {
      "title": "Testing snippet foobar and {SNIPPET_MISSING}.",
      "summary": "Testing snippet foobar and foobar."
    }
  },
  "meta": {}
}

Response with ignoreUnmatched set to false

1
2
3
4
5
6
7
8
9
10
{
  "data": {
    "id": 1,
    "attributes": {
      "title": "Testing snippet foobar and .",
      "summary": "Testing snippet foobar and foobar."
    }
  },
  "meta": {}
}

uppercase

If true, the plugin will apply uppercase formatting to the code value when a snippet is created or updated.

Example

1
2
3
4
5
6
7
8
9
10
// ./config/plugins.js`
'use strict';

module.exports = {
  snippets: {
    config: {
      uppercase: false,
    },
  },
};

📘 User Guide

Creating

While typing the snippet code you will notice the input value is masked to the following conditions:

• Must use only letters, numbers, and underscores.
• Must start with a letter.

Uniqueness is validated upon saving.

Updating

After updating the code value of a snippet, it will be automatically updated across your content so you do not have to revisit every entry to update the snippet code to the new value.

Using snippets in your content

To use snippets in your content, you can type a snippet code wrapped in curly braces {} in string or text fields and it will be replaced with the replacement value when it appears in API response data.

💩 Troubleshooting

In general

Remember to rebuild your app after making changes to some config or other code.

yarn build
# OR
yarn develop

❤️ Support or Donate

If you are enjoying this plugin and feel extra appreciative, you can buy me a beer or 3 🍺🍺🍺.

🚧 Roadmap

• Edit view sidebar button to view and copy/paste snippet codes.
• Reserved snippet codes for things like CURRENT_YEAR.
• Localization support.