--- title: "The Uniform Content Editing Workflow" description: "In this video Tims shows how to compose pages using multiple sources with Uniform Canvas. In composed architectures data comes in from many different places and while developers love this, content editors tend to struggle." date: "2023-07-20T07:59:23.000Z" url: "https://timbenniks.dev/videos/uniform/024-4xykmrzo8ha" youtube_url: "https://www.youtube.com/watch?v=4XyKmRzO8HA" playlist: "uniform" image: "https://i.ytimg.com/vi/4XyKmRzO8HA/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "content-ops", "frontend"] --- # The Uniform Content Editing Workflow In this video Tims shows how to compose pages using multiple sources with Uniform Canvas. In composed architectures data comes in from many different places and while developers love this, content editors tend to struggle. Watch on YouTube: https://www.youtube.com/watch?v=4XyKmRzO8HA ## Transcript this is tim from uniform and in this video i want to show you the content editing flow that we have in uniform and this is important to show you because it's probably a little bit different than what you're used to from the past few years because back in the day even up until now lots of cmss or systems are all in one they're monolithical which means your front-end and how you compose things and how you get data in is all in the cms but nowadays when you actually go to a composed architecture or maybe mac alliance type technology you're using a lot more different sources with best of breed abilities to actually build your website and so as a content editor you're no longer composing a whole page in your cms your cms is now actually much more simplified it only has your domain data and in my case for my website it's videos conference talks blog posts some heroes about me and some rich text but that's it there's no connections in it so i don't go in my case to contentful and build my whole page because i also have images coming from another place i have products coming from another place i have blog posts actually also coming from prismic so how do i then deal with all of that while still having a cohesive experience to actually content edit well that's what uniform does so i'll just show you now so let's go to the screen and let's have a look so you're now at the compositions part of uniform and everything you see here is completely configured and so uniform does not host or own any of the data it's only pointing to it so it's truly composing it's not actually content editing so let's have a look so let's make a new composition of my personal website and then let's open the preview and then just let's do that together so let's call this a test page why not we are doing a demo there we go and so now i just created a test composition and as you can see here the slug has a little alert because we actually have to fill it out and that's the case because i configured it that way a composition doesn't have to be a page it can also live somewhere as just a block on your site in this case it's actually a page so let's call it test because that's what i started with and so in this on the page itself i called this page i actually added a parameter that is a contentful entry because what i think is easy for me is to add my og tags and my page metadata and my description and my image and stuff for like sharing on facebook and twitter to do that in the cms so in this case i have a page meta type in contentful so let's just select one that i already have and run with that and so now what we've done is we've actually added a contentful item connected to this page here and so if you can see the rest of this page there's actually header and there's components and these are slots that i've configured and these slots are like placeholders four components and there's some governance around which component can i put in which slot so you can kind of control how people work with your system let's add a empty header component and as you can see there's also a header pattern we'll talk about patterns in a sec first i just add the header and the header itself has a slot for navigation items but i'm not going to add these because that's what the pattern will do for us in a sec so then we have components and in my case this is just a big bucket where everything can go in so when i now click here you can see there's lots of components we can add and for this page let's start with the heroes like a big image with a bit of text so this hero here has a variant an entry and a cloudinary entry and so this variant i can say okay it's a no image hero or it's a default with image and that i configured and so you're kind of separating the concerns because the variant shouldn't be in your cms because it's just data your cms should have nothing to do with how a piece of content looks on your page it's just the content because maybe tomorrow you want to build a tv application or you want to put it on a huge billboard that's electronic at the train station it doesn't care about that variant there it's just the data and your front end or your endpoint chooses how that looks right or your channel and so in this case i want with image and i could select one but we can also just add a new one and that kind of shows you the workflow right so you're in uniform you need a header or a hero let's make one so now we're going to in going to go into contentful and actually make a hero and so chapel is kind of a fancy french title for us a title on the top chapo is also hat so let's call it hi so let's keep it simple i don't need a description and i do want to show my social icons let's publish and so now when i go back you actually see that uniform already fetched that data and updated the timbernix hero and we made that just now but my images actually come from cloudenary so let's go to cloudanary and actually select the image that i want so let's have a second for this to load and if you have any sort of system yourself you can actually make one of these integrations and just plug them in and so i know this image i've used that before so that's why i was in my search um let's insert this and now so what we've done is actually we added a empty header we made a new hero component and we added an image and it's the default variant so let's save and now let's actually preview what we've done because it's kind of um you know you don't see what you're doing when you're just clicking things around and so literally just we created this like hi tim bennex my website is fun with the icons and so let's put this side by side so we can have a look um what happens when we start changing things actually this might not be the right hero so i can just say unlink and then select my speaking hero hit save and there it is conference speaking or maybe i want another one let's do this one and hit save and this is my about and so you have kind of have like a couple of different options that you can choose from um as you can see my naming wasn't the best but anyways there you go this is my hero component um let's add something more so after this let's add video highlights because i like to make videos so why not put them on the screen and so this is actually a pretty interesting approach here because video highlights will show you one big video and two small ones but the fact that i show you one big one and two small ones that i choose here has nothing to do with what happens in the cms the cms just owns videos done youtube id image text title that's it it doesn't actually know how it's composed that's what you do in uniform so here let's say i want a dark background i want it to be video highlights oops yeah and i don't need a description and oh there's my okay there it is and so now let's add a featured video and let's make it big and let's just choose one from contentful and let's hit save and see what happens oh there it is let me just make this a bit bigger so it's easier to see so i just added a big image but now like this this might need a little text here and so this description is very specific to this component so that's why you do that in uniform and not in the cms ah there it is let's also add two small videos and you see in this slot i can only add a single video or an a b test or a personalization and the default is small so i don't have to select anything i'm just gonna go and select another video and also small and maybe here we do something like well let's see what else my audio setup and let's save and now we've actually created this lovely component that works pretty well in this preview mode here because my html in css already knows it has to look like this this is actually my production code but this is a draft like builder draft version of this composition but you can look at it in your live preview and i hear you thinking like tim this is only contentful are you just making a super fancy rapper about around one cms well no that's the whole point here other than the separation of these concerns we can also add other sources right like we have contentful and cloudinary now let's also add some products and let's make these dark let's call them products and in this case i have a new keyboard so i'm just trying to find my buttons now this is big commerce and the content editor knows it's big commerce just because of that icon but they don't really have to go into the system and do complicated stuff there so this is true orchestration the end user doesn't really have to know what they're dealing with as long as the orchestration bit works which is this so let's just select two products and hit save and see what that looks like there you go those are my two products i actually don't sell these it's just for the demo and now as you can see we selected background colors here and we can we can even change these things right so when i kind of want this one to be light this one to be dark hit save and there you go you can switch it around and that's clearly stuff you want to do in uniform and not in your cms it doesn't care about colors it's just data right and remember we have this empty arrow here or this empty header sorry and what we could do is just manually start adding navigation items but what we can also do is look at a pattern that i've created before so i can just remove this guy yes and then add this pattern and so now when i hit save you'll see that if it works there are my navigation items and then this became a pattern so when i open this up you can see i cannot edit this right now so so before i did this like on my homepage this exists this thing and so basically this is a pattern you can reuse and so you can actually open that pattern in our pattern editor and then change it here and it changes everywhere and those things really really help and imagine you need to build 25 compositions and you need to add that header everywhere well what you can do is you can actually go to your component library and go to this page system here the page composition that i made and we have composition defaults and so what i could do is add composition defaults where where i add my pattern to the header slot for every new one that i make and like these kind of things help you quite a lot and so this is what i wanted to show you today i hope it made sense and um feel free to reach out to me you can go on twitter at timberx or just go to our website and we're more than happy to help cheers