---
title: "CodeDemo — Free Framer component · Best of Framer"
description: "Free Framer component · by Davidson Akra · Buttons. CodeDemo is a Framer component that brings a code snippet to life through a typewriter-style animation, revealing each line…"
canonical: "https://framer.elliotli.dev/component/codedemo"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/CodeDemo

# CodeDemo

A syntax-highlighted code block that wri

[View on Framer](https://framer.com/marketplace/components/codedemo/?via=elliot-li)

![CodeDemo preview image 1](https://framer.elliotli.dev/og/component/codedemo/92c0249282b0c7ed/1600x1200.jpg)

## Summary

CodeDemo is a Framer component that brings a code snippet to life through a typewriter-style animation, revealing each line sequentially with a blinking cursor tracking the active…

## Description

CodeDemo is a Framer component that brings a code snippet to life through a typewriter-style animation, revealing each line sequentially with a blinking cursor tracking the active position. Timing is fully in your hands - dial in the duration and delay, then shape the pacing with one of three easing modes: a steady linear crawl, a smooth ease in-out curve, or a subtle spring overshoot that gives the reveal a lively, physical feel. When writing mode is off, the entire block appears instantly, making it easy to switch between animated and static presentations without changing anything else. The component ships in two syntax themes — a dark mode built around a deep navy canvas, and a crisp light mode on white — with distinct colors applied across the full range of token types. Supporting details like line numbers, a copy button with confirmation feedback, and font size are all individually toggleable. Every one of these options is surfaced as a native Framer property control, so designers can configure the component entirely from the canvas panel without ever opening the code editor.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6803

## Details

- **Author**: Davidson Akra
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-05-01
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow