Contentstack Demonstrates 295% ROI as Part of New Go Composable Initiative295% ROI with ContentstackRead more
Back to Blogs

Introducing JSON Rich Text Editor Plugins for Dynamic Content Experiences

Jan 10, 2022 | Janice Rodrigues

Share on:

Contentstack constantly strives to improve its user experience so you can manage your content easily and seamlessly. With that goal in mind, we recently introduced the JSON Rich Text Editor that enables structured, rich text content ready to be consumed by any frontend framework.

To further enhance the business user experience, Contentstack now introduces JSON RTE Plugins that let you extend the functionality of the JSON Rich Text Editor to serve your unique business needs while providing a native Contentstack look and feel.

JSON RTE Plugins – What are they?

JSON Rich Text Editor Plugins let you customize, improve and extend the functionality of your JSON RTE. You can add prebuilt plugins available in Contentstack or create custom plugins of your own to integrate with third-party applications.

With a JSON RTE you can create a plugin to extend the functionality of the JSON rich text editor (eg social, word count, highlights)

Traditionally, you would need a custom field to set up the logic to interact with rich text content. With these plugins, you can directly deploy logic inside the JSON RTEs, allowing content managers to get more from their content.

What Prebuilt Plugins Does Contentstack Provide?

Contentstack provides these prebuilt plugins to enhance your rich text editing experience:

  • Highlight - Allows you to highlight parts of your content, such as a line of text or a paragraph.

The Highlight plugin is available as a prebuilt plugin that you can use instantly

  • InfoPanel - Allows you to place important content inside a colored panel to make it stand out.

The About Info Panel Plugin allows you to place important JSON rich text editor content inside a colored panel to make it stand out

  • Word Count - Allows you to track the word count for your JSON Rich Text Editor content.

The Word Count plugin is available as a prebuilt plugin. Log in to your Contentstack account, add it to your stack and start using it

After adding the plugins you need, provide the necessary configuration details.

Besides the prebuilt plugins, you can also create customized JSON RTE plugins of your own, host them externally and provide the URL when configuring your plugin in Contentstack.

What Are the Use Cases of JSON RTE Plugins?

You can leverage JSON RTE Plugins for a variety of use cases:

  • For market segregation: Make content sections visible only to targeted regions and markets.
  • For content testing: Test specific paragraphs, sentences or words within the rich text editor to optimize without content duplication using an A/B or MVT testing tool such as Optimizely.
  • For personalized experiences: Integrate with third-party personalization engines to adjust the tone of voice or inline content representation depending on the consumer persona.
  • For associated content creation: Leverage your content and assets in third-party repositories, such as Digital Asset Management, in line with the rich text editor.
  • For design-centric formatting rules: Include styling and layout rules in a format-neutral way.
  • For content variables: Create variables representing product or brand names and reuse them across different sections of the rich text content, thus avoiding content duplication.

How to Get Started with JSON RTE Plugins

Once you have added a prebuilt plugin or created one of your own in your stack, you can use it for any JSON Rich Text Editor field in your content type.

For example, follow these steps to use the Highlight plugin in a content type:

  1. Go to your stack, type “C” to open the Content Types list page and select the content type you want to edit.
  2. In the “Content Type Builder” page, click on an existing JSON RTE field or add a JSON Rich Text Editor field in your content type by clicking on the “Insert a field” (+) sign.
  3. Under Select Plugin(s), select the Highlight plugin from the pop-up window that appears.
  4. Under Select Plugins, select Highlight plugin from the pop-up window, then click

  5. Once done, click on either Save or Save and Close to save your changes.
  6. To use the Highlight plugin, create an entry for this content type, and you will see this plugin within the JSON Rich Text Editor on your entry page as shown below:

To use the highlight plugin create an entry for this content type and you will see an

Do More with JSON RTE Plugins

JSON RTE Plugins is a plan-based feature that is only available in the new Contentstack interface.

With such customized plugins, the possibilities to extend the capabilities of your rich text editor are limitless. Read our documentation on JSON Rich Text Editor Plugins to get started with this feature.

Share on:

Recommended posts

