--- title: "Creating with Canvas by Richard Bausek and Tim Benniks" description: "See the possibilities for content creation and orchestration to empower marketers using the new version of Canvas. https://uniform.dev/dxc-assembly Session moderated by Richard Bausek, Principal Product Manager, Uniform and Tim Benniks, Principal Developer Advocate, Uniform." date: "2022-11-25T14:03:32.000Z" url: "https://timbenniks.dev/videos/uniform/014-t3avobqvwps" youtube_url: "https://www.youtube.com/watch?v=T3AVoBqVWPs" playlist: "uniform" duration: "19:37" image: "https://img.youtube.com/vi/T3AVoBqVWPs/hqdefault.jpg" tags: ["cms", "api-design", "content-ops", "frontend", "developer-experience"] --- # Creating with Canvas by Richard Bausek and Tim Benniks See the possibilities for content creation and orchestration to empower marketers using the new version of Canvas. https://uniform.dev/dxc-assembly Session moderated by Richard Bausek, Principal Product Manager, Uniform and Tim Benniks, Principal Developer Advocate, Uniform. Watch on YouTube: https://www.youtube.com/watch?v=T3AVoBqVWPs ## Transcript so um welcome everybody um to this breakout session we have 15 minutes so we're gonna back this one with lots of demo by Richard and um so this is the breakout session about how you can create with canvas um and this is not the most technical approach but this is more like showing you how you can kind of Click around drag and drop select systems uh data put it in but then also if we have the time research we could actually have a look at how you can add like a data source like an API yourself as a Content editor grab the data and go for it so without losing too much time how about research we just dive in and um let's go and before you kick it off if anybody has any questions put them in the chat and then um if it's long-winded answers we will see how we go for it and otherwise I will just be interrupting Richard with questions if they fit in his current context all right let's do it man okay okay hey folks so who don't know me I'm Richard I'm a principal product manager at uniform and so I want to show you like Tim said like how experience building works with a new visual canvas and so but before we jump into visual canvas I also want to give you a quick glimpse into the project map feature that last just announced during the keynote so this uh project particularly is like a cooking themed website that I've been building on on the side to kind of test the new features on my own and I call it unifruit and you also you'll see you have like a page structure that is related to cooking and so the particular page that I want to build up now it's like I have a Cuisine section which will be involved like the category pages for all of the various Cuisines and landing pages a very maybe in these sub Pages later you'll have recipes all of those uh Regional or national Cuisines but now I want to build out this kind of kind of Hub page for Asian Cuisines where I just want to link to all of those sub pages so opening up this uh composition in the new canvas editor and so what you immediately see I what has changed from the previous version we have a lovely big preview area and uh on the left side we have what we call the structure panel which gives you like that's where you put all of your components and your so-called content slots so on this composition I have defined two slots I always want this type of Cuisine page to always hero and then I can just place any content within sections and I have a lot of editorial freedom on the right side I am able to manage any properties of the current composition or the currently highlighted component so let's maybe start off with some manual work uh so how I could maybe quickly prototype a page so I will just add a hero component and say Asian Cuisine and I already prepared a nice little image that I'm gonna put in here and then I'm gonna add a caption or like a byline and okay you're gonna quickly fix that and you see as I'm typing everything is auto updating and um but actually my content creators have prepared all of that content already for for me in contentful so if you look here into my comfortable space I have a Cuisine content type that has like the name the slug a cheese attacks they already chose an image and I also have a list of sub categories or sub Cuisines that I want to list and so actually let's build this page based on that data coming from Contour 4. so I'm going to remove this one for now and the first thing I need to do is I have to pull in the data I'm going to do this by adding a data visas and the data resource is basically an API call to an external service and I have defined a Cuisine data details data type um and a data type is more or less like an API call definition and I'm going to call it cuisines and so this data type is configured to actually choose from this Cuisine content type that I have encounter for I come out at Asian and save that so now this external data is available on the page it doesn't change anything yet but now I can actually use that data so the simplest way of adding this uh hero component with data from control four is using a pattern this this is a pattern that I've predefined that has all the ready-made wiring I'm going to show you later the more advanced stuff and so I add this pattern for this Cuisine and it has a default data connected but I actually really want to use the data resource that I just created so I'm going to choose this cuisine and now you see it is switching to all of those content mappings from content form okay so and that's great um so now let's maybe continue building out the lists to all of those thought categories or sub Cuisines and that I I have prepared and so here in the sections the part I'll add a section container placeholder you can give it a title like explore The Taste of Asia and then I can give it a theme like all of those options something I defined in my design system I've called it this website for my I'm definitely not the current code I used to be recording my past life but it's been actually super easy there's no unified uniform code in my component it's really just very simple uh react component and then I'm gonna add another component within uh this section uh which is a grid container in a great container is basically a simple component where you can place any items inside it and it will display it in a grid and I'm gonna provide a column count of two and you see it is automatically adjusting to that and now I could go and play for example like a generic card component and you see this component is very simple title image body there's nothing about an external data source and so on so I can say in the end and maybe add or unmute image again rigid while you're showing that could you show also where this component is defined yes um so let me quickly save you mean the component definition yes exactly because Gary who obviously works at sanity she would love to see where these fields come from because you can do similar things Insanity obviously so here we have in canvas we have a component library and this is where you're defined also for example the hero that we were working before that's where you define your components and the parameters we also have slots slots are basically placeholders that are reference to other components where you can basically Nest components and the way you should use those components in uniform these are your presentational components not your content types as you would have in a headless CMS which is more semantic content so I keep my semantic content in have the CMS but my presentational components uh I manage these in uniform and so those components are much closer than that to your this actual design system components that are responsible for rendering your kind of pages or compositions okay traffic back to my example here and so I quickly showed you like how I built out a simple card here but actually I don't want to repeat this process for every each and every single card because I already have this content and contourful so I'm going to remove this component again and if you remember I already added the data resource for this Cuisine which already contains the reference for all of those so I can actually use the loop component that Alex showed in this keynote uh the two kind of dynamic people in those items so now as the next step I'm adding the loop and the loop is basically a way of iterating over a set of item items coming from an external API so in this case I am I have to Define which array I want to Loop over and so I'm using the Cuisines item and then I'm looping over the narrower Cuisines which contains all of my sub cuisines like Indian and so on okay and then the next step is I have to place a component inside of that Loop and in this case I use the generic card again and you see automatically I have six of Cuisines here it automatically creates those six items for me but they don't have any content yet so the next step is I'm actually connecting the data to the parameters here from that Loop item so now I'm choosing the title here I'm hitting this data connection button um select the field and say the title should display that the name of the cuisine then the image should use the opposite URL the fields image URL from so that's the past how you get the image from contour for I'm adding the body and using the teaser text and as you see like I'm starting to build out this page very easily and so maybe that's the last step because this should act like as a landing page Hub to connect to those sub Pages let's also add a dynamic call to action button so on this component here I'm adding a call to action um I'm gonna give it aesthetic label and I'm gonna give it an increase so it would be quick scenes h Asian and then I'm craving taking the link from the slug field coming out of the Headless DMS so this would be this field here and gonna connect that and you see um that your page is working um you can also preview it in different mobile sizes uh it's also possible to resize the the handlers if you want to have this in between uh kind of screen sizes reload the page if uh maybe you've changed an underlying data source and you want to update it uh you won't be able to see that because I'm only sharing this window but you'll be able to pop out this uh preview into a separate browser window browser tab if you have a large screen setup convert side by side yeah and I think like that really shows how this experience building there a lot makes it very easy to connect to your design system components and kind of keep your designers and your engineers the right guardrails for your business users to provide like a customization options so like theming can basically allow them to switch the background color or in this grid component I can change the number of columns to a sphere or two up but kind of still like give the right amount of flexibility to to your marketing user but not kind of let them go overboard and kind of break your planned Equity uh reputation or doing paths designs and it is super easy to connect into any existing data source um by just adding a data resource those are probably set up by a developer um or a Content architect for you that knows like the external dependencies and another good news for um developers is if you use the uniform SDK this preview capability comes out of the box you don't have to touch a single line of code user SDK and all of that highlighting of components and the basic functionality will be there immediately for you I think that's all I have to show um I think it was a lot of stuff in a very short time because that's what breakout sessions are again um um our um I think what's important we have two minutes to our soft deadline we have a bit longer to our heart stop so we can kind of go over unless people want to take a break um I think what we should discuss a little bit is what we've seen here and we are creating a page composition which is designed in the context of this page with this data and so like Paul saying in the chat now the design data how does that work where's the workflow where where does the stuff sit because for example the fact that you make the theme green here or lime green or Mint or something like that and then you can change it to Yellow that's something in the context of this page and it should not exist in your CMS because that's your domain data that's the stuff that lives forever shall we say so Richard can you maybe elaborate a little bit on the difference between the design related data and the domain related data yeah I definitely so the domain related data is like your kind of strategic business asset that you have as content like that is content that is agnostic of any kind of presentation like it has high semantic meaning so typical examples in this recipe website your recipes they will have many kinds of different representations that's your domain data like that that's kind of just contains the information of the ingredients the preparation steps the classification of that recipe a blog posts are a good example for domain data events everything like if you for example have ever heard of schema.org everything that's existing there as an entity in schema.org that is a really great example so I always describe to main data it's like that's the content that's survives your next three design and and then you just have to figure out how to display that and that's the kind of the compositional data like the actual components that how do you appear on your current page does that make sense it does and I love Andrew's comment because he's totally right we are kind of saying you create your page in uniform design it and the data lives in cms's versus wherever and this is kind of an opinionated stance but also by us choosing that stance all the lovely stuff you just saw on the screen is suddenly possible and so for us it's kind of finding a way which users would actually benefit from having their design data in another system versus a CMS and if you start to scale up that becomes a much more apparent and awesome thing if you don't scale it might be interesting to have parts of your site in uniform and the rest you just keep it in the CMS lots of my personal projects actually have a ton of stuff just in the CMS because it's data modeled there it kind of just works but another thing that might have to change more often or have lots of different sources connected that lives in in uniform and so do realize Andrew as well that uniform can be is big or as small as you'd like it right and that makes it very interesting it's quite agnostic on how you want to do things because nobody is stopping you to do a whole design thing in your CMS and just pulling that whole thing into uniform and then it works identical to what you just saw it's very open exactly could have your collection of Heroes and you have the CMS it can be anything I think we are we are opinionated how it should be used but how you actually use it that's really up to you we've seen wildly different approaches and what we've realized is we started with being not opinionated at all just use it and then people didn't use it and now what we do we say can I go this direction and then give Freedom after and then people kind of like hey I kind of get this and then try it and then change it up um so one last question because we're kind of going over time here so Paul thank you um for the question about the workflow and stuff um so we have a whole bunch of access rules built in now so certain people can change certain things certain components and patterns and stuff like that um we have drafts and published versions but as far as I know don't we don't have that many more steps in there what do you think Richard you know a bit more about the product than I do yeah like we currently told us support for workflows but this is will be based on customer feedback so if it's often enough so we'll kind of uh put it on a roadmap uh yeah so if you have any kind of good examples or you would like workflows to to work please to reach out to me we shall I will make sure that happens because I have these questions too to be fair um so um between Kerry and Andrew I really appreciate your your kind of other opinions or like keeping it open because we are not here to replace cms's I think that's a very important thing to notice we're just enhancing the experience for people um that doesn't mean you can still keep your Integrations in your CMS to do certain things clearly to that if you guys wanted to do any more like in-depth talks about that stuff we're open right because now our time is up for real I'm three minutes over Jamie's gonna kick my butt so basically if you do want to know more about all this stuff you can actually join us at Discord if you want you can go to uniform.2 Discord where we can discuss all of this stuff at length but what you can also do is you can kind of just reach out to us through the website and there we can just literally just book a meeting with you for an hour and spar and um we're we're super happy to actually do this especially as you both work in that industry for a while now and you know that stuff and so we're really happy to be flexible and see how we can deal with that um thank you everybody [Music]