diff --git a/.github/assets/api.png b/.github/assets/api.png index d3b5c83..9dd03d8 100644 Binary files a/.github/assets/api.png and b/.github/assets/api.png differ diff --git a/.github/assets/demo.gif b/.github/assets/demo.gif deleted file mode 100644 index 0de2313..0000000 Binary files a/.github/assets/demo.gif and /dev/null differ diff --git a/.github/assets/hero.gif b/.github/assets/hero.gif new file mode 100644 index 0000000..9042319 Binary files /dev/null and b/.github/assets/hero.gif differ diff --git a/.github/assets/home.png b/.github/assets/home.png index ba1a0d2..a43c10f 100644 Binary files a/.github/assets/home.png and b/.github/assets/home.png differ diff --git a/.github/assets/mocks.png b/.github/assets/mocks.png new file mode 100644 index 0000000..ee64896 Binary files /dev/null and b/.github/assets/mocks.png differ diff --git a/.github/assets/network.png b/.github/assets/network.png index fe9a8eb..3458c7e 100644 Binary files a/.github/assets/network.png and b/.github/assets/network.png differ diff --git a/.github/assets/viewport.png b/.github/assets/viewport.png index c72074b..3a208c6 100644 Binary files a/.github/assets/viewport.png and b/.github/assets/viewport.png differ diff --git a/README.md b/README.md index ef9e7e7..73ea919 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ ZYNLEX is a lightweight browser for local web development on Windows: the browse [![Release](https://img.shields.io/github/v/release/webtools-dotcom/Zynlex)](https://github.com/webtools-dotcom/Zynlex/releases/latest) [![Windows](https://img.shields.io/badge/Windows-10%20%7C%2011-blue)](https://github.com/webtools-dotcom/Zynlex/releases/latest) -Opening a detected dev server, watching the network log fill, and switching to a phone viewport +A tour of ZYNLEX: it lists your local dev servers, logs a dashboard's API requests, mocks one as a 500 so the dashboard shows its error state, renders the page on an iPhone viewport, and calls the API from the built-in client -Text hard to read? There's a [1080p version](https://github.com/webtools-dotcom/Zynlex/releases/download/v0.9.0/high_quality.mp4) of the same clip. +[Watch the full tour in 1080p](https://webtools-dotcom.github.io/Zynlex/assets/zynlex-tour.mp4) · [Website](https://webtools-dotcom.github.io/Zynlex/) ### [Download for Windows →](https://github.com/webtools-dotcom/Zynlex/releases/latest) @@ -100,19 +100,23 @@ pnpm tauri dev Your servers, on the new tab page: -New tab page listing three detected local dev servers +New tab page listing three detected local dev servers: a dashboard, its API and a docs site Network log. Capture goes through WebView2's native COM API, not a proxy, so there's nothing to configure and no certificate to trust. -Network panel showing 231 captured requests with filters and one request expanded +Network panel beside a dashboard, with the /api/orders request open and its JSON response pretty-printed + +Mock responses. Click "Mock this" on a request, make it a 500, and see how the page handles it: + +A mock rule returning 500 for /api/orders, and the dashboard showing its Couldn't load orders error A device viewport at 1:1, next to the chrome: -A Galaxy S26 Ultra viewport at 412x891 rendering GitHub +The dashboard rendered in an iPhone 17 Pro viewport at 402x874 API client, saved per workspace: -API tester with a saved collection and a JSON response +API tester calling localhost:8000/api/users with the JSON response below ## Limitations diff --git a/site/assets/api.webp b/site/assets/api.webp index d381bdd..2ee61b9 100644 Binary files a/site/assets/api.webp and b/site/assets/api.webp differ diff --git a/site/assets/home.webp b/site/assets/home.webp index fca37aa..1cce034 100644 Binary files a/site/assets/home.webp and b/site/assets/home.webp differ diff --git a/site/assets/mocks.webp b/site/assets/mocks.webp index 7412ef4..e1a6e29 100644 Binary files a/site/assets/mocks.webp and b/site/assets/mocks.webp differ diff --git a/site/assets/network.webp b/site/assets/network.webp index 53b7d2a..20acfb1 100644 Binary files a/site/assets/network.webp and b/site/assets/network.webp differ diff --git a/site/assets/og.png b/site/assets/og.png index a7ce561..967ad0e 100644 Binary files a/site/assets/og.png and b/site/assets/og.png differ diff --git a/site/assets/tour-poster.jpg b/site/assets/tour-poster.jpg new file mode 100644 index 0000000..9d09449 Binary files /dev/null and b/site/assets/tour-poster.jpg differ diff --git a/site/assets/viewport.webp b/site/assets/viewport.webp index 6f035d1..d1cec85 100644 Binary files a/site/assets/viewport.webp and b/site/assets/viewport.webp differ diff --git a/site/assets/zynlex-tour.mp4 b/site/assets/zynlex-tour.mp4 new file mode 100644 index 0000000..eebd7b3 Binary files /dev/null and b/site/assets/zynlex-tour.mp4 differ diff --git a/site/index.html b/site/index.html index be5eae6..b4b97e9 100644 --- a/site/index.html +++ b/site/index.html @@ -128,6 +128,8 @@ section > .wrap > p.intro { color: var(--text-2); max-width: 62ch; margin: 0; } /* Text above, screenshot full width below — at half width the UI is unreadable. */ +.tour { padding: 56px 0 96px; } +.tour video { display: block; width: 100%; height: auto; margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .feature { margin-top: 96px; } .feature .copy { display: grid; gap: 4px 56px; margin-bottom: 28px; } @media (min-width: 900px) { @@ -235,6 +237,16 @@

The minimal browser for web developers.

+
+
+
See it work · real footage
+ +
+
+
What it's for
@@ -246,7 +258,7 @@

Four questions you ask all day, answered in one window.

Which port is that on?

Your servers, on the new tab page

ZYNLEX scans the usual dev ports every few seconds, reads each page's title and shows what's running. Vite, Next.js, Astro, Storybook, Django, whatever. Add your own ports in settings.

  • Label and pin the ones you care about
  • Shows a server as stopped when it goes down
-
The new tab page listing three detected local dev servers
+
The new tab page listing three detected local dev servers: a dashboard, its API and a docs site
@@ -254,7 +266,7 @@

Four questions you ask all day, answered in one window.

What did that request return?

A network log per tab

Every request with method, status, type, size and timing, captured through WebView2's own API. There's no proxy to route through and no certificate to trust.

  • Filter by errors, API calls or slow requests
  • Response headers and bodies, copy as cURL or fetch()
-
The network panel with captured requests and one expanded
+
The network panel beside a dashboard, with the /api/orders request open and its JSON response pretty-printed
@@ -281,7 +293,7 @@

Mock any response. No proxy.

-
The Mock Responses panel with a rule returning a 500 error to jsonplaceholder
+
A mock rule returning 500 for /api/orders, and the dashboard showing its Couldn't load orders error
@@ -289,7 +301,7 @@

Mock any response. No proxy.

How does it look on a phone?

Devices at their real size

Pick a phone or tablet and the page renders at its true width, pixel ratio and user agent, with touch. One device at a time, at 1:1, not a shrunken thumbnail.

  • Current iPhone, Pixel, Galaxy and iPad sizes
  • Server-side device detection sees the right client
-
A Galaxy phone viewport rendering GitHub at 412 by 891
+
The dashboard rendered in an iPhone 17 Pro viewport at 402 by 874
@@ -297,7 +309,7 @@

Mock any response. No proxy.

And the rest

An API client that ignores CORS

Requests run through Rust, so the page's CORS rules don't apply. Saved collections and cURL import, per project. Next to it: header rules per URL pattern, an inspector for meta tags, Open Graph and HttpOnly cookies, a JWT decoder, Base64 and a user-agent switcher.

  • Workspaces keep each project's tabs, rules and requests apart
  • Ctrl+K finds all of it
-
The API tester with a saved collection and a JSON response
+
The API tester calling localhost:8000/api/users with the JSON response below