🔗 zed-bridge Integration Examples

This page shows how to add Edit in Zed buttons to your remote site. Clicking any button below will open the file in Zed on your local workstation (as long as zed-bridge is running).

Checking if zed-bridge is running…

Example 1 — Simple anchor link

The simplest approach. Opens a small pop-up tab that closes itself after 1.8s.

Edit in Zed

<a class="edit-btn"
   href="http://localhost:7654/open?repo=mysite&file=content/posts/hello-world.md"
   target="_blank"
   rel="noopener">
  Edit in Zed
</a>

Example 2 — JavaScript pop-up (cleaner UX)

Opens a small 400×160 browser pop-up that closes itself automatically. Doesn't leave a stray tab in your tab bar.

<script>
function editInZed(repo, file) {
  const url = 'http://localhost:7654/open'
            + '?repo=' + encodeURIComponent(repo)
            + '&file=' + encodeURIComponent(file);
  window.open(url, 'zed-bridge',
    'width=420,height=160,menubar=no,toolbar=no,location=no,status=no');
}
</script>

<button onclick="editInZed('mysite', 'content/posts/hello-world.md')">
  Edit in Zed
</button>

Example 3 — Content listing table (Hugo / static site style)

A realistic file list, like you might generate from a Hugo template or a server-side script. Each row has an edit button.

File	Path	Action
Hello World	`content/posts/hello-world.md`
Solar Setup Guide	`content/posts/solar-setup.md`
LoRa Node Config	`content/docs/lora-node.md`

Example 4 — Hugo template snippet

Drop this into any Hugo list or single template. Requires {{ .File.Path }}.

{{`{{ if .File }}`}}
<button class="edit-btn"
        onclick="editInZed('mysite', '{{`{{ .File.Path }}`}}');">
  ✏️ Edit in Zed
</button>
{{`{{ end }}`}}

Add the editInZed() function once in your base layout's <head> or footer:

<script>
function editInZed(repo, file) {
  var url = 'http://localhost:7654/open'
          + '?repo=' + encodeURIComponent(repo)
          + '&file=' + encodeURIComponent(file);
  window.open(url, 'zed-bridge',
    'width=420,height=160,menubar=no,toolbar=no,location=no');
}
</script>

Tip: Wrap the button in an environment check so it only appears in development or when accessed from your own IP:

{{`{{ if eq (getenv "HUGO_ENV") "development" }}`}}
  <!-- edit button here -->
{{`{{ end }}`}}