-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
17 lines (17 loc) · 67.4 KB
/
index.html
File metadata and controls
17 lines (17 loc) · 67.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="en" dir="ltr" class="plugin-pages plugin-id-default">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v2.4.1">
<title data-rh="true">MIDIVal | MIDIVal</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://midival.github.io/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://midival.github.io/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://midival.github.io/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" property="og:title" content="MIDIVal | MIDIVal"><meta data-rh="true" name="description" content="Description will go into a meta tag in <head />"><meta data-rh="true" property="og:description" content="Description will go into a meta tag in <head />"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://midival.github.io/"><link data-rh="true" rel="alternate" href="https://midival.github.io/" hreflang="en"><link data-rh="true" rel="alternate" href="https://midival.github.io/" hreflang="x-default"><script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("__docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><script data-rh="true" src="/animations/main.js"></script><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="MIDIVal RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="MIDIVal Atom Feed"><link rel="stylesheet" href="/assets/css/styles.923273bf.css">
<link rel="preload" href="/assets/js/runtime~main.40b02afe.js" as="script">
<link rel="preload" href="/assets/js/main.b3eac7a9.js" as="script">
</head>
<body class="navigation-with-keyboard">
<script>!function(){function e(e){document.documentElement.setAttribute("data-theme",e)}var t=function(){var e=null;try{e=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(e){}return e}()||function(){var e=null;try{e=localStorage.getItem("theme")}catch(e){}return e}();null!==t?e(t):window.matchMedia("(prefers-color-scheme: dark)").matches?e("dark"):window.matchMedia("(prefers-color-scheme: light)").matches?e("light"):e("dark")}()</script><div id="__docusaurus">
<div id="__docusaurus-base-url-issue-banner-container"></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/midival-logo.svg" alt="MIDIVal logo" class="themedImage_ToTc themedImage--light_HNdA"><img src="/img/midival-logo-dark.svg" alt="MIDIVal logo" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate"></b></a><a class="navbar__item navbar__link" href="/docs/intro">Tutorial</a><a class="navbar__item navbar__link" href="/blog">Blog</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/midival/core" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently dark mode)" aria-label="Switch between dark and light mode (currently dark mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_ZlJk"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><header class="hero hero--primary heroBanner_qdFl"><div class="container"><div class="row"><div class="col col--6"><h1 class="hero__title"><svg viewBox="0 0 1016 275" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" data-fill-darkmode="1" role="img" class="heroLogo_U6bI"><path d="m486.474 378.625.049 16.987c0 .637-.255.955-.764.955h-21.583c-.509 0-.764-.318-.764-.955l-.01-5.167 23.072-11.82Zm-63.336 3.007-.027 13.98c0 .637-.255.955-.764.955h-21.583c-.509 0-.764-.318-.764-.955l.027-9.333 23.111-4.647Zm102.681-20.645.05 34.625c0 .637-.255.955-.764.955h-21.583c-.637 0-.955-.318-.955-.955l.037-25.25 15.124-7.749 8.091-1.626Zm130.291 20.279.021 14.346c0 .637-.255.955-.764.955h-21.583c-.637 0-.955-.318-.955-.955l.004-2.421 23.277-11.925Zm196.315-85.95-.137 77.758h39.346c.637 0 .955.318.955.955v21.583c0 .637-.318.955-.955.955h-61.693c-.509 0-.764-.318-.764-.955l.139-95.65 23.109-4.646ZM617.74 342.504v13.762c0 7.385-1.783 14.102-5.348 20.15-3.565 6.049-8.34 10.856-14.325 14.421-5.985 3.565-12.733 5.412-20.246 5.539l-34.189.191c-.637 0-.955-.318-.955-.955l.111-38.037 23.236-4.672-.045 20.171h11.842c4.711 0 8.691-1.655 11.938-4.966s4.87-7.258 4.87-11.842v-9.115l23.111-4.647Zm183.996-35.844 15.408 88.952c.127.637-.127.955-.764.955h-21.201c-.509 0-.828-.318-.955-.955l-2.101-13.943h-25.976l-2.101 13.943c-.127.637-.446.955-.955.955H741.89c-.509 0-.764-.318-.764-.955l11.516-63.801 24.006-12.298-6.681 41.719h18.336l-6.474-44.373 19.907-10.199Zm-73.148 37.474-10.191 51.478c-.127.637-.446.955-.955.955h-23.111c-.509 0-.828-.318-.955-.955l-6.09-30.318 41.302-21.16Zm-242.384-58.119.226 77.792-23.072 4.388-.137-69.993-20.055 29.032-19.864-29.032-.152 77.638-23.105 4.394.258-88.617 41.303-4.272 1.56 2.262 1.799-2.61 36.79-3.806 4.449 2.824Zm169.887 82.412-23.238 10.911.058-39.884 23.131-4.651.049 33.624Zm-192.712 10.281-.01-5.165 18.269-3.673-18.259 8.838Zm62.335-89.776.086 59.561-23.181 11.221.115-78.693 13.656-1.412 9.324 9.323Zm179.133 56.603-19.675 9.238-4.986-24.825 21.111-4.245 3.55 19.832Zm-138.814 3.136-23.232 4.417.009-3.325 23.247-11.909-.024 10.817Zm164.682-15.282-23.426 10.999 3.601-20.614 22.629-4.55-2.804 14.165Zm-112.975 5.45-23.111 4.394v-20.017l23.111-11.84v27.463Zm-15.509-68.11c4.186 3.106 7.636 6.948 10.352 11.524 3.438 5.794 5.157 12.193 5.157 19.196v2.541l-23.111 11.187v-13.919c0-4.075-1.496-7.608-4.488-10.601-2.993-2.992-6.526-4.424-10.601-4.297l-13.37.191-.094 42.446-23.238 11.249.185-63.392 59.208-6.125Zm53.807 60.827-23.122 4.397.047-32.376 23.017-11.792.058 39.771Zm39.349-38.858 5.433 30.343-21.211 4.033-8.632-42.972 10.457-5.357 13.953 13.953Zm82.593 18.499-23.619 11.09 1.358-7.526 22.412-4.507-.151.943Zm-53.448-47.566 16.688 16.689-7.207 36.409-22.644 4.306 9.893-56.64c.127-.509.446-.764.955-.764h2.315Zm55.099 0 17.721 17.721 3.324 19.189-12.571 5.903-7.586 1.442-.047-.325-1.146-7.067-.764 7.067-.115.719-22.324 4.245 8.687-48.13c.127-.509.446-.764.955-.764h13.866Zm1.178 46.238-.022-.149.593-.119-.571.268Zm71.638-27.131-.02 11.475-23.109 4.394.009-6.083 21.759-11.147 1.361 1.361Zm-219.432-15.194-.042 29.072 21.996-10.647-18.756-18.756-3.198.331Zm-232.701 20.173.068-23.322c0-.509.255-.764.764-.764h23.302c.509 0 .955.255 1.337.764l13.556 19.663-39.027 3.659Zm447.707-9.405-18.686 8.773.033-22.499c0-.637.318-.955.955-.955h3.017l14.681 14.681Zm-370.535 2.17-29.966 2.809 10.468-15.184 19.498 12.375Zm200.184-5.501-7.77 3.761-2.882-14.347a1.438 1.438 0 0 1-.018-.085l10.67 10.671Zm-163.817 2.091-11.115 1.042.018-12.14 11.097 11.098Zm29.177-2.735.029-9.942c0-.509.255-.764.764-.764l35.717-.191c7.003-.127 13.402 1.528 19.196 4.966.338.201.672.405 1.002.614l-56.708 5.317Zm91.709-8.598-1.721.161.002-1.505c0-.125.015-.235.046-.329l1.673 1.673Zm109.613-1.816c.063.12.07.278.021.472l-.021.107v-.579Z" style="fill-rule:nonzero" transform="translate(-824.851 -543.232) scale(2.06213)"></path></svg></h1><p class="hero__subtitle">TypeScript library for all your MIDI needs</p><p>MIDIVal allows you to connect your MIDI keyboards, synthesisers, control pads and drum machines with your browsers, Node.js and React Native iOS / Android apps using universal, high-level API.</p><div class="buttons_AeoN"><a class="button button--secondary button--lg" href="/docs/intro">Tutorial</a></div></div><div class="col col--6"><motion-canvas-player src="/animations/pads/project.js" auto="true"></motion-canvas-player></div></div></div></header><main><section class="features_t9lD"><div class="container"><div class="row"><div class="col col--3"><div class="text--center"><svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="featureSvg_GfXr" role="img"><title>ic_fluent_midi_24_filled</title><path d="M21.25 4.004a.75.75 0 0 1 .743.649l.007.101V19.25a.75.75 0 0 1-.648.743L21.25 20H2.75a.75.75 0 0 1-.743-.648L2 19.25V4.754a.75.75 0 0 1 .648-.743l.102-.007h18.5Zm-15.25 8H3.5V18.5h17v-6.496H18v4.246a.75.75 0 0 1-1.493.102l-.007-.102v-4.246h-2v4.246a.75.75 0 0 1-1.493.102L13 16.25v-4.246h-2v4.246a.75.75 0 0 1-1.493.102L9.5 16.25v-4.246h-2v4.246a.75.75 0 0 1-1.493.102L6 16.25v-4.246Zm11.25-4.503h-2.5l-.102.007a.75.75 0 0 0 0 1.486l.102.007h2.5l.102-.007a.75.75 0 0 0-.102-1.493Zm-11-.001a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm3 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" fill="#212121" fill-rule="nonzero" data-fill-darkmode="1"></path></svg></div><div class="text--center padding-horiz--md"><h3>MIDI Compliant</h3><p>MIDIVal implements standard MIDI protocol making it compatible with wide range of MIDI devices like synthesisers, control pads and generic controllers.</p></div></div><div class="col col--3"><div class="text--center"><svg data-fill-darkmode="1" width="800" height="800" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="featureSvg_GfXr" role="img"><path d="M0 16v16h32V0H0zm25.786-1.276a4.023 4.023 0 0 1 2.005 1.156c.292.312.729.885.766 1.026.01.042-1.38.974-2.224 1.495-.031.021-.156-.109-.292-.313-.411-.599-.844-.859-1.505-.906-.969-.063-1.594.443-1.589 1.292a1.26 1.26 0 0 0 .135.599c.214.443.615.708 1.854 1.245 2.292.984 3.271 1.635 3.88 2.557.682 1.031.833 2.677.375 3.906-.51 1.328-1.771 2.234-3.542 2.531-.547.099-1.849.083-2.438-.026-1.286-.229-2.505-.865-3.255-1.698-.297-.323-.87-1.172-.833-1.229.016-.021.146-.104.292-.188l1.188-.688.922-.536.193.286c.271.411.859.974 1.214 1.161 1.021.542 2.422.464 3.115-.156.281-.234.438-.594.417-.958 0-.37-.047-.536-.24-.813-.25-.354-.755-.656-2.198-1.281-1.651-.714-2.365-1.151-3.01-1.854a4.236 4.236 0 0 1-.88-1.599c-.12-.453-.151-1.589-.057-2.042.339-1.599 1.547-2.708 3.281-3.036.563-.109 1.875-.068 2.427.068zm-7.51 1.339.01 1.307h-4.167v11.839h-2.948V17.37H7.01v-1.281c0-.714.016-1.307.036-1.323.016-.021 2.547-.031 5.62-.026l5.594.016z"></path></svg></div><div class="text--center padding-horiz--md"><h3>TypeScript</h3><p>Library is fully written in TypeScript. It exports all type definitions making is extremely easy to get started.</p></div></div><div class="col col--3"><div class="text--center"><svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 52 52" xml:space="preserve" data-fill-darkmode="1" class="featureSvg_GfXr" role="img"><path d="M20 37.5c0-.8-.7-1.5-1.5-1.5h-15c-.8 0-1.5.7-1.5 1.5v11c0 .8.7 1.5 1.5 1.5h15c.8 0 1.5-.7 1.5-1.5v-11zM8.1 22H3.2c-1 0-1.5.9-.9 1.4l8 8.3c.4.3 1 .3 1.4 0l8-8.3c.6-.6.1-1.4-.9-1.4h-4.7c0-5 4.9-10 9.9-10V6C15 6 8.1 13 8.1 22zM41.8 20.3c-.4-.3-1-.3-1.4 0l-8 8.3c-.6.6-.1 1.4.9 1.4h4.8c0 6-4.1 10-10.1 10v6c9 0 16.1-7 16.1-16H49c1 0 1.5-.9.9-1.4l-8.1-8.3zM50 3.5c0-.8-.7-1.5-1.5-1.5h-15c-.8 0-1.5.7-1.5 1.5v11c0 .8.7 1.5 1.5 1.5h15c.8 0 1.5-.7 1.5-1.5v-11z"></path></svg></div><div class="text--center padding-horiz--md"><h3>Platform agnostic</h3><p>MIDIVal integrates with browsers, Node.js and iOS and Android apps (React Native). Whatever your platform of choice, the code will look identical.</p></div></div><div class="col col--3"><div class="text--center"><svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-fill-darkmode="1" class="featureSvg_GfXr" role="img"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2c5.523 0 10 4.477 10 10 0 4.4-2.841 8.136-6.789 9.473l-.226.074-2.904-7.55A2.016 2.016 0 0 0 14 12a2 2 0 1 0-2.083 1.998l-2.903 7.549-.225-.074A10.001 10.001 0 0 1 2 12C2 6.477 6.477 2 12 2zm0 2a8 8 0 0 0-4.099 14.872l1.48-3.849A3.999 3.999 0 0 1 12 8a3.999 3.999 0 0 1 2.62 7.023c.565 1.474 1.059 2.757 1.479 3.85A8 8 0 0 0 12 4z"></path></svg></div><div class="text--center padding-horiz--md"><h3>Open Sourced</h3><p>All code is open-sourced. Contributions are welcome.</p></div></div></div></div></section><section class="packages_e3Pg"><div class="container"><h2 class="packageHeader_I19J">MIDIVal Packages</h2><div class="row"><div class="col col--4 flex__DYT"><div class="text--center"><svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 450.682 450.682" data-fill-darkmode="1" xml:space="preserve" class="packageSvg_gGYu" role="img"><path d="M40.106 448.463c61.079-24.229 72.21-68.932 70.916-130.538-.99-47.131-10.309-94.11-14.862-140.969-1.867-19.228-2.561-38.553-2.212-57.849.587-32.659 21.486-32.963 45.374-31.238 12.021 19.799 36.652 33.414 65.175 33.414h107.427V99.795h36.19V21.486h-36.19V0H204.505c-26.239 0-49.175 11.532-62.043 28.79C70.913 24 35.604 61.612 34.315 133.017c-.794 43.979 7.512 88.499 12.844 131.995 4.528 36.944 21.516 108.589-22.831 126.182-35.161 13.945-19.85 71.403 15.778 57.269zM390.686 90.161c5.178-8.187 3.695-1.238 14.775 3.477 11.085 4.719 40.792-29.178 40.792-29.178V57.007s-29.715-33.897-40.792-29.178c-11.089 4.719-9.605 11.668-14.775 3.477-5.174-8.188-16.995-9.648-16.995-9.648v-.172h-9.866v78.317h9.866c-.001 0 11.821-1.453 16.995-9.642z"></path></svg></div><div class="text--center padding-horiz--md flex__DYT flexMax_Y05C"><h3>@midival/core</h3><p class="descriptionFlex_epEX"></p><p>Core library. Includes all logic to connect and manage your MIDI Input and Outputs as well as Browser adapter (applied by default).</p><div class="buttons_KXGI"><a href="https://github.com/midival/core/" target="_blank" rel="noopener noreferrer" class="button button--secondary button--lg">GitHub</a></div><p></p></div></div><div class="col col--4 flex__DYT"><div class="text--center"><svg width="800" height="800" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" class="packageSvg_gGYu" role="img"><title>console</title><path data-fill-darkmode="1" d="M0 26.016v-20Q0 3.52 1.76 1.76T6.016 0h20q2.464 0 4.224 1.76T32 6.016v20q0 2.496-1.76 4.224T26.016 32h-20Q3.52 32 1.76 30.24T0 26.016zm4 0q0 .832.576 1.408t1.44.576h20q.8 0 1.408-.576T28 26.016v-20q0-.832-.576-1.408T26.016 4h-20q-.832 0-1.44.608T4 6.016v20zm4-8h2.016V16H8v2.016zm0-8h2.016V8H8v2.016zM10.016 16H12v-1.984h-1.984V16zm0-4H12v-1.984h-1.984V12zM12 14.016h2.016V12H12v2.016zm2.016 4H20V16h-5.984v2.016z"></path></svg></div><div class="text--center padding-horiz--md flex__DYT flexMax_Y05C"><h3>@midival/node</h3><p class="descriptionFlex_epEX"></p><p>Adapter for Node.js</p><div class="buttons_KXGI"><a href="https://github.com/midival/node/" target="_blank" rel="noopener noreferrer" class="button button--secondary button--lg">GitHub</a></div><p></p></div></div><div class="col col--4 flex__DYT"><div class="text--center"><svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="packageSvg_gGYu" role="img"><path data-fill-darkmode="1" fill-rule="evenodd" clip-rule="evenodd" d="M8 2a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H8ZM7 5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V5Zm3 12a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-4Z" fill="#000"></path></svg></div><div class="text--center padding-horiz--md flex__DYT flexMax_Y05C"><h3>@midival/react-native</h3><p class="descriptionFlex_epEX"></p><p>Adapter for React Native</p><div class="buttons_KXGI"><a href="https://github.com/midival/react-native/" target="_blank" rel="noopener noreferrer" class="button button--secondary button--lg">GitHub</a></div><p></p></div></div></div></div></section><section class="codeExamples_bhsz"><div class="container"><div class="row"><div class="col col--4"><h2>Getting Started</h2><p>The following code sets up connection with your MIDI keyboard and listens to all the notes.</p></div><div class="col col--8"><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> MIDIVal </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/core"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">MIDIVal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">connect</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">then</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">access </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> input </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">MIDIValInput</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">access</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">inputs</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> input</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">onAllNoteOn</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">event </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">console</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">log</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">"Note on"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> event</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> event</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">velocity</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div><div class="row"><div class="col col--4"><h2>Sending Messages to your synth</h2><p>MIDIVal can also be used to control your synthesiser.</p></div><div class="col col--8"><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> MIDIVal </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/core"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">MIDIVal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">connect</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">then</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">access </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> output </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">MIDIValOutput</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">access</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">outputs</span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token number">0</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> output</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">sendNoteOn</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">64</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">127</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> output</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">sendControlChange</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">5</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// increasing portamento time.</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div><div class="row"><div class="col col--4"><h2>MPE Support</h2><p>MIDIVal can both recieve and send MPE messages</p></div><div class="col col--8"><div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Recieving MPE</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Sending MPE</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> input </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">MPEMidivalInput</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">MIDIValInput</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">input</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">input</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">onLowerZoneUpdate</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">lowerZone </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">if</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token operator">!</span><span class="token plain">lowerZone</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token builtin" style="color:rgb(189, 147, 249)">console</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">log</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token string" style="color:rgb(255, 121, 198)">"Lower Zone was disabled"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">return</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> lowerZone</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">onNoteOn</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">note </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// React to note being pressed.</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> lowerZone</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">onNoteOff</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">note </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// React to note being depressed</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> lowerZone</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">onMemberPitchBend</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">bend </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// React to note being bent</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> lowerZone</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">onMemberTimbre</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">tim </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// React to notes timbre being changed</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> lowerZone</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">onMemberPressure</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">pres </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token comment" style="color:rgb(98, 114, 164)">// React to notes pressure being changed</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> MIDIVal </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/core"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> MPEMidivalOutput</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> ActiveNote </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/core/dist/mpe"</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> mpeOutput </span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">MPEMidivalOutput</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">output</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> lowerZoneSize</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">7</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> upperZoneSize</span><span class="token operator">:</span><span class="token plain"> </span><span class="token number">3</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">const</span><span class="token plain"> note</span><span class="token operator">:</span><span class="token plain"> ActiveNote </span><span class="token operator">=</span><span class="token plain"> mpeOutput</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">lowerZone</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">sendNoteOn</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">64</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token number">120</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">changeBend</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token operator">-</span><span class="token number">0.2</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">changeTimbre</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">20</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">changePressure</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">// Or if you prefer using coordinates system x,y,z</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">x </span><span class="token operator">=</span><span class="token plain"> </span><span class="token operator">-</span><span class="token number">0.2</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">y </span><span class="token operator">=</span><span class="token plain"> </span><span class="token number">20</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token plain">z </span><span class="token operator">=</span><span class="token plain"> </span><span class="token number">50</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token comment" style="color:rgb(98, 114, 164)">// when you want to send note off</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">note</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">noteOff</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div></div></div><div class="row"><div class="col col--4"><h2>Using MIDIVal with Node and React Native</h2><p>MIDIVal is compatible with modern browsers, Node.js and React Native. To configure it, simply provide corresponding adapter. The rest of the code stays the same between environments!</p></div><div class="col col--8"><div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Node.js</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">React Native</li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token comment" style="color:rgb(98, 114, 164)">// For Node.js</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> MIDIVal </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/core"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> NodeMIDIAccess </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/node"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token operator">*</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">as</span><span class="token plain"> midi </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"midi"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">MIDIVal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">configureAccessObject</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">NodeMIDIAccess</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token plain">midi</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm"><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token comment" style="color:rgb(98, 114, 164)">// For React Native</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> MIDIVal </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/core"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain"></span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> ReactNativeMIDIAccess </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">"@midival/react-native"</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain" style="display:inline-block"></span></span><br></span><span class="token-line codeLine_lJS_" style="color:#F8F8F2"><span class="codeLineNumber_Tfdd"></span><span class="codeLineContent_feaV"><span class="token plain">MIDIVal</span><span class="token punctuation" style="color:rgb(248, 248, 242)">.</span><span class="token function" style="color:rgb(80, 250, 123)">configureAccessObject</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token keyword" style="color:rgb(189, 147, 249);font-style:italic">new</span><span class="token plain"> </span><span class="token class-name">ReactNativeMIDIAccess</span><span class="token punctuation" style="color:rgb(248, 248, 242)">(</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">)</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div></div></div></div></div></div></div></section></main></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/intro">Tutorial</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/midival" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://discord.gg/5GYK4VhQQ8" target="_blank" rel="noopener noreferrer" class="footer__link-item">Discord<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/midival_ts" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://github.com/midival/core" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2023 MIDIVal. Built with Docusaurus.</div></div></div></footer></div>
<script src="/assets/js/runtime~main.40b02afe.js"></script>
<script src="/assets/js/main.b3eac7a9.js"></script>
</body>
</html>