Back to integrations

Integrate TipTap with Strapi

Integrate TipTap with Strapi

tweet selection
TipTap and Strapi Integration.png

    These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

    Why Use TipTap?

    TipTap is an open-source framework that lets you craft highly customizable rich text editors. Built on ProseMirror, it offers a modular architecture ready to adapt to whatever you're working on. Whether it's a real-time chat interface or a note-taking app reminiscent of Notion, TipTap molds to your needs without boxing you into a rigid setup.

    TipTap is a popular choice among developers for its user-friendly interface and robust features. Real-time collaboration is a standout feature, making group editing smooth and synchronized for teams. For instance, you can build a collaborative text editor using Vue.js for the front-end interface and Strapi for the backend API. To enable real-time editing among users, integrate a real-time communication tool like Socket.IO or Pusher. Plus, its robust plugin system lets you add new tools quickly. It's compatible with popular frameworks like Vue.js, and when paired with Strapi, you get a powerful combination for content management.

    If you want to dig deeper, the official documentation at TipTap.dev provides a solid reference.

    Why Use Strapi?

    Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

    Explore the Strapi documentation for more details.

    Strapi 5 Highlights

    The out-of-the-box Strapi features allow you to get up and running in no time: 1. Single types: Create one-off pages that have a unique content structure. 2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration. 3. 100% TypeScript Support: Enjoy type safety & easy maintainability 4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs. 5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others. 6. Editor interface: The editor allows you to pull in dynamic blocks of content. 7. Authentication: Secure and authorize access to your API with JWT or providers. 8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications. 9. i18n: Manage content in multiple languages. Easily query the different locales through the API. 10. Plugins: Customize and extend Strapi using plugins.

    Learn more about Strapi 5 feature.

    See Strapi in action with an interactive demo

    Explore Strapi in an instant, hands-on demo set up just for you.

    Setup Strapi 5 Headless CMS

    We are going to start by setting up our Strapi 5 project with the following command:

    🖐️ Note: make sure that you have created a new directory for your project.

    You can find the full documentation for Strapi 5 here.

    Install Strapi

    npx create-strapi-app@latest server

    You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

     Strapi   v5.6.0 🚀 Let's create your new project

 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. 
  Login/Sign up 
❯ Skip

    After that, you will be asked how you would like to set up your project. We will choose the following options:

    ? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

    Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

    cd server
npm run develop

    You will be greeted with the Admin Create Account screen.

    003-strapi-5.png

    Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

    Once you have created your user, you will be redirected to the Strapi Dashboard screen.

    004-strapi-5.png

    Publish Article Entries

    Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

    005-strapi-5.png

    Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

    Strapi Articles Published

    Enable API Access

    Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

    You should have find and findOne selected. If not, go ahead and select them.

    007-strapi-5.png

    Test API

    Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

    008-strapi-5.png

    🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

    So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

    vuejs strapi integration - api request.png

    Getting Started With TipTap

    Getting TipTap up and running with Strapi is pretty straightforward. When you integrate TipTap with Strapi, you'll prepare your Strapi environment, install the necessary TipTap packages, and set up some basic code to handle data flow. For more tips on integrating Strapi with other tools, check out Strapi integration best practices.

    Installing TipTap and Adjusting Settings

    Next up, install TipTap:

    1npm install @tiptap/core @tiptap/starter-kit

    Don't forget to check out the TipTap website for additional extensions—like mentions, tables, or placeholders—to match your project requirements. To enhance user experience in the Strapi admin panel, you can create a guided tour plugin using the reactour package. This plugin assists users in navigating new features. For detailed instructions, refer to this tutorial on Strapi's blog.

    Implementing the Code

    Tiptap is framework-agnostic and can be integrated with technologies such as JavaScript, React, Next, Vue 3, Vue 2, Nuxt, Svelte, Alpine.js, PHP, CDN.

    See the guide on how to install the editor here.

    Now, create a React component to integrate TipTap with Strapi:

    1import React from 'react';
2import { useEditor, EditorContent } from '@tiptap/react';
3import StarterKit from '@tiptap/starter-kit';
4
5const TiptapEditor = () => {
6  const editor = useEditor({
7    extensions: [
8      StarterKit,
9      // Add additional extensions as needed
10    ],
11    content: '<p>Start typing here...</p>',
12  });
13
14  return <EditorContent editor={editor} />;
15};
16
17export default TiptapEditor;

    To fetch and display data from Strapi using the API endpoint http://localhost:1337/blog-posts with TipTap, use the following approach:

    1fetch('http://localhost:1337/blog-posts')
2  .then(response => response.json())
3  .then(data => {
4    editor.commands.setContent(data.content);
5  })
6  .catch(error => console.error('Error fetching data:', error));

    Ensure that the data structure returned from Strapi is compatible with what TipTap requires. Adjust the data as necessary before using editor.commands.setContent.

    Strapi supports both REST and GraphQL APIs, and you can leverage REST and GraphQL integration to enhance data fetching capabilities in your application. Additionally, you may want to enable image upload to Strapi via the REST API to manage media content within your editor.

    You'll also want to implement a save feature to send updated content back to Strapi:

    1const saveContent = async () => {
2  const content = editor.getHTML();
3
4  await fetch('http://localhost:1337/blog-posts', {
5    method: 'POST',
6    headers: {
7      'Content-Type': 'application/json',
8    },
9    body: JSON.stringify({
10      data: {
11        content: content,
12        title: 'New Post',
13        // other fields
14      },
15    }),
16  });
17};

    For automated tasks like scheduling content updates, consider using Strapi Cron jobs to handle backend processes efficiently. If you're looking to enhance your integration further, consider building a custom Astro loader with Strapi 5. This approach efficiently fetches and displays Strapi content in your Astro project using the Content Layer API, offering a seamless development experience.

    For more advanced configurations, the resources at TipTap.dev are a great place to explore.

    A final word: TipTap's customizable nature combined with Strapi's solid content management provides an editorial CMS solution that can open the door to everything from real-time editorial workflows to robust publishing systems. Once your integration is complete and you're ready to deploy, platforms like Vercel make it easy to host your front end. You can deploy to Vercel for a seamless deployment experience. If a flexible, powerful editor sounds appealing, try integrating TipTap with Strapi and see how it fits into your stack.

    Awesome, great job!

    Strapi Open Office Hours

    If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

    For more details, visit the Strapi documentation and TipTap documentation.

    tweet selection