Add "Copy to Clipboard" button for code blocks in Theatre.js documentation

Feature Request: Add "Copy to Clipboard" Button for Code Blocks in Theatre.js Documentation

Is your feature request related to a problem? Please describe.

When following the Theatre.js documentation, there are several code examples and setup commands for example, in the installation and starter code sections but no “Copy” button is provided for the code blocks.

This makes it slightly inconvenient for users who want to quickly copy shell commands or example code when setting up their projects.

Example Sections Without a Copy Button

Installing dependencies

The docs currently show installation commands like this:

# r3f and its dependencies
npm install --save react three @react-three/fiber

# Theatre.js
npm install --save @theatre/[email protected] @theatre/[email protected] @theatre/[email protected]

# Three.js types (when using TypeScript)
npm install --save-dev @types/three

Having a small clipboard icon button next to each of these code blocks would allow users to quickly copy the full command without manually selecting text.

R3F Starter Code Example

Similarly, there’s no “Copy” button for the code snippets like the following:

To start, we'll create a main.tsx file containing the code in the block below.
For example, if you're using the Vite React-TS starter, you can replace the entire contents of the main.tsx file with this:

import * as THREE from 'three'
import { createRoot } from 'react-dom/client'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import { getProject } from '@theatre/core'

// our Theatre.js project sheet, we'll use this later
const demoSheet = getProject('Demo Project').sheet('Demo Sheet')

const App = () => {
  return (
    <Canvas
      camera={{
        position: [5, 5, -5],
        fov: 75,
      }}
    >
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </mesh>
    </Canvas>
  )
}

createRoot(document.getElementById('root')!).render(<App />)

Adding a copy-to-clipboard button here would be extremely helpful for users following along with the guide.

Describe the solution you'd like

Add a small "Copy" clipboard icon button to the top-right corner of each code block in the docs.

Expected behavior

• When the user clicks the button, the code block text is copied to their clipboard.
• A tooltip (e.g., “Copied!”) appears briefly to confirm the action.
• Uses the browser’s built-in Clipboard API (navigator.clipboard.writeText).

Visual inspiration

Similar behavior can be seen in the documentation sites for:

• React
• Vite
• TailwindCSS

Describe alternatives you've considered

• Manually selecting and copying text (default behavior).
  However, this is slower, can cause errors (like copying extra characters), and reduces the smoothness of onboarding for users.

Additional context

This enhancement will make the Theatre.js documentation more polished, modern, and beginner-friendly.

I’d love to work on this feature and contribute a PR to add copy buttons across all code blocks!