support edit mode for code snippets

[sarahxsanders]

Changes

what if you could edit code snippets in docs and copy and paste working code, without the back and forth of updating boilerplate code w/ placeholders?

this PR adds edit mode to code blocks, useful for docs where users need to customize their config (API keys, hosts, etc.) before copying.

here's how I built it:

• added a new edit prop for code blocks (CodeBlockProps, SingleCodeBlockProps, MdxCodeBlock, and MetaStringProps types)
• editedCode state tracks user changes w/ originalCode storing initial code for reset
• to use it:
  • in MDX code blocks: ```javascript edit -- yes it's that simple! this enables editing PER code block
  • for react types: <SingleCodeBlock edit> and <CodeBlock edit={true}>
• also added some tailwind updates to align other header buttons w/ new styling guidelines (hover:bg-accent instead of `hover:bg-light)

Note: this also lays the groundwork for interactive "try it out" sandbox features in docs. editedCode tracks edits, onCodeChange props fire on every keystroke, and there's a reset functionality for cleanup - all we would need later is the "run" functionality and output panel 😸

Behavior:

• Edit appears in code snippet header when enabled on that snippet
• Clicking edit opens a textarea OVERLAY for editing
• Reset button appears only when a code snippet has been modified
• Copy button copies the user's edited code (when they are in edit mode of course, not the original code) - copies original code when not in edit mode
• clicking outside the code block closers the editor w/ edits preserved open to feedback on this choice... I couldn't decide on whether to add a done button, or what the best UX was here
• IMPORTANT: ALL EDITS ARE CLIENT SIDE, NOT PERSISTED so a page refresh will reset the code snippets AND this does not impact copy to markdown/markdown service

To test

Try it out on this page: https://posthog-git-code-generator-post-hog.vercel.app/docs/experiments/installation/web

^^this is just a test section to test the functionality, we can assess where it makes sense to use this

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
posthog	Ready	Preview	Dec 11, 2025 4:09pm

[sarahxsanders]

note to self: visual nit, "copied" message is cut off by the code block element

[sarahxsanders]

note to self: visual nit, "copied" message is cut off by the code block element

fix: overflow in Step component was actually causing this, I noticed it in other docs in prod, specifically in code blocks in the Step component :D recent commit fixes it globally

[edwinyjlim]

let's park this PR in draft until we find a use case for this

it's a cool feature but feels underbaked since we're not applying it to any specific situation or use case yet. maybe we can find an opportunity in error tracking