# ShaderKit (Quick editor overlay plugin for shader)

**URL:** <https://discourse.threejs.org/t/shaderkit-quick-editor-overlay-plugin-for-shader/39364>\
**Category:** Resources\
**Tags:** dev-tools, shaders\
**Created:** [June 17, 2022, 7:06pm UTC](https://discourse.threejs.org/t/shaderkit-quick-editor-overlay-plugin-for-shader/39364 "2022-06-17T19:06:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 17, 2022, 7:06pm UTC](https://discourse.threejs.org/t/shaderkit-quick-editor-overlay-plugin-for-shader/39364/1 "2022-06-17T19:06:59Z")

</div>

![sk2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5efac9e6c748c01e718e041d839fa52401b2043c.jpeg)

This is a basic quick made vanilla js (no dependencies required) plugin to edit shader at runtime, it’s purpose is to be small/simple but comfortable to make quick changes, test with direct visible changes instead reloading a entire app or game if it doesn’t use a IDE or just to test something.

Specifically to be used through **dev tools** inspection passing a material in the global variable so the editor will initialize if it wasn’t yet and pop up.

```javascript
sk.edit( mesh.material )

```

The plugin only needs to be included, it’s lazy and only creates UI and anything when being called, by default it uses plain text editing which is enough for quick tests/prototyping, fixes or changes, by enabling the full mode it will load Codemirror which is more comfortable for creating a bit more complex shader in your direct environment instead externally.

Will extend it a bit further to also allow in-built materials that will be patched with onBeforeCompile, an a better undo/redo history support regarding tab indentions.

> **[GitHub - Fyrestar/THREE.ShaderKit: Minimal shader code editor plugin. WIP](https://github.com/Fyrestar/THREE.ShaderKit)**
>
> Minimal shader code editor plugin. WIP. Contribute to Fyrestar/THREE.ShaderKit development by creating an account on GitHub.

Plain text mode, single tab supported and ctrl+s shortcut to update.

 ![sk1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/c/fca8d55ad5bafb52a43c445547d3f5f64f0c976a.jpeg)

**Demo**  
https://codepen.io/Fyrestar/embed/preview/QWQPjQL?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=QWQPjQL

---

<div class="post-metadata">

**Author:** ![DolphinIQ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dolphiniq/32/3510_2.png) [@DolphinIQ](https://discourse.threejs.org/u/DolphinIQ)\
**Post date:** [June 21, 2022, 12:26am UTC](https://discourse.threejs.org/t/shaderkit-quick-editor-overlay-plugin-for-shader/39364/2 "2022-06-21T00:26:05Z")

</div>

This can be very handy 🤩 Thanks!