Layout widget
Off-Canvas
A button that opens a panel from any side of the screen. Put a menu, a form or anything else in it.
Build it with your AI
“Add a “Menu” button that opens a panel from the right with our main links and a contact button.”
Live demo
See it working
Press Menu to open the panel. Esc, the close button or a click outside closes it.
Settings
36 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
16 settings
Trigger
Show trigger button
Text
Show text
Icon
Icon position
Alignment
Panel
Panel
Opens from
Width
Height
Close button
Close icon
Close on overlay click
Prevent page scrolling
Link anchor
Animation (ms)
Design
20 settings
Trigger
Typography
Icon size
Icon spacing
Padding
Border radius
Text color
Background
Border
Border color
Panel
Background
Text color
Padding
Border
Border radius
Shadow
Overlay
Color
Background blur
Close button
Size
Color
Background
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Off-Canvas settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a “Menu” button that opens a panel from the right with our main links and a contact button.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "off-canvas",
"settings": { },
"children": [
{
"type": "container",
"label": "Panel",
"settings": {
"gap": { "size": 16, "unit": "px" },
"_padding": {
"top": 8,
"right": 8,
"bottom": 8,
"left": 8,
"unit": "px",
"linked": false
}
},
"children": [
{
"type": "heading",
"settings": { "title": "Explore", "tag": "p", "typography": { "preset": "h4" } }
},
"… 2 more like this"
]
}
]
}