--- title: "Uniform + Algolia = A Magical Combination" description: "Uniform's visual canvas editor offers content editors a flexible way to interact with an Algolia search index while it allows developers to connect to Algolia in any way they want. Check out this video to see how magical the combination is." date: "2023-07-20T07:58:31.000Z" url: "https://timbenniks.dev/videos/uniform/015-z_41xoh9w1w" youtube_url: "https://www.youtube.com/watch?v=z_41xOh9W1w" playlist: "uniform" image: "https://i.ytimg.com/vi/z_41xOh9W1w/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "personalization", "content-ops"] --- # Uniform + Algolia = A Magical Combination Uniform's visual canvas editor offers content editors a flexible way to interact with an Algolia search index while it allows developers to connect to Algolia in any way they want. Check out this video to see how magical the combination is. Watch on YouTube: https://www.youtube.com/watch?v=z_41xOh9W1w ## Transcript this is Tim from uniform and in this video I want to show you the awesomeness of how you can connect algolia to uniform and kind of make it work very easily for Content editor but also developers right because uniforms integration with algoli is completely Loosely coupled so developers can kind of choose how to integrate like they can use a Golia instant search and with fewer react or they can actually do it on the SSR level and then for Content editors we have like a superficial way of editing and it's makes things very easy and very powerful and you can see the amazingness of the algolia stuff come out very well in this um so how about I'll take you to an example and then let's have a look all right so this is a platform called turbo tutorials which is a platform I built based on uniform and it has lots of algolia stuff and so this platform actually personalizes for you so when you go to a specific um tutorial it has data like data fetching or nux3 or things like that or complexity and based on all the things that you visit well while you watch these tutorials it will tell algolia to query different things and then show you these so we have personalization baked in on top that's actually very easy to do and so every list that you see on this web page is built with algolia and these ones are basically the perfect match for me and in this case you see they're all data fetching because I just visited the data fetching tutorial and this is basically an algolia facet and this is a list of three from with this facet basically selected in uniform I'll show you that in a second um and then you have like some of the latest ones but we also have different other approaches like for example and when we're in this page here you see similar turbos and this is actually algolia recommend based on the object ID that this item has it matches to other ones so that's also one that we we Implement with but also for example this is algolia instant search which is literally completely done in the front end where the other ones were done on the back end with SSR rendering and so this is completely configurable from uniform and it's actually very easy to content edit like if I didn't want um these selected facets here I can just remove them in uniform and it's it's it feels like it's now very easy to completely content edit everything oh and there's one last one that makes things very fun there's actually a personalization profile based on my behavior on the side you can see there's some interest and complexity levels and then this query also goes to algolia and whatever fits the best according to all my interests is actually showing here so if I actually say Okay I want let me just if I hit reset here so I have no interest you'll see this list update directly right and so now there is no real personalization profile but if I say for example I like media a whole bunch and I update things about media start popping up right and so this is a very interesting way to query algolia based on personalization from an external Source like uniform all right let's actually go into how we built this oh and first this is my index I only have 10 it's very simple and I've set complexity and text to be facet that's it for now easy peasy this will grow and I will be adding extra things and there's of course also a recommend but it's set up in a very simple way so it's just related products and it's trained on the AI all right so this is the uniform interface to actually edit the page and I won't go too deep into uniform here I just kind of want to show the experience a Content editor has so how about let's find the list of tutorials that are based on next three so you can literally just add something here and that's here I have a component called tutorials by facet and that sounds like something I want so here I could say and as you can see I'm typing a title here this is not coming from a CMS because this is kind of design data and the whole idea with uniform is that your design data lives in how you create your page and your domain data like these tutorials live in external systems like algolia or CMS and so here I can say hey let's just make an algolia query well here we go and so you can see in the background it's already started and actually just won three of them and let's do them for next right for next three so there's these three here and there you go and this just worked and it's a relatively simple way and if I actually wanted like um the title if you change it directly update so it's kind of like your um like inline edit this thing basically so what we can also do stuff I've built before that I use on the site let's say there's a two column component right and um let's call it stuff for you and let's give it a light background and so as you can see all that creative related data sits here and so let's say in column A let's because you're new let's assume there's no personalization yet that you actually like just simple components so our simple tutorials simple toots oh there we go and then here we select um you know what let's do five of them and then actually go to complexity because I set that as a facet in my index easy let's show the five easy ones but now it's if you can see that on the left here it kind of goes like this but I want it to be a list well I'll just set a variant of this component in uniform and there is my list and what I can then do let's say on the right side let's add a little Rich text that comes from another source in this case this is prismic and we're keeping it French today um so let's say you are new here and then okay so we add that in like it looks like you're new here but then below that I kind of just want some you know what let's do the tutorials for the best match and um let's do that as a list as well past match and this is actually a component that renders um in the client side and it it changes based on the personalization stuff that you have in your profile based on browsing so now we've actually relatively easily set up something that looks like super mature super rich and it's done with just algolia how about we add one more thing and this is where it gets really fun let's add a Search complete faceted search with um uh algolia instant search oh facet search um here we go so in the sidebar we tend to want like let's say like a search menu and find tags and then here in the hits part let's actually show the search results and so you can already see I'm now building up a faceted search interface in a relatively easy way and so here I don't only want tags but I also want complexity and so now we have these two and kind of what I want a buff is my um current search refinement and what I also want is some statistics maybe I want yeah let's add some statistics here and there you go 10 results found and so this is a really easy way to kind of essay content editor build this stuff up and if you want like these tags above the other ones you can kind of just say you know what let me just move these around and you can just kind of visually see how you can use your argolia and this is um relatively simple to build once you have the SDK in place and of course you have to set up your Integrations like for example I'll just go away from this and here I go to my Integrations and you see I have a few of them but then I had algolia I just set up my repository key my application ID and in my API key for just searching so you can copy paste this because literally my search API key so there's nothing special here but that's all I have to do and then it works and so um later on uniform is integrating with a whole bunch more from algolia including the recommend stuff for example but also things like we give you out of the box components you can put in uniform and then map those in your code and then more and more awesome stuff will happen so that's what I wanted to show you I hope you got excited by the possibilities of using uniform villagolia and feel free to join us on Discord at uniform.2 Discord or reach out to me Tim Bennett's on Twitter and we'll figure it out I'm happy to show you a proper demo and ask answer all your questions anyways that's it cheers and I'll see you soon bye