CodeMotion editor guide: controls, exports and motion settings
Every CodeMotion editor control explained: code input, typography, syntax themes, transparent backgrounds, card styles, branding, layout, motion presets, and exports.
Content and language
Paste code, choose a template, or reopen a saved card. Language can be selected manually or detected from the snippet to keep syntax highlighting accurate.
Typography and syntax
Control font, font size, syntax theme, line numbers, highlighted lines, and focus mode. These settings decide how quickly someone can understand the code.
Background and canvas
Use gradients, custom CSS backgrounds, solid colors, or transparent mode. Transparent mode removes the canvas background so only the card is exported.
Card and brand
Choose the window style, card color, title, watermark, and logo. These controls turn raw snippets into reusable branded assets.
Motion and export
Use build sequence, typewriter, reveal, float, and scanlight effects. Export still images, vectors, GIFs, WebM clips, or MP4 where browser support allows it.
Try it in the editor
Paste a snippet, choose a look, and export a code asset for your next post, doc, slide, or video.
Open CodeMotion