May 24, 2022

Introducing Automation Hub for Speed, Flexibility and Scalability

In the last decade, we’ve seen three things separate thriving enterprises from the rest of the pack:SpeedFlexibilityScalability for the futureThey’re the reason why the adoption of composable architecture (or stacks) has soared to an early majority state in the last couple of years. Dawn Foods is a prime example. When they integrated their CMS with their product catalog, one-click order platform and online payment portal, online orders increased by 50%. They also successfully launched six major products within six months of implementation. The composable approach gave them the flexibility and scalability needed to grow the business. Analysts are convinced. Gartner® predicted that “by 2023, organizations that adopt an intelligent, composable approach will outpace their competition by 80% when it comes to the speed of new feature implementation.” Many enterprises recognize that composable architectures with best-of-breed technologies are the way forward. But moving away from monolithic legacy systems to a world of choice isn’t exactly easy. The average marketing organization has deployed 91 different tools across its stack, and the process of integrating them introduces a host of technical and operational challenges. You might have the best stack in the world, but if all the technologies don't communicate and interact with each other, what are you left with? Fragmentation—and a lot of time and frustration spent dealing with it. That’s why we’re launching our industry-first Automation Hub and Connect Without Compromise™ program: to simplify the process of creating composable experiences for organizations. There are three ways this program makes integration fast, easy and seamless. Launching Today: Automation Hub to Overcome Integration Hell While leveraging best-of-breed technologies is the only way to stay competitive, enterprises often find themselves bogged down in what we call “integration hell.” Imagine opening one application to make a change, only to have to open another application to update the data there too, and then another to close the gap there… and APIs only help so much. The solution typically involves writing complex code that is often slow, brittle and requires constant maintenance—not much of a solution. But what if you could enable all these applications to perform tasks automatically with low code – even no code – all within a centralized location? That’s the goal of Automation Hub. Users are no longer forced to weave in and out of applications and manually perform several sub-tasks to accomplish the overall activity. Instead, they can build the flow visually inside Automation Hub, and those sub-tasks complete automatically. As organizations continue to adopt technologies, Automation Hub saves time across the board by automating and streamlining the hundreds of activities that happen across stacks several times every month. It also improves governance by knowing what each step is and how it executes every time — and that’s where the real value lies. Integrate the Tried-and-true Functionality Your Organization Needs with Marketplace Another component of Connect without Compromise™ is Marketplace, a one-stop library of applications to incorporate the functionality you need into your stack. Choose from a wide selection of partner-developed, customer-developed and Contentstack-native applications and quickly integrate them with just a few clicks. The Developer Hub inside Marketplace gives developers a tool to package apps, iterate new versions and set up authentication and security measures. The Venus Component Library ensures the application looks and feels native to your stack and supplies reusable front-end components to speed development along. And if you’re looking to understand what integrations you’re using and where they’re incorporated, Marketplace provides an audit log. Even if you’re unsure what the next step in your composable journey is, the entire library is available to browse. See what other partner or customer organizations have integrated into their stacks and adopt what your organization needs. Building your stack on our extensible app framework ensures that as your organization grows, the tools you need to carry out operations will scale with it. Easy Access to Expertise with Blueprints What if you have never worked with a headless provider or need extra help with implementation? This is where Blueprints comes in. Blueprints is our library of best practices, expert guides and use cases for creating composable experiences. See what others have done before, learn how they accomplished it and what to avoid. Whether or not you’ve worked with composable architecture before, we’ve made it easier for anyone to create as if you have. Connect Without Compromise™ eliminates obstacles so businesses can embrace composable architectures with confidence. Speed, flexibility and scalability for the future are not only within reach, but easier to achieve than ever before. With our foundation, framework and support, businesses will be able to get their composable experiences up and running and create at the speed of their imagination. Now that we’ve made it so much easier, the question is: what will you create Automation Hub BETA will be available in late Summer 2022.

May 23, 2022

Build, Integrate, and Publish Apps With the Developer Hub

