Winamp AVS mode for CodeMirror 5

Usage no npm install needed!

<script type="module">
  import visbotCodemirrorAvs from 'https://cdn.skypack.dev/@visbot/codemirror-avs';



npm npm CI David


A mode for Winamp AVS to use with CodeMirror, the versatile text editor implemented in JavaScript for the browser.

Demo Time 🙌


Use your preferred Node package manager to install the mode

$ yarn add @visbot/codemirror-avs || npm install @visbot/codemirror-avs

Alternatively, you can clone this repository

$ git clone https://github.com/visbot/codemirror-avs


Example usage on website

<!DOCTYPE html>
  <!-- Import CodeMirror styles -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.min.css">
  <!-- Add Textarea -->
  <textarea id="editor"></textarea>

  <!-- Import CodeMirror library -->
  <script defer src="https://cdn.jsdelivr.net/npm/codemirror@5/lib/codemirror.min.js"></script>

  <!-- Import AVS mode -->
  <script defer src="https://cdn.jsdelivr.net/npm/@visbot/codemirror-avs@latest/dist/avs.min.js"></script>

  <!-- Initialize CodeMirror -->
  <script type="text/javascript">
    const editor = document.getElementById('editor');
    const options = {
      lineNumbers: true,
      mode: 'avs'

    const cm = CodeMirror.fromTextArea(editor, options);

Note: If you want to load CodeMirror from a CDN, make sure to specify a specific version for better performance – the example above doesn't to keep it simple.


Beside the loose avs mode, you can specify stricter modes for specific components:

Mode Effect
avs/bump Trans/Bump
avs/color-modifier Trans/Color Modifier
avs/dynamic-distance-modifier Trans/Dynamic Distance Modifier
avs/dynamic-movement Trans/Dynamic Movement
avs/dynamic-shift Trans/Dynamic Shift
avs/effect-list Effect List
avs/movement Trans/Movement
avs/superscope Render/SuperScope
avs/texer2 Render/Texer II
avs/triangle Render/Triangle


All code is licensed under The MIT License