# vibe-editor > Current version in npm repo: ![npm](https://img.shields.io/npm/v/vibe-editor) Latest version **0.0.7** (published 2024-03-19) · MIT license · 0 weekly downloads ## Install ```sh npm install vibe-editor pnpm add vibe-editor yarn add vibe-editor bun add vibe-editor ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.7 | | Published | 2024-03-19 | | First published | 2023-08-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 39 | | Unpacked size | 19.5 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Matthias Nowakowski | | Maintainers | nowams | ## Links - npm: https://www.npmjs.com/package/vibe-editor - npm.io page: https://npm.io/package/vibe-editor ## Dependencies (39) - [d3](https://npm.io/package/d3.md) ^5.11.0 - [tone](https://npm.io/package/tone.md) ^14.7.77 - [axios](https://npm.io/package/axios.md) ^1.4.0 - [babel](https://npm.io/package/babel.md) ^6.23.0 - [buffer](https://npm.io/package/buffer.md) ^5.7.1 - [update](https://npm.io/package/update.md) ^0.7.4 - [esbuild](https://npm.io/package/esbuild.md) 0.17.14 - [webpack](https://npm.io/package/webpack.md) ^5.88.2 - [bootstrap](https://npm.io/package/bootstrap.md) ^5.1.3 - [node-sass](https://npm.io/package/node-sass.md) ^7.0.1 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [ts-loader](https://npm.io/package/ts-loader.md) ^9.5.1 - [css-loader](https://npm.io/package/css-loader.md) ^6.7.1 - [interactjs](https://npm.io/package/interactjs.md) 1.10.11 - [typescript](https://npm.io/package/typescript.md) 4.6.3 - [file-loader](https://npm.io/package/file-loader.md) ^6.2.0 - [react-color](https://npm.io/package/react-color.md) ^2.19.3 - [sass-loader](https://npm.io/package/sass-loader.md) ^12.6.0 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^4.9.2 - [@tonejs/midi](https://npm.io/package/@tonejs/midi.md) ^2.0.28 - [@types/react](https://npm.io/package/@types/react.md) ^18.2.28 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.3 - [style-loader](https://npm.io/package/style-loader.md) ^3.3.1 - [web-midi-api](https://npm.io/package/web-midi-api.md) ^2.2.5 - [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.6 - [midi-player-js](https://npm.io/package/midi-player-js.md) ^2.0.16 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^6.2.1 - [svg-url-loader](https://npm.io/package/svg-url-loader.md) ^8.0.0 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.13 - [h5p-lib-controls](https://npm.io/package/h5p-lib-controls.md) ^0.0.15 - [soundfont-player](https://npm.io/package/soundfont-player.md) ^0.12.0 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.16.11 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.6.0 - [brotli-webpack-plugin](https://npm.io/package/brotli-webpack-plugin.md) ^1.1.0 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.6.0 - [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.5.0 - [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.6.0 - [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^9.2.0 - [@babel/plugin-transform-classes](https://npm.io/package/@babel/plugin-transform-classes.md) ^7.16.7 ## Recent versions - 0.0.7 (latest) — 2024-03-19 - 0.0.1-dev (dev) — 2023-12-09 - 0.0.0 (development) — 2023-08-30 - 0.0.6 — 2024-03-04 - 0.0.5 — 2024-03-04 - 0.0.4 — 2024-01-23 - 0.0.3 — 2024-01-23 - 0.0.2 — 2024-01-23 - 0.0.1 — 2023-12-09 ## README # VIBE = Verovio Interface for Browser-based Editing Current version in npm repo: ![npm](https://img.shields.io/npm/v/vibe-editor) Current version on github: ![GitHub package.json version](https://img.shields.io/github/package-json/v/mnowakow/VIBE) A score editor using verovio as rendering engine ## Getting started - Install node modules: `npm install` - Transpile TypeScript in watch mode: `tsc -w` - Build the application: `npm run build` ## Initializing To initailize the score editor only need two different things are needed 1. The `container` the score editor will be displayed in. The container must contain an ID, since many editors can be displayed on one page. 2. If known beforehand, the data The data can be present in different forms. So to indicate which kind of processing will be used, the data will be passed as objects with specific keywords ### xmlData The `xmlData` can be passed either as String of the corresponding MusicXML or MEI, or as Document. ``` var vibe = new VIBE(container, {data: xmlData}) ``` ### urls The `url` must include a source for MEI data. ``` var vibe = new VIBE(container, {meiURL: url}) ``` ### empty score Initialization with an empty measure ``` var vibe = new VIBE(container, null) ``` ### callbacks A callback can be passed to return the changed data as MEI. The MEI is returned as String ``` var vibe = new VIBE(container, {data: xmlData}, callback) ``` or ``` var vibe = new VIBE(container, {meiURL: url}, callback) ``` or ``` var vibe = new VIBE(container, null, callback) ``` ## Sources Parts of the Code are based on the [Neon Editor](https://github.com/DDMAL/Neon) by DDMAL. --- _Source: https://npm.io/package/vibe-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._