Intro to the Plugin Ecosystem
Play video »
Sorry, no results found for "".
Plugin SDK > Introduction to the DatoCMS Plugin SDK
Introduction to the DatoCMS Plugin SDK
Although DatoCMS offers a wide range of features and configurations by default, with plugins it is possible to take a further leap forward. You can integrate third-party services with our platform or build custom integrations tailored specifically to your business and user needs.
What is a DatoCMS Plugin?
Technically speaking, DatoCMS plugins are small web apps that run in a sandboxed <iframe> inside our UI and interact with the main DatoCMS app through the Plugin SDK. They can be implemented with basic HTML and JavaScript, or using more advanced client-side frameworks such as React, Angular or Vue.
Pro tip
If you're using React, you can take advantage of the datocms-react-ui package that provides a set of ready-to-use components that are consistent with the UI of the main DatoCMS application.
What can plugins do?
Pro tip: Example plugins built by the community
Before you build your own plugin, you might want to see if similar functionality is already available in our Community Plugins Marketplace: https://www.datocms.com/marketplace/plugins
A huge variety of enhancements to the DatoCMS web app are possible. From small field editor improvements to deeply-integrated full-page applications, plugins make customizing the DatoCMS interface effortless.
Some common use cases are:
adding custom field editors to improve the editor experience;
managing content versions for running A/B tests on structured content using personalization tools;
tailoring the default entry editor to suit your specific needs;
seamlessly integrating DatoCMS with third-party software and services.
For some real-world examples, you can take a look at our Marketplace, which already offers 100+ open-source plugins.
How plugins work
The way in which plugins modify the default DatoCMS interface is through the concept of hooks.
The SDK provides a set of locations where plugins can intervene by adding functionality (ie. custom pages, sidebar panels, etc.), and for each of these locations a set of hooks are provided.
Hooks serve three main purposes:
Declare the plugin intentions (e.g., "I want to add a tab in the top navigation bar of DatoCMS that points to a custom page X").
Render the content for the
iframeassociated with the declared custom locations (e.g., "when the user enters custom page X, let me render my stuff")Intercept specific events happening on the interface, and execute custom code, or change the way the regular interface behaves.
You can read in detail about all the hooks and locations provided in the following sections of the guide.
Distribution: private vs public plugins
As we'll learn in the following sections, plugins can either be private, or publicly released into the Marketplace.
A private plugin is built by you for your specific organization's needs to optimize your organization's editorial experience. It is fully under your control and not accessible by other organizations.
If you think a plugin you've made would be useful to other community members, then we strongly encourage its release in our public Marketplace. Everyone can contribute new plugins to the marketplace by releasing them as NPM packages.
Learn more about plugins
Check out this tutorial on how to make the most out of the plugins in our Marketplace, or how to build your own:
