My Framer Site

Developer · UI

Code that looks as good as it runs

Drop it on any Framer page. Paste your snippet, pick a language, and get a polished syntax-highlighted code block with macOS-style chrome, dark/light themes, and a one-click copy button. No Prism. No Highlight.js. Pure React.

5 languages with real syntax highlighting — JS, TS, Python, Bash, JSON

macOS-style header, line numbers, copy button — all toggled from the panel

No Prism, no external libraries — zero bundle bloat, zero layout shift

javascript
1const fetchUser = async (userId) => {
2  try {
3    const res = await fetch(`/api/users/${userId}`)
4    if (!res.ok) throw new Error("Not found")
5    const data = await res.json()
6    return data
7  } catch (error) {
8    console.error("Request failed:", error)
9    return null
10  }
11}
12 
13fetchUser(42).then(user => {
14  console.log(user.name)
15})