# \[New Plugin\] Code Canvas

**URL:** <https://forum.bubble.io/t/new-plugin-code-canvas/372375>\
**Category:** Plugins\
**Created:** [June 9, 2025, 10:06pm UTC](https://forum.bubble.io/t/new-plugin-code-canvas/372375 "2025-06-09T22:06:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChainPulse](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/chainpulse/32/249374_2.png) [@ChainPulse](https://forum.bubble.io/u/ChainPulse)\
**Post date:** [June 9, 2025, 10:06pm UTC](https://forum.bubble.io/t/new-plugin-code-canvas/372375/1 "2025-06-09T22:06:19Z")

</div>

## Plugin details

A highly customizable, beautifully designed code display element. Showcase your code snippets with support for multiple languages, themes, and display options like line numbers and line wrapping.

🔗 [Demo page](https://code-canvas.bubbleapps.io/) (with link to editor)  
🔗 [Plugin page](https://bubble.io/plugin/code-canvas-1749212697536x428850335919112200)

 ![code-canvas](https://us1.discourse-cdn.com/bubble/original/3X/7/a/7ade333d2c25ae0446c1a5f209f6ec7847dbb051.jpeg)

## Instructions

1. Drag the “Code Canvas” element onto your page from the “Visual Elements” section in the editor.
2. Configure Properties:

- Enter the code you want to display. This can be static text or dynamic data (e.g., a field from your database).
- Select the language for syntax highlighting from the dropdown.
- Choose between the ‘light’ and ‘dark’ themes.