Penpot CMS plugin

Contribution
1

Hello,
I have an idea for a content management system plugin and thought I would share it on the forum, to see what you think about it.

With the plugin, you can take a batch of data (e.g. a spreadsheet export) and apply it to and reuse it in your design. For example, from a single template “component”, generate and showcase a button with different content options (label length, language), reuse blog post content on different components (index, post, excerpt, short list etc.), or create different versions of a promo graphic.

It’s not an attempt to turn Penpot into a website builder, but to make content reusable and quick and easy to manage, solo or within a team.

Below is a video of a small PoC, presenting:

  • :brick: batch item creation based on a data set and a template element,
  • ↔️ two-way editing,
  • :label: layer name based content pairing - the project file works without the plugin. I’m yet to test variants, but suspect it will be a great use case.

7 Likes
2

Very cool! I think marketing teams would really appreciate a plugin like this.

2 Likes
3

That’s a cool initiative to create campaign at scale!
May Penpot be a tool for creating marketing assets :laughing:

1 Like
4

Really cool. Even something as simple as this demo would make the content migration I’m currently working on much much smoother.

Looking forward to seeing more!

3 Likes
5

@LauraKalbag @a-ng-d Thank you. You are right, it could be a great tool for creating sets of marketing materials.

@hey-carlos Thank you. Content migration sounds like a great use case. I will make sure to post updates.

1 Like
6

This sounds like a really useful idea! Making content reusable and easier to manage could save a lot of time, especially for teams working on multiple variations. Excited to see how it develops.

1 Like
7

I worked on the prototype a bit more and am happy to share new findings and a demo you can run yourselves.

Features and findings

  • :package: The item template works with components.
  • :cross_mark: Added item deletion. Same as addition, it is reflected in the project.
  • :label: Added dynamic property names. In the prototype, they have to be unique, but I don’t expect this limitation to be present in the plugin proper. The name change is not automatically reflected in the Penpot element, but it could be.

Demo

If you would like to try the plugin out, you can install a development preview from:

https://penpotcmspreview.authormore.com/manifest.json

:warning: It is a development preview and has everything that comes with such a build, like bugs, unhandled edge cases, inconsistent mechanics, and so on.

Feedback is very much welcome. Especially, I would appreciate your thoughts on how far automated the synchronisation should be - that’s changes in the sheet reflected in the project.

8

I’m not getting anything happening when I use the “select template shape” button. Am I doing something wrong?

9

Thank you for checking it out and sorry the mechanics are unclear. I will make sure to fix that in the plugin.

If you click the “Select template shape" button and then a template’s layer (in the Penpot’s canvas or layer tree), it should produce new elements with content from the table - matching a column and a layer based on their names.

Here is a demo file, with a project structure that matches the default table:
penpot-cms-demo.penpot (33.2 KB)
In this case, clicking “Select template shape” and then “TitleTemplate” or “TitleTemplateComponent” should generate new items.