10 Tips to Vibe Code with Canva

Make your prompt VERY detailed. 

Your prompt can be up to 4,000 characters long, which is a lot. If you only write a sentence or two, Canva Code will be making a lot of decisions for you, like navigation buttons, logic, look and feel, and so on. If you take the time to think through and describe each aspect of your game or app, you'll narrow the amount of decisions the tool makes on your behalf and you'll get the thing you want. 

Start a new chat if debugging doesn't work after 2 or 3 tries

Even with a detailed prompt, you'll discover bugs and things you didn't consider as you test your game or app. You can continue the conversation with the chatbot and it will attempt to make any changes you request, but once it has written the original code, it seems to struggle with big changes. If something isn't working right and you've asked for changes 2 or 3 times, it's usually best to just copy and paste your prompts into a new chat. Depending on how vague it is, the same prompt can yield different results each time, so if Canva Code came up with something you liked but didn't ask for, make sure to describe that in your new prompt or you might not get it again. 

Connect spreadsheet to remember data

Canva Code can now remember stuff! If you ask for elements that require data to be stored, like a leaderboard for example, Canva Code will automatically create a Canva spreadsheet to store that data so that it can be accessed whenever your game needs it. This makes many things possible. This makes it so you can save responses, like a form. You can save lists of vocabulary words for vocabulary games. You can also ask for more complex things like game codes to manage multiplayer game. More on that later. The ability to have persisent data honestly turns this tool from a passing, gimmicky interest to a genuinely useful crafting station. Build games and apps and actually use them with your students! 

Turn forms into games

When I first started using this tool, I thought creating forms would be a waste of time becuase we already have Google and Microsoft forms. But then I started to expand my definition of a form, and the ideas started pouring in. For example, what about a form where a player is given a topic and has to come up with a word that starts with each letter of the alphabet related to that word? And to take that a step further, what all those submissions go to a word cloud so we can visualize how people are thinking alike and differently? And what if we want to gamify it with points and a leaderboard that automatically updates? I found a lot of great inspiration from common analog games. That previous example sounds a lot like Scattergories right? And I also made an example that resembles Apples to Apples. Each idea led to another one and I was able to make a lot of fun structures for gathering information that just can't be done with a traditional form. 

Always have an admin button

I have learned through many iterations that it is extremely helpful to have a discrete, password-protected admin button that gives me extra levels of control over whatever is being done with the app or game. Often, I use this space to be able to delete responses in case someone submits something inappropriate. Sometimes I'll put leaderboards behind this wall so that only I have the ability to display the leaderboard on the big screen. I also usually try to make sure that any important information is saved there, like for example if someone generates a game code but forgets it. I usually ask for the admin button to be placed discreetly in the bottom right corner of the game or app and Canva does a great job being discrete. 

Use emojis and lucide icons for visuals

Lets talk visuals. Despite Canva being the premier destination for all things visual / graphic design, Canva Code does not do well with images. This is because it's not referencing images from its database that already exist. Instead, it's trying to write the code that draws those images. So often, your result will look like something a kindergartener drew. However, it is very easy for it to use emojis and lucide icons. This is certainly limiting, but there are many creative ways to incorporate these emojis and icons to make your game or app more visual. They can even become part of the gameplay- here's an example of a vocabulary game where players are presented with a series of emojis and have to guess what the word is based on those emojis. 

Use codes to manage game sessions and multiplayer

Now that Canva Code has the data layer from Canva Sheets, using codes to manage your game or app works wonders. A common structure that I use with my form-based games includes game codes and manage codes. For example, "Prompt Party" is a game that is similar to Apples to Apples. A player can start a new prompt game, and when they do they are presented with two codes: a game code and a manage code. They share the game code with other players who want to participate, and they hold onto the manage code to be able to check in and see how the game is going. In this example, they share a prompt and others write a response to the prompt. Then they use their manage code to go in and see all the responses and choose their favorite, and that player receives a point for that round. Canva does a phenomenal job of keeping track of all these codes and using them to keep games organized. 

Ask for sound effects

While not pulling from a very robust library, you can prompt Canva Code to include some sound effects in your game. This can be a nice way to add some ambience to your game or app, or if you're really creative, it could become part of the gameplay. 

Keep it simple

I do a good job of hyping this tool up, but it is limited in many ways. Unfortunately my hype skills lead many people to jump right to the most complicated application they can dream up. Keep it simple. Think board games over video games. Simple tools over complex systems. Test out small components of an idea and build them up. Use it to create several pieces of a solution, rather than trying solve the whole thing in one shot. 

Support yourself with a chatbot! 

Intrigued, yet intimidated? Why not support your use of this AI tool with another AI tool? I've create an AI chatbot in Magic School whose purpose is to help you craft prompts and problem solve issues in Canva Code. You can check it out here: https://app.magicschool.ai/tools/demo/team/72d8b881-3864-4f35-9737-288d306fa6a2 or by going to your Magic School dashboard and filtering the tools by "enterprise". Happy crafting!