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})

Create a free website with Framer, the website builder loved by startups, designers and agencies.