<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](https://github.com/kliment/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](https://github.com/sir-buckyball/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](https://github.com/sir-buckyball/chrome-gcode-sender/issues/57#issuecomment-1263096900) that the same thing should be achievable using [Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/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:**

```
<html>
  <head>
    <title>Web Serial API Demo</title>
  </head>
  <body>
    <button id="connect">Connect</button>
    <script>

        var device
        let button = document.getElementById("connect")

        document.addEventListener("DOMContentLoaded", event => {
            button.addEventListener("click", async() => {
                try {

                    device = await navigator.serial.requestPort()

                    await device.open({baudRate: 9600})

                    console.log("Opened: ", device)
                    console.log("Info: ", device.getInfo())

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

                    await writer.write(encoder.encode("G28"))

                    writer.releaseLock()

                    await device.close()

                } catch (error) {

                    console.log(error)

                }
            })
        })

    </script>
  </body>
</html>

```

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](https://developer.mozilla.org/en-US/docs/Web/API/WebUSB_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://username_0.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.


---