Contentstack is excited to introduce Developer Hub, a powerful platform that allows you to build apps, create integrations for your specific business needs and publish them on Marketplace.The Developer Hub (in Open Beta) is an app development platform that comes with Apps APIs, SDK and other tools to help you build apps with ease. Using these tools, you can develop private apps (only for your organization) and public apps (listed in the Public Marketplace for any Contentstack customers to use) such as third-party integrations, Contentstack apps and more.Developer Hub: The Power to BuildIf you are a developer, Developer Hub lets you build apps to extend the core functionalities of Contentstack and use them in your organizations or stacks. These apps can be extensions or integration solutions (packaged as apps), with any UI location of your choice. You can decide where these apps are rendered — as a field, sidebar widget, dashboard widget, RTE plugin or other location.We have created a comprehensive guide to help you get started with building apps. We have also included tutorials for sample apps that can get you up to speed immediately.If the Marketplace apps sound similar to extensions, it’s because they are. Apps are the future of integrating and implementing third-party solutions within your CMS. Compared to extensions, apps offer advanced functionalities as they extend all the features of your current extensions and more to provide seamless integration with your favorite third-party platforms.You can learn more about how Marketplace apps are different from extensions, which one will suit your requirements and how to convert your existing extensions into apps.How Can You Start Creating an App With Developer Hub?Note: If you do not see Developer Hub in your organization, kindly contact our Support Team,To start creating an app with Developer Hub, you need to perform the following steps:Download and use our boilerplate that will set up your project from scratch using the App SDK.Install Node version 12 in the app drive.Next, log in to your Contentstack account and click on the “Developer Hub” icon that you see on the left navigation panel.You'll see the Developer Hub landing page where you can start setting up your app. Configure the OAuth, UI locations and Webhooks.Once set up, install the app in your organization or stack according to your setup.Now, update the boilerplate code to suit your application’s needs and test it out.For more information on how to create and manage your apps, see our extensive Developer Hub guide.Contentstack Marketplace and Developer Hub: The Dual AdvantageContentstack Marketplace is a platform that allows you to connect apps and other services and make them work for you quickly and efficiently. These applications are easy to install and have all the resources you need for every step of the development process.Currently, Algolia, BigCommerce, Shopify, and Cloudinary are among the top integration apps that you will find in Contentstack Marketplace, with more to come soon.With Contentstack Developer Hub, you get the ability to create your own apps, and with the right approvals, you can even get them listed in Contentstack Marketplace so others can install and use them.For more information about this, refer to our App Submission and Approval Guidelines.What’s next?We will continue to improve user experiences with Developer Hub in upcoming releases. Also, we will provide app hosting abilities where users can upload their app code directly into Contentstack without having to rely on external third-party apps. We also plan to add more locations where these apps can be placed. Stay tuned!

May 23, 2022

Introducing Contentstack Marketplace: Explore, Build, Integrate

