Can you add an entirely custom field type to Strapi?

Questions and Answers
1

Hello Strapi Team & Community,

I’m working on a CMS based in Strapi and am toying around with different solutions to a problem. I came across a guide on the Strapi docs about registering a new custom field type (https://strapi.io/documentation/developer-docs/latest/guides/registering-a-field-in-admin.html#introduction) however this only explains how to extend or replace a field type, in this case, the richtext field type with the CKEditor.

Is there a path in Strapi currently (I know things are in the works for v4) to add custom field types to Strapi without replacing? You can register a field, but can you register a unique, custom field alongside the current set of field types?

2

Technically yes, but it’s somewhat of a hacky method right now until we support it natively (and we plan to in the future)

The best example of this would be a community guide on a color picker:

There is also a community package that did it as well: GitHub - strapi/awesome-strapi: A curated list of awesome things related to Strapi

The two key “gotchas” to this:

  • the columnType referenced here is the database column type, meaning this guide was written on a MySQL/MariaDB database, as PostgreSQL doesn’t have longtext (I think it’s just text)
  • You cannot use the content-type builder on a model with custom fields it will throw an error as the CTB doesn’t understand the field and it will get deleted or just throw an error if you try to modify the model with a custom field.
1 Like
3

Here is the roadmap entry for custom fields: Custom fields - Roadmap | Product Roadmap

4

The above example does not work with Strapi v4!!!

I have successfully modified Strapi v4 source code (just 1 line of code) to make custom field renderer works with plugin. And it won’t interfere with Content-Type-Builder try to save.

I am making a youtube video and will share the link soon.

2 Likes
8

I have made the video about “Strapi v4 Custom Field Type Renderer” as promised. Here is the link https://youtu.be/3of3s_xhEnE

4 Likes
9

Great job, i guess i was close, i just checked the inputs component :slight_smile: thx for your video.