<p>Finally, got it! I was very close, but two changes needed to be made to the above code for the example to work.</p>
<ol>
<li><p>The <code>baudRate</code> needed to be changed to <code>115200</code>. This value can vary from printer to printer but <code>115200</code> is fairly common, and thus a good default. If you find it's not working for you try looking up the recommended <code>baudRate</code> for your printer/firmware version.</p>
</li>
<li><p>I needed to add <code>\n</code> to the end of my G-code string. In this example there was only one command, <code>G28\n</code> but if you want multiple commands in a single string you will need to add <code>\n</code> after each one.</p>
</li>
</ol>
<p>Awesome!!! It is possible to send G-code to a printer from a web browser with just a few lines of JavaScript!</p>
<p><strong>Update:</strong> If anyone is interested I built <a href="https://jgphilpott.github.io/polyslice/serial/browser/sender.html" rel="nofollow noreferrer">this simple terminal-style app</a>. It should work with any <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility" rel="nofollow noreferrer">compatible browser</a> and is also usable offline if you clone the repo and open the <code>sender.html</code> file in your browser.</p>

CC BY-SA 4.0
2024-03-04T13:16:17.160Z
2024-03-23T17:58:09.460Z
2024-03-23T17:58:09.460Z
jgphilpott
<p>I recently started experimenting with sending G-code to my printer via USB cable. I downloaded <a href="https://github.com/kliment/Printrun" rel="nofollow noreferrer">Printrun</a> and it works great! <strong>However, I want to be able to do this from my web browser because the app im developing is web based.</strong></p>
<p>I found this Chrome app called <a href="https://github.com/sir-buckyball/chrome-gcode-sender" rel="nofollow noreferrer">chrome-gcode-sender</a> that does this but it unfortunately no longer works because Google sadly ended support for all Chrome apps in June 2022.</p>
<p>The maker of this app <a href="https://github.com/sir-buckyball/chrome-gcode-sender/issues/57#issuecomment-1263096900" rel="nofollow noreferrer">suggested on GitHub</a> that the same thing should be achievable using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API" rel="nofollow noreferrer">Web Serial API</a>. I have been trying to get this to work for almost two days now but with little success. I found several tutorials online about how to use Web Serial API but nothing for this specific use case. <strong>Here is a sample of the code I have developed so far, just a simple HTML document with some vanilla JavaScript:</strong></p>
<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Web Serial API Demo&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button id=&quot;connect&quot;&gt;Connect&lt;/button&gt;
    &lt;script&gt;

        var device
        let button = document.getElementById(&quot;connect&quot;)

        document.addEventListener(&quot;DOMContentLoaded&quot;, event =&gt; {
            button.addEventListener(&quot;click&quot;, async() =&gt; {
                try {

                    device = await navigator.serial.requestPort()

                    await device.open({baudRate: 9600})

                    console.log(&quot;Opened: &quot;, device)
                    console.log(&quot;Info: &quot;, device.getInfo())

                    const encoder = new TextEncoder()
                    const writer = device.writable.getWriter()

                    await writer.write(encoder.encode(&quot;G28&quot;))

                    writer.releaseLock()

                    await device.close()

                } catch (error) {

                    console.log(error)

                }
            })
        })

    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>When I click the 'Connect' button and select the device I want it appears to connect fine. However, when I try to send a simple G-code like <code>G28</code> (<em>autohome</em>) the printer does nothing. If anyone has an idea how I could get this working please let me know! Im also 100 % open to an alternative approach! <strong>The main idea is just to be able to send G-code from a browser to a printer.</strong></p>
<p><strong>Notes:</strong></p>
<ul>
<li>I've also tried experimenting with <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_API" rel="nofollow noreferrer">Web USB API</a> but no luck here as well.</li>
</ul>

<g-code><creality-ender-5><usb><serial-connection>
Can I use Web Serial API to send G-code to my Ender 5 Pro?
jgphilpott
# Can I use Web Serial API to send G-code to my Ender 5 Pro?

(Asked by: username_0 on 2024-03-04)

I recently started experimenting with sending G-code to my printer via USB cable. I downloaded Printrun and it works great! However, I want to be able to do this from my web browser because the app im developing is web based.
I found this Chrome app called chrome-gcode-sender that does this but it unfortunately no longer works because Google sadly ended support for all Chrome apps in June 2022.
The maker of this app suggested on GitHub that the same thing should be achievable using Web Serial API. I have been trying to get this to work for almost two days now but with little success. I found several tutorials online about how to use Web Serial API but nothing for this specific use case. Here is a sample of the code I have developed so far, just a simple HTML document with some vanilla JavaScript:

  
    Web Serial API Demo
  
  
    Connect
    
  


When I click the 'Connect' button and select the device I want it appears to connect fine. However, when I try to send a simple G-code like G28 (autohome) the printer does nothing. If anyone has an idea how I could get this working please let me know! Im also 100 % open to an alternative approach! The main idea is just to be able to send G-code from a browser to a printer.
Notes:

I've also tried experimenting with Web USB API but no luck here as well.

**Tags:** g-code, creality-ender-5, usb, serial-connection

---

## 1 answers

### Answer by username_0 on 2024-03-04. Score: 3 | Accepted answer

Finally, got it! I was very close, but two changes needed to be made to the above code for the example to work.

1. The `baudRate` needed to be changed to `115200`. This value can vary from printer to printer but `115200` is fairly common, and thus a good default. If you find it's not working for you try looking up the recommended `baudRate` for your printer/firmware version.
2. I needed to add `\n` to the end of my G-code string. In this example there was only one command, `G28\n` but if you want multiple commands in a single string you will need to add `\n` after each one.

Awesome!!! It is possible to send G-code to a printer from a web browser with just a few lines of JavaScript!

**Update:** If anyone is interested I built [this simple terminal-style app](https://jgphilpott.github.io/polyslice/serial/browser/sender.html). It should work with any [compatible browser](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API#browser_compatibility) and is also usable offline if you clone the repo and open the `sender.html` file in your browser.


---

