Blog Setup the Typsesense plugin with Typesense Cloud

This plugin is the ultimate search engine plugin for your website

What will be discussed in this blogpost?

In this guide, we will provide you with a step-by-step process to set up the Typesense plugin within your Craft CMS installation. To help you visualise how it works, we will be using our Craft Typesense demo. For demo content, we’re using a random selection of schools in the United Kingdom. 

The Typesense plugin is available in the plugin store under percipiolondon/craft-typesense‘. If you need additional information, you can refer to our documentation or reach out to us on GitHub.

If you have further questions, feel free to join the Craft Discord community and tag Stef with ‘@cookie10codes‘.

Screenshot 2023 04 07 at 10 45 54

How connect Craft CMS with Typesense Cloud

We will use the Typesense Cloud as an example as it’s nice and straight forward, however you can self host Typesense to remove your billing costs.

More information on the setup can be found in our docs.

Setup the Typsesense plugin with Typesense Cloud

Generate API keys

Once you have logged into Typesense Cloud with your Git account, hit the Generate API key button to receive your API key and search only API key.

This API key will be used within the backend to sync / flush the documents. The search only is the key you will use on your frontend application, this can only read from your Typesense Cloud cluster.

Setup the Typsesense plugin with Typesense Cloud

Environment variables

We are using environment variables to setup our connection. The cluster will be “;” separated.

Setup the Typsesense plugin with Typesense Cloud


Connect the environment variables directly into the settings.

Make sure to select Cluster as Typesense Server Type.

We use this approach for security to now share the API keys and you can easily change connections from environment as well. If you would have another Typesense cluster for production for example.

Connect your entries to Typesense Cloud

Create a typesense.php‘ config file in your cms/​config‘ folder. This file returns an array with collections inside. Using our schools demo as an example, these are the fields that are synced to Typesense.


After this setup, you should see your collection listed when you navigate to Typesense > Collections in the control panel.

Run the sync command to sync all of your entries from that section to your Typsense server. You can check the Typesense Cloud to see all the entries in place.

Screenshot 2023 04 07 at 11 10 18
Screenshot 2023 04 07 at 11 18 11

Connecting to Typesense through javascript

For the connection we’re using Typesense javascript package to setup our client. This will connect through the search only API key to fetch the data from your index.

In the example below, we’re filtering our schools onto the local authority of Birmingham.