# Can official threejs examples have a live code editing?

**URL:** <https://discourse.threejs.org/t/can-official-threejs-examples-have-a-live-code-editing/58816>\
**Category:** Resources\
**Tags:** examples\
**Created:** [December 2, 2023, 8:18am UTC](https://discourse.threejs.org/t/can-official-threejs-examples-have-a-live-code-editing/58816 "2023-12-02T08:18:26Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [December 10, 2023, 1:09am UTC](https://discourse.threejs.org/t/can-official-threejs-examples-have-a-live-code-editing/58816/4 "2023-12-10T01:09:53Z")

</div>

I created something that lets you copy/paste straight from the official examples on GitHub into an online editor, and then edit it from there.

It works for all the examples that I tested so far. I didn’t test all of them.

# How it works

Visit the classic ocean shader example, for example.

Ocean Shader : [three.js examples](https://threejs.org/examples/?q=ocean#webgl_shaders_ocean)

Click the \<\> at the bottom right of the view

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/3/d374a019338898165630229d2146c51d23ef0c11.jpeg)

Then press Ctrl+A, Ctrl+C to copy the code from the GitHub page.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/a/6acaa6b5d1ea5225bbdbc632225510f2e03f33d9.png)

Visit [https://editor.sbcode.net](https://editor.sbcode.net)

Press Ctrl+A, Ctrl+V to paste over the default example in the editor view,

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/68cde891016b334fcb34b4bbd3adbf9a721b63f0.png)

and then press the green `Update Preview` button

And Wallah! you have an editable Threejs example in your browser that you can edit locally.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/7/d770a39834c630664a4882c4b0e67b7ebebf2f65.jpeg)

And you can even make changes,

For example

Make the water yellow,

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b0425f4bb3fbf3cf14980de74a92264dcb3fe689.png)

load an external asset async,

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/1/d1ddbc94bcdc3a5236932b76fc669627a9f1b7a9.png)

and a few more things like change the camera position and get rid of `controls.minDistance`,

and when I’m finished making changes,

I can share a link to the edited version.

See the edited Version @ [SBEDIT : Online Code Editor](https://editor.sbcode.net/b31b03dc90ae47c036cc6b6e9b021f9d5c26895e)

**TL;DR** It’s a monkey head, bobbing up and down in yellow water

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/e/6e08bec6e5a392b6cf22d2dd64b92733a7a8977e.png)

---

_[View the full topic](https://discourse.threejs.org/t/can-official-threejs-examples-have-a-live-code-editing/58816)._