The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December. Read our blog post for more info about this change.
Would you like to improve the look and feel of your Canvas course but don’t know where to start?
The Canvas Component Generator is a library of 15 customizable components you can use to take your first steps. From buttons to cards and accordions, this tool is ideal for creating a visually effective interface for your course.
This tool is a clear example of what can be achieved through vibe coding: it was generated with the help of Gemini, built with React, and published on GitHub.
GitHub repository: https://github.com/PabloGGuizar/canvas-component-generator
Live demo: https://pablogguizar.github.io/canvas-component-generator/
This project is a spiritual successor to an earlier tool I developed years ago called The Button Maker:
https://community.canvaslms.com/t5/Canvas-LMS-Blog/The-Butt-n-Maker/ba-p/470330https://pablogguizar....
The Button Maker, which is no longer maintained, was built using HTML and CSS components from the Canvas LMS style guide (https://canvas.instructure.com/styleguide#). It allowed users to generate embeddable button HTML for the Rich Content Editor (RCE), with customizable color, size, and alignment.
Although that tool is now archived, it laid the foundation for the more powerful and flexible Canvas Component Generator.
Feel free to explore both tools and share your feedback!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
An amazing Instructure Community member!
Community helpTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign inTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in