Custom Code
Custom code elements hold your own HTML and CSS inside a block. Reach for one when you need something the visual elements do not cover: a third-party embed (YouTube, Loom, Calendly), a widget, or a piece of hand-crafted markup.
#Adding and Editing
Select a block and click "Add Custom Code", then "Edit Code" in the sidebar. The editor shows two panels - HTML and CSS - side by side, with syntax highlighting. Close the popup and the element updates on the canvas immediately.
A few practical notes:
- Write fragment markup, not a full document - document-level tags like
<head>,<style>, and<link>are stripped on save. Put styles in the CSS panel. - Your CSS applies to the element's own markup, and the "CSS Class" setting on any element gives you hooks to target from here.
#Sizing
Custom code uses the same "Layout & Size" controls as everything else, with one extra power it shares only with text: its width and height can differ per pane. The same embed can be a small card on one pane and expand to most of the next, resizing as part of the transition.
One thing to keep in mind: unlike native elements, the content inside your code does not automatically scale with the slideshow's rendered size. A font-size: 24px in your CSS is 24px on a phone and on a conference screen alike. Prefer relative CSS units (percentages, em) inside custom code so it scales with its container.
#Where Custom Code Works
Custom code runs in the editor preview, published CDN embeds, iframe embeds, and the HTML, React, Vue, Svelte, and Next.js exports - your markup ships as part of the output. Video export renders whatever the embed displays into the frames. The one exception is the Webflow App, whose environment does not allow custom code; publish to CDN and embed via iframe there instead.
#Next
- Elements Overview - the shared controls
- Export & Publish - how your code ships
- Text - the other element with per-pane sizing
