This post is introducing a way to run Go snippets on websites. Which leveraged the official Go Playground service at


Let’s take a quick look at the two demos below. You can click the Run button to see the output of the corresponding program. Click Try it yourself or Share button to open the code in the official Go Playground to further edit/test the code on your hand.

Demo 1. Hello World

package main

func main() {
	println("hello world")

Demo 2. Import third-party package from GitHub

package main

import (

	"" // 3rd-party packages: will be auto-downloaded

type ListUsersInput struct {
	Page    int64  `in:"query=page;default=1"`
	PerPage int64  `in:"query=per_page;default=20"`
	Token   string `in:"header=x-access-token;required"`

func ListUsers(rw http.ResponseWriter, r *http.Request) {
	input := r.Context().Value(httpin.Input).(*ListUsersInput)
	fmt.Printf("input: %#v\n", input)

func main() {
	r, _ := http.NewRequest("GET", "/?page=3", nil)
	r.Header.Set("X-Access-Token", "secret...")
	handler := alice.New(
	rw := httptest.NewRecorder()
	handler.ServeHTTP(rw, r)

How it works?

Goplay Arch

Since we were not able to make AJAX requests directly to because of CORS issue. I setted up a reverse proxy, which works as a downstream of It is responsible to make requests on behalf of the clients to and return the response back to the clients.

I also implemented a simple JS SDK @ggicci/goplay to easily interact with the go playground service. Use it on your page to connect to your own reverse proxy and run go snippets.

Set up a reverse proxy to

with Caddy: {
    header {
      access-control-allow-origin      ""
      access-control-allow-headers     "content-type"
      access-control-allow-methods     "OPTIONS,HEAD,GET,POST"

    # only proxy the playground API of
    route /_/* {
      reverse_proxy {
        header_up Host

    respond 404

Use @ggicci/goplay

Here’s a quick view demonstrating how to use @ggicci/goplay.

  <!-- the container where to show the output -->
  <div id="goplay-output"></div>
  <button onclick="run()">Run Hello World</button>

  <script type="module">
    import { GoPlayProxy } from "";
    const GOPLAY_PROXY_URL = ""; // use your own proxy URL
    const goplay = new GoPlayProxy(GOPLAY_PROXY_URL);

    function run() {
      const goCodeSnippet = `
        package main
        func main() {
          println("hello world")

    } = run; // make it visible to the Run button

The dead simple SDK just implemented a class GoPlayProxy with 3 primary APIs:

class GoPlayProxy {
  // CTOR: specify a proxy url to connect
  constructor(public proxyUrl: string = '/goplay') {}
  // compile source code and get JSON response
  public async compile(sourceCode: string, goVersion?: CompilerVersion): Promise<CompilerResponse>
  // same as `compile`, but renders the JSON response as an `HTMLElement` into the specified container
  public async renderCompile(container: HTMLElement, sourceCode: string, goVersion?: CompilerVersion): Promise<void>
  // get the share URL of the source code
  public async share(sourceCode: string, goVersion?: CompilerVersion): Promise<string>

Visit for more details.

Hugo Shortcode goplay

If your are using hugo to generate your website. This section should be helpful to you.

By using the goplay shortcode, you can easily turn your Go code block into a Go playground. Take the following example, in your markdown file, just wrap the code block between {{% goplay %}} and {{% /goplay %}}.

## Sample Code

{{% goplay %}}

package main

func main() {
  println("hello world")

{{% /goplay %}}

The latest code of goplay - hugo shortcode used by this site can be found here. Save it under your hugo directory correspondingly. Typically it is ${YourHugoSiteRoot}/layouts/shortcodes/goplay.html.

Who is using @ggicci/goplay?