There is no one-size-fits-all solution to your content and digital experience management needs. Most enterprises today know that a monolithic or suite solution is no longer the answer. A best-of-breed system allows you to choose the tools you want for a modern technology stack that fits your unique business needs.A content experience platform like Contentstack gives you a perfect platform to tailor your content for an omnichannel world. It is easy to create content, extend its user interface, and integrate third-party apps you need to deliver a complete digital experience to your customers.And now, with the all-new Marketplace, it’s easier than ever. All your favorite apps are in one place, just a click away.Enter Contentstack MarketplaceThe new Contentstack Marketplace is a one-stop solution for all your integration needs. It houses pre-built apps, starters, guides and everything else you need to build a fully tailored digital experience stack.With the launch of Contentstack Marketplace, you can rely on our best-of-breed philosophy to create the platform that works the best for your brand, with features, services, apps, integrations and accelerators from the industry's leading technology and service providers.Marketplace allows you to connect apps and other services and make them work for you quickly and efficiently. Here, you'll find all the tools to help you with every step of your development process. You can find and install pre-built extensions, leverage high-quality applications and build integrations that will solve specific needs for your business.Here’s a quick video to get you acquainted with the Contentstack Marketplace!You can start using the apps right away with no new accounts or requirements. Installing these applications is quick and easy. Check out our comprehensive Marketplace guides for more details.Introducing Best-in-Class AppsOur marketplace has an exclusive range of apps listed based on various categories, including A/B Testing, Analytics, Commerce, DAM, Personalization and Translation. Popular SaaS applications such as Algolia, BigCommerce, Shopify, and Cloudinary are already among the integrated apps in the Contentstack Marketplace today, and with more on the way, the number is growing even as you read this!Here’s a glimpse of the top apps that you can work with.It’s easy to find and install apps with our user-friendly interface. Browse through the categories or use filters to quickly find the apps you need.Custom fields, sidebar and dashboard extensions and other integrations will make it easier than ever for your team to collaborate and create.If you are unable to find the app you need, you can send us a request specifying what you're looking for.How Can You Start Working With Marketplace?To access the Contentstack Marketplace, log in to your Contentstack account and navigate to Marketplace using the main left navigation.Under “Explore,” you can see Apps (which are third-party applications), Starters (which are starter-level apps based on significant technologies) and Guides (which offer step-by-step tutorials to help you create specific Integrations use cases).Clicking on each section, you will find “Filters” that help you quickly locate one of the many apps you can connect with.Installing each app listed in the Marketplace leads you through a series of steps to install the app in your desired location. To get them installed for your organization, simply follow the prompts.Note: If you do not see Marketplace in your Organization, kindly contact our Support Team,Build Apps for MarketplaceWhile Contentstack offers many pre-built apps you can start with, you are not limited to that list. You can build apps for your own needs and publish those to the Marketplace as private (visible only to your team) or public (visible to all Contentstack users) apps. Here are some marketplace apps to get you started with.Learn more about building apps for Marketplace.What’s Next?This is just the beginning. We are constantly in the process of adding new apps to the marketplace so all our users can find an app for any use case, workflow, or requirement.In the coming weeks, you’ll be able to access many more custom solutions and extensions.

May 20, 2022

Introducing Asset Sidebar Extension and Additional Metadata Support

We are excited to introduce two of our latest features: Asset Sidebar Extension and Additional Metadata Support for entries and assets. Asset Sidebar Extension is a new type of Experience Extension. It lets developers create sidebar widgets to add capabilities or custom functionalities for editors to manage, transform and optimize stack assets. Additional Metadata Support lets developers add metadata to assets and entries (via API) without incrementing their versions. This helps better organize or categorize assets and aids easy search. Let’s look at the details of these two exciting features.Meet the Newest Member of the Experience Extension Family: Asset Sidebar Extension If you have been using Contentstack’s Experience Extensions, you already know the power of extensions and the value they can add to your content management experience. With the all-new Asset Sidebar Extension, you can create custom widgets that dramatically enhance the way your content editors manage assets. You can, for example, create widgets for cropping images, adding filters or converting assets into other formats. You can also add auto image tagging, audio to text, quality enhancer, file compression and finding similar images. The possibilities are endless. You can even choose to integrate with third-party applications to create custom widgets. Here is an example of the Asset Sidebar Extension: With few design limitations in the extension creation process, you can develop robust extensions for your growing business needs.Why Should You Use Asset Sidebar Extension? It can make asset management a lot easier for your content managers. That’s not all, let's look at some of the other valuable benefits you gain with this extension:Optimize your assets within a single application thus increasing productivityImprove front-end delivery and performance with underlying API-driven optimizationTailor your business experience to meet unique requirements using Contentstack as a medium, with the help of custom asset extensionsAccelerate utilization of media files in the native Contentstack repositoryAutomate mundane tasksRead our documentation to get started with Asset Sidebar Extensions.Manage Entries And Assets Better with Additional Metadata Support Metadata, as you might already know, is the data that gives more information about other data, but not about the content of the data. When you create a new entry or upload an asset, Contentstack adds some basic metadata by default, such as:created bycreated atfile sizelast modifiedcontent type referenced inBut as your content needs grow, you may want to add custom metadata to manage your content effectively. To that end, we have added support for custom metadata for your assets and entries. As of now, this can be done only via API (not through the UI), using the Metadata Content Management API requests. Examples of custom, additional metadata that you can add include:entry type (parent entry or referenced entry) orasset type (image, video, audio clip, or document)owner details for an entry or assetcopyrights for an image or documentgeneric SEO tagsrelated articlescustom tags or labelsWhy Add Additional Metadata and What Should You Consider While Adding Metadata? There is a fine line between having enough or too much metadata. Entries and assets become versatile and much easier to access and manage with additional metadata support. The absence of metadata defeats the purpose of the digital asset management system and makes it challenging to find content. However, if you give away way too much meta information about your digital content, it may allow harmful access to external users and lead to copyright infringements. So, add enough metadata to fulfill your business requirements, but make sure it isn't too extensive. Read more about Additional Metadata Support for entries and assets in our documentation. Note: These plan-based features are only available in the new Contentstack interface.

