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/core@0.5 @theatre/studio@0.5 @theatre/r3f@0.5
# 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:
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!
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:
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:
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
navigator.clipboard.writeText).Visual inspiration
Similar behavior can be seen in the documentation sites for:
Describe alternatives you've considered
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!