1"use strict";(self.webpackChunkmeshtastic=self.webpackChunkmeshtastic||[]).push([[7722],{17633:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>l});var s=i(13274),n=i(49511);const o={id:"web-client",title:"Web Client Overview",sidebar_label:"Web Client",sidebar_position:3},r=void 0,a={id:"software/web-client",title:"Web Client Overview",description:"Meshtastic Web is a Meshtastic client that runs directly in your browser.",source:"@site/docs/software/web-client.mdx",sourceDirName:"software",slug:"/software/web-client",permalink:"/docs/software/web-client",draft:!1,unlisted:!1,editUrl:"https://github.com/meshtastic/meshtastic/edit/master/docs/software/web-client.mdx",tags:[],version:"current",lastUpdatedBy:"rcarteraz",sidebarPosition:3,frontMatter:{id:"web-client",title:"Web Client Overview",sidebar_label:"Web Client",sidebar_position:3},sidebar:"Sidebar",previous:{title:"Translate",permalink:"/docs/software/apple/apple-app-translate"},next:{title:"Python CLI",permalink:"/docs/software/python/cli"}},c={},l=[{value:"Compatibility",id:"compatibility",level:2},{value:"HTTP",id:"http",level:3},{value:"Bluetooth",id:"bluetooth",level:3},{value:"Serial (USB)",id:"serial-usb",level:3},{value:"Updating",id:"updating",level:2},{value:"Self Hosting",id:"self-hosting",level:2}];function d(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",li:"li",ol:"ol",p:"p",section:"section",sup:"sup",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:"Meshtastic Web is a Meshtastic client that runs directly in your browser.\nThere are three ways of accessing the app:"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:["Served directly from an ESP32 based node via ",(0,s.jsx)(t.a,{href:"http://meshtastic.local",children:"meshtastic.local"})," or the device's IP Address.",(0,s.jsx)(t.sup,{children:(0,s.jsx)(t.a,{href:"#user-content-fn-1",id:"user-content-fnref-1","data-footnote-ref":!0,"aria-describedby":"footnote-label",children:"1"})})]}),"\n",(0,s.jsxs)(t.li,{children:["A hosted version located at ",(0,s.jsx)(t.a,{href:"https://client.meshtastic.org",children:"client.meshtastic.org"}),"."]}),"\n",(0,s.jsx)(t.li,{children:"Hosting it yourself."}),"\n"]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"WebUI",src:i(36695).A+"",width:"2229",height:"1681"})}),"\n",(0,s.jsx)(t.h2,{id:"compatibility",children:"Compatibility"}),"\n",(0,s.jsxs)(t.p,{children:["The application will work in all major browsers, but specific functionality is limited in some cases. For the best experience we recommend using a Chromium based browser such as ",(0,s.jsx)(t.a,{href:"https://www.google.com/chrome",children:"Google Chrome"})," or ",(0,s.jsx)(t.a,{href:"https://www.microsoft.com/en-us/edge",children:"Microsoft Edge"}),"."]}),"\n",(0,s.jsx)(t.h3,{id:"http",children:"HTTP"}),"\n",(0,s.jsx)(t.p,{children:"This method of connecting is limited to esp32 devices."}),"\n",(0,s.jsx)(t.admonition,{type:"caution",children:(0,s.jsxs)(t.p,{children:["When using the ",(0,s.jsx)(t.a,{href:"https://client.meshtastic.org",children:"hosted"})," version of the application, all traffic must be served over HTTPS.\nMeshtastic nodes generate self-signed certificates, and you must inform your browser that you wish to trust the aforementioned certificate.\nThis can be done by first accessing your node directly via your browser: ",(0,s.jsx)(t.code,{children:"https://NODE_IP_ADDRESS/"})," replacing ",(0,s.jsx)(t.code,{children:"NODE_IP_ADDRESS"})," with the IP address of your node.\nThis can be found on the screen of the device, via your router's DHCP lease page or serial console."]})}),"\n",(0,s.jsxs)(t.p,{children:["You can accessing your device over HTTP after you set up your ",(0,s.jsx)(t.a,{href:"/docs/configuration/radio/network",children:"Network Connection"})]}),"\n",(0,s.jsx)(t.h3,{id:"bluetooth",children:"Bluetooth"}),"\n",(0,s.jsxs)(t.p,{children:["Bluetooth support is governed by the availability of the ",(0,s.jsx)(t.a,{href:"https://web.dev/bluetooth",children:"Web Bluetooth API"})," as illustrated below. Support is primarily available in Chromium based browsers."]}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://caniuse.bitsofco.de/image/web-bluetooth.png",alt:"Web Bluetooth compatibility matrix"})}),"\n",(0,s.jsx)(t.h3,{id:"serial-usb",children:"Serial (USB)"}),"\n",(0,s.jsxs)(t.p,{children:["The method with the least platform support, which uses the ",(0,s.jsx)(t.a,{href:"https://web.dev/serial",children:"Web Serial API"}),", allows us to connect directly to a Meshtastic node over USB and access it from directly within your browser."]}
1),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{src:"https://caniuse.bitsofco.de/image/web-serial.png",alt:"Web Serial compatibility matrix"})}),"\n",(0,s.jsx)(t.h2,{id:"updating",children:"Updating"}),"\n",(0,s.jsx)(t.p,{children:"The web interface is included in firmware releases. When a new firmware version is released, the latest WebUI will be automatically bundled."}),"\n",(0,s.jsx)(t.h2,{id:"self-hosting",children:"Self Hosting"}),"\n",(0,s.jsxs)(t.p,{children:["The source code for the WebUI can be found on our ",(0,s.jsx)(t.a,{href:"https://github.com/meshtastic/web",children:"GitHub"})]}),"\n",(0,s.jsx)(t.p,{children:"Instructions for building and running the project can be found in the repo's readme."}),"\n",(0,s.jsxs)(t.section,{"data-footnotes":!0,className:"footnotes",children:[(0,s.jsx)(t.h2,{className:"sr-only",id:"footnote-label",children:"Footnotes"}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{id:"user-content-fn-1",children:["\n",(0,s.jsxs)(t.p,{children:['If multiple Meshtastic devices are serving the web client on the same local area network, these devices can be reached by adding a suffix of "-2" (or higher numbers if there are additional devices) to the local URL. Example ',(0,s.jsx)(t.code,{children:"meshtastic-2.local"})," or ",(0,s.jsx)(t.code,{children:"meshtastic-3.local"}),". ",(0,s.jsx)(t.a,{href:"#user-content-fnref-1","data-footnote-backref":"","aria-label":"Back to reference 1",className:"data-footnote-backref",children:"\u21a9"})]}),"\n"]}),"\n"]}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},36695:(e,t,i)=>{i.d(t,{A:()=>s});const s=i.p+"assets/images/webUI-edcfc22f05538225d028a3c8f08ead37.webp"},49511:(e,t,i)=>{i.d(t,{R:()=>r,x:()=>a});var s=i(79474);const n={},o=s.createContext(n);function r(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:r(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.