Mar 14, 2022

Contentstack Branches Empower Business and Development Teams to Innovate in Tandem

In 2022, the name of the game when it comes to enterprise success is innovation. Not only did an impressive 95% of people say they changed their lives in a permanent way over the last year—an equally remarkable 88% now expect brands to change and innovate in a similar way, specifically when it comes to their digital initiatives. It has never been more important to experiment with and release innovative new online experiences. And, ​​with Contentstack Branches, it has never been easier or faster to do confidently. Innovation's New Safe Place: Contentstack Branches Similar to Git’s branching methodology with which many developers are familiar, Contentstack Branches enables developers to create branches, or “versions,” of code and content. These separate branches both accelerate and remove risk from the innovation process by creating safe spaces where your business can build out “experience variations” without worrying about breaking the functionality you already have in place. What makes our Branches feature so unique is that Contentstack is the only headless content management system (CMS) where businesses can work with branches in production environments. Unlike other CMSs that only support experimentation in development and QA environments, with Contentstack Branches you can build and test each experience variation on key segments of your audience to make sure it’s perfected before being rolled out to your entire customer base. This is how Contentstack Branches empowers even the biggest enterprises to employ cross-functional growth-hacking methodologies that will accelerate development and increase the returns from your innovative digital initiatives. How Your Business Can Use Contentstack Branches There are many ways that Branches can be applied across the enterprise business, including: One of the most important benefits of Contentstack Branches is that it enables businesses to test — including A/B test — the effectiveness of innovative new changes quickly and on small audience segments before committing to rolling them out on a large scale. In addition to user testing, with Contentstack Branches, innovative new developments can be “QA’d” (Quality Assurance tested) in a realistic environment to make sure they’re in tip-top functional shape.The Contentstack Branches functionality allows for different teams to innovate on dedicated aspects of the experience in tandem, with none “overlapping” in a way that affects each other’s projects — or the live experience.Branches doesn’t just support developers. It also supports key Contentstack functionality like roles and workflows so business teams and technical teams can collaborate on the same playing field.For situations where you’re launching a large update or managing multiple brands, Contentstack Branches allows businesses to run development teams in parallel to accelerate delivery without taking any rushed shortcuts. Branches makes it easy for development teams to enact continuous integration and continuous delivery (CI/CD), a modern best practice in the IT world. Whether you’re rolling out cutting-edge innovations or just keeping up with changing world events, Contentstack Branches enables robust new campaigns to be designed, developed, and launched quickly. And these campaigns can just as easily live on permanently or be rolled back as needed. Current customers will be able to save incalculable effort by replacing a large number of their stacks with Contentstack Branches, which can be easier to sync, faster to spin up, and help take the load off your system.See for Yourself How Contentstack Can Empower Innovation Across Your Whole Business At Contentstack, we continue to invest equally in both business and technology stakeholders. And it’s because of this uniquely close and thoughtful relationship with our customers that we uncovered a need that most modern enterprises have—the need for a feature-rich CMS that doesn’t just support developers, but also empowers the entire business to collaborate on digital innovation. Are you ready to differentiate your brand, enable powerful cross-departmental collaboration, and remove risk from your digital operations all with a single platform? Get in touch with our team today or schedule a free demo to “Next Your CMS” and take advantage of our innovative Contenstack Branches feature.