diff --git a/.changeset/breezy-emus-smile.md b/.changeset/breezy-emus-smile.md
new file mode 100644
index 0000000..c120812
--- /dev/null
+++ b/.changeset/breezy-emus-smile.md
@@ -0,0 +1,5 @@
+---
+'intrepid-ibex': minor
+---
+
+gnome browser/epiphany for lexicon schema browsing
diff --git a/TODO.md b/TODO.md
index d87eb7e..82d2f72 100644
--- a/TODO.md
+++ b/TODO.md
@@ -85,13 +85,13 @@ Every new surface should feel like a GNOME 2 app that happens to speak `at://`.
 - [ ] **Network Servers**
   - Inspect public PDS host info, version, available domains, and repo list.
   - Link repos into Nautilus and open server firehose views in System Monitor.
-- [ ] **Web Browser**
+- [x] **Web Browser**
   - GNOME-style browser for reading Lexicon schemas and resolution traces.
   - Accept NSIDs, `at://` lexicon records, and HTTPS URLs in an address bar.
   - Parse NSIDs into domain authority, authority domain, name segment, and optional
     fragment.
-  - For live lookup, resolve the NSID authority domain through DNS from the browser,
-    likely via DNS-over-HTTPS rather than a backend resolver.
+  - For live lookup, use the public lexdns API to resolve the NSID authority domain
+    through DNS-over-HTTPS.
   - Use the goat/Indigo Lexicon publication convention: read `did=...` TXT records
     from the NSID authority domain.
   - Show a resolution trace with each attempted DNS name, record type, answer, fetch URL,
@@ -116,7 +116,7 @@ Every new surface should feel like a GNOME 2 app that happens to speak `at://`.
 - [ ] Add Archive Manager.
 - [ ] Add Eye of GNOME blob browsing and previews.
 - [ ] Add Label Browser.
-- [ ] Add Web Browser for Lexicon viewing.
+- [x] Add Web Browser for Lexicon viewing.
 - [ ] Add Log Viewer.
 - [ ] Add Network Servers.
 
diff --git a/src/lib/atproto/lexicon.svelte.ts b/src/lib/atproto/lexicon.svelte.ts
new file mode 100644
index 0000000..e7ec27e
--- /dev/null
+++ b/src/lib/atproto/lexicon.svelte.ts
@@ -0,0 +1,102 @@
+import { normalizeLexiconInput, resolveLexicon, type LexiconTrace, type ResolvedLexicon } from './lexicon';
+
+class LexiconBrowserState {
+	address = $state('');
+	activeInput = $state('');
+	result = $state<ResolvedLexicon | null>(null);
+	error = $state<string | null>(null);
+	errorCode = $state<string | null>(null);
+	errorTrace = $state<LexiconTrace | null>(null);
+	isLoading = $state(false);
+	history = $state<string[]>([]);
+	historyIndex = $state(-1);
+
+	get activeNsid() {
+		return this.result?.nsid ?? this.activeInput;
+	}
+
+	get canGoBack() {
+		return this.historyIndex > 0;
+	}
+
+	get canGoForward() {
+		return this.historyIndex >= 0 && this.historyIndex < this.history.length - 1;
+	}
+
+	async open(input: string, options: { recordHistory?: boolean } = {}) {
+		const recordHistory = options.recordHistory ?? true;
+		const normalized = normalizeLexiconInput(input);
+		this.address = normalized;
+		this.activeInput = normalized;
+		this.isLoading = true;
+		this.error = null;
+		this.errorCode = null;
+		this.errorTrace = null;
+
+		try {
+			const resolved = await resolveLexicon(normalized);
+			this.result = resolved;
+			this.address = resolved.nsid;
+
+			if (recordHistory) this.remember(resolved.nsid);
+		} catch (unknownError) {
+			this.result = null;
+
+			if (unknownError instanceof Error) {
+				const details = unknownError as Error & { code?: unknown; trace?: unknown };
+				this.error = unknownError.message;
+				this.errorCode = details.code ? String(details.code) : 'lookup_error';
+				this.errorTrace = details.trace ? (details.trace as LexiconTrace) : null;
+			} else {
+				this.error = String(unknownError);
+				this.errorCode = 'lookup_error';
+			}
+		} finally {
+			this.isLoading = false;
+		}
+	}
+
+	async reload() {
+		const target = this.activeNsid || this.address;
+		if (!target) return;
+
+		await this.open(target, { recordHistory: false });
+	}
+
+	async goBack() {
+		if (!this.canGoBack) return;
+
+		this.historyIndex -= 1;
+		const target = this.history[this.historyIndex];
+		if (target) await this.open(target, { recordHistory: false });
+	}
+
+	async goForward() {
+		if (!this.canGoForward) return;
+
+		this.historyIndex += 1;
+		const target = this.history[this.historyIndex];
+		if (target) await this.open(target, { recordHistory: false });
+	}
+
+	clear() {
+		this.address = '';
+		this.activeInput = '';
+		this.result = null;
+		this.error = null;
+		this.errorCode = null;
+		this.errorTrace = null;
+		this.isLoading = false;
+	}
+
+	private remember(nsid: string) {
+		if (this.history[this.historyIndex] === nsid) return;
+
+		const nextHistory = this.history.slice(0, this.historyIndex + 1);
+		nextHistory.push(nsid);
+		this.history = nextHistory.slice(-25);
+		this.historyIndex = this.history.length - 1;
+	}
+}
+
+export const lexiconBrowser = new LexiconBrowserState();
diff --git a/src/lib/atproto/lexicon.test.ts b/src/lib/atproto/lexicon.test.ts
new file mode 100644
index 0000000..041c5a4
--- /dev/null
+++ b/src/lib/atproto/lexicon.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { lexiconApiUrl, lexiconPath, normalizeLexiconInput } from './lexicon';
+
+describe('lexicon helpers', () => {
+	it('normalizes NSID input', () => {
+		expect(normalizeLexiconInput(' app.bsky.feed.post ')).toBe('app.bsky.feed.post');
+	});
+
+	it('normalizes at:// lexicon records', () => {
+		expect(normalizeLexiconInput('at://did:plc:abc/com.atproto.lexicon.schema/app.bsky.feed.post#main')).toBe(
+			'app.bsky.feed.post'
+		);
+	});
+
+	it('normalizes lexdns and app route URLs', () => {
+		expect(normalizeLexiconInput('https://lex.desertthunder.dev/api/resolve/com.atproto.repo.getRecord')).toBe(
+			'com.atproto.repo.getRecord'
+		);
+		expect(normalizeLexiconInput('https://ibex.example/lexicons/app.bsky.actor.profile')).toBe(
+			'app.bsky.actor.profile'
+		);
+	});
+
+	it('builds lexdns and app URLs', () => {
+		expect(lexiconApiUrl('app.bsky.feed.post')).toBe('https://lex.desertthunder.dev/api/resolve/app.bsky.feed.post');
+		expect(lexiconPath('app.bsky.feed.post')).toBe('/lexicons/app.bsky.feed.post');
+	});
+});
diff --git a/src/lib/atproto/lexicon.ts b/src/lib/atproto/lexicon.ts
new file mode 100644
index 0000000..c2cb09d
--- /dev/null
+++ b/src/lib/atproto/lexicon.ts
@@ -0,0 +1,163 @@
+export const LEXDNS_API_BASE = 'https://lex.desertthunder.dev/api/resolve';
+
+export type ParsedLexiconNsid = { nsid: string; authority: string; domain: string; name: string; dnsName: string };
+
+export type LexiconDocument = {
+	$type?: string;
+	lexicon: 1;
+	id: string;
+	defs: Record<string, LexiconDefinition>;
+	[key: string]: unknown;
+};
+
+export type LexiconDefinition = {
+	type?: string;
+	description?: string;
+	key?: string;
+	required?: string[];
+	record?: LexiconObject;
+	parameters?: LexiconObject;
+	input?: LexiconEncoding;
+	output?: LexiconEncoding;
+	properties?: Record<string, LexiconProperty>;
+	refs?: string[];
+	ref?: string;
+	knownValues?: string[];
+	[key: string]: unknown;
+};
+
+export type LexiconObject = {
+	type?: string;
+	required?: string[];
+	properties?: Record<string, LexiconProperty>;
+	[key: string]: unknown;
+};
+
+export type LexiconEncoding = { encoding?: string; schema?: LexiconObject; [key: string]: unknown };
+
+export type LexiconProperty = {
+	type?: string;
+	description?: string;
+	format?: string;
+	ref?: string;
+	refs?: string[];
+	items?: LexiconProperty;
+	knownValues?: string[];
+	required?: string[];
+	properties?: Record<string, LexiconProperty>;
+	[key: string]: unknown;
+};
+
+export type LexiconTrace = {
+	dnsName: string | null;
+	txtRecords: Array<{ name: string; data: string; ttl?: number }>;
+	selectedDid: string | null;
+	didDocument: { url: string | null; status: number | null };
+	pdsEndpoint: string | null;
+	repoGetRecord: { url: string | null; status: number | null };
+	final: { success: boolean; code?: string; message: string };
+};
+
+export type ResolvedLexicon = {
+	version: string;
+	nsid: string;
+	parsed: ParsedLexiconNsid;
+	hash: string;
+	fetchedAt: string;
+	source: { name: string; url: string };
+	lexicon: LexiconDocument;
+	cache: 'hit' | 'miss';
+	trace: LexiconTrace;
+	_links: { self: { href: string }; source: { href: string } };
+};
+
+export type LexiconApiError = { version?: string; error: { code: string; message: string }; trace?: LexiconTrace };
+
+export class LexiconResolveError extends Error {
+	constructor(
+		readonly status: number,
+		readonly code: string,
+		message: string,
+		readonly trace: LexiconTrace | null
+	) {
+		super(message);
+		this.name = 'LexiconResolveError';
+	}
+}
+
+export async function resolveLexicon(input: string, fetcher: typeof fetch = fetch): Promise<ResolvedLexicon> {
+	const nsid = normalizeLexiconInput(input);
+	const response = await fetcher(lexiconApiUrl(nsid), { headers: { accept: 'application/json' } });
+	const body = (await response.json()) as ResolvedLexicon | LexiconApiError;
+
+	if (!response.ok || isLexiconApiError(body)) {
+		const apiError = isLexiconApiError(body)
+			? body.error
+			: { code: 'upstream_error', message: `Lexicon lookup failed with ${response.status}` };
+		throw new LexiconResolveError(response.status, apiError.code, apiError.message, body.trace ?? null);
+	}
+
+	return body;
+}
+
+export function lexiconApiUrl(nsid: string) {
+	return `${LEXDNS_API_BASE}/${encodeURIComponent(nsid)}`;
+}
+
+export function lexiconPath(input: string) {
+	return `/lexicons/${encodeURIComponent(normalizeLexiconInput(input))}`;
+}
+
+export function normalizeLexiconInput(input: string) {
+	const trimmed = input.trim();
+	if (!trimmed) throw new Error('Enter an NSID or Lexicon record URL.');
+
+	const withoutHash = trimmed.split('#', 1)[0] ?? trimmed;
+
+	if (withoutHash.startsWith('at://')) {
+		const nsid = nsidFromAtUri(withoutHash);
+		if (nsid) return nsid;
+	}
+
+	if (/^https?:\/\//i.test(withoutHash)) {
+		const nsid = nsidFromUrl(withoutHash);
+		if (nsid) return nsid;
+	}
+
+	const nsid = withoutHash.replace(/^\/lexicons\//, '');
+	return decodeURIComponent(nsid);
+}
+
+function nsidFromAtUri(input: string) {
+	const withoutProtocol = input.slice('at://'.length);
+	const [, collection, rkey] = withoutProtocol.split('/');
+	if (collection === 'com.atproto.lexicon.schema' && rkey) return decodeURIComponent(rkey);
+	return null;
+}
+
+function nsidFromUrl(input: string) {
+	try {
+		const url = new URL(input);
+		const apiMatch = url.pathname.match(/\/api\/resolve\/([^/]+)$/);
+		if (apiMatch?.[1]) return decodeURIComponent(apiMatch[1]);
+
+		const routeMatch = url.pathname.match(/\/lexicons\/([^/]+)$/);
+		if (routeMatch?.[1]) return decodeURIComponent(routeMatch[1]);
+
+		const queryNsid = url.searchParams.get('nsid');
+		if (queryNsid) return queryNsid;
+	} catch {
+		return null;
+	}
+
+	return null;
+}
+
+function isLexiconApiError(value: unknown): value is LexiconApiError {
+	return (
+		typeof value === 'object' &&
+		value !== null &&
+		'error' in value &&
+		typeof (value as LexiconApiError).error?.message === 'string'
+	);
+}
diff --git a/src/lib/atproto/routes.ts b/src/lib/atproto/routes.ts
index e1deabb..dd1335e 100644
--- a/src/lib/atproto/routes.ts
+++ b/src/lib/atproto/routes.ts
@@ -6,6 +6,8 @@ export const identityPath = (did: string) => `${repoPath(did)}/identity`;
 
 export const blobsPath = (did: string) => `${repoPath(did)}/blobs`;
 
+export const lexiconsPath = () => '/lexicons';
+
 export function blobPath(did: string, cid: string) {
 	return `${blobsPath(did)}/${encodeURIComponent(cid)}`;
 }
diff --git a/src/lib/components/CollectionBrowser.svelte b/src/lib/components/CollectionBrowser.svelte
index 3d5eaf9..3753253 100644
--- a/src/lib/components/CollectionBrowser.svelte
+++ b/src/lib/components/CollectionBrowser.svelte
@@ -7,6 +7,7 @@
 	import { accountSetup } from '$lib/atproto/setup.svelte';
 	import { repoBrowser } from '$lib/atproto/repo.svelte';
 	import { collectionPath, identityPath, recordPath } from '$lib/atproto/routes';
+	import { lexiconPath } from '$lib/atproto/lexicon';
 	import { isRecordValue } from '$lib/atproto/types';
 	import type { CollectionSummary, RepoRecordSummary } from '$lib/atproto/types';
 	import { SvelteMap } from 'svelte/reactivity';
@@ -17,7 +18,6 @@
 	let collectionFilter = $state('');
 	let reverseRecords = $state(false);
 	let previewField = $state<PreviewField>('summary');
-
 	const filteredCollections = $derived.by(() => {
 		const query = collectionFilter.trim().toLowerCase();
 		if (!query) return repoBrowser.collections;
@@ -27,11 +27,13 @@
 			return collection.name.toLowerCase().includes(query) || label.includes(query);
 		});
 	});
+
 	const collectionGroups = $derived.by(() => groupCollections(filteredCollections));
 	const visibleRecords = $derived.by(() => {
 		if (!reverseRecords) return repoBrowser.records;
 		return [...repoBrowser.records].reverse();
 	});
+
 	const identity = $derived(repoSession.identity ?? (page.route.id === '/browse' ? accountSetup.identity : null));
 	const canUseAsDefault = $derived(Boolean(identity && identity.did !== accountSetup.identity?.did));
 	type RepoPathname = `/repos/${string}`;
@@ -64,7 +66,6 @@
 
 	function openRecord(record: RepoRecordSummary) {
 		repoBrowser.selectedRecord = record;
-
 		if (identity) {
 			navigate(recordPath({ did: identity.did, collection: record.collection, rkey: record.rkey }));
 		}
@@ -72,25 +73,30 @@
 
 	function openIdentityInspector() {
 		if (!identity) return;
-
 		navigate(identityPath(identity.did));
 	}
 
+	function openCollectionSchema() {
+		if (!repoBrowser.selectedCollection) return;
+		void navigateTo(resolve(lexiconPath(repoBrowser.selectedCollection) as `/lexicons/${string}`), {
+			keepFocus: true,
+			noScroll: true
+		});
+	}
+
 	function updatePageSize(event: Event) {
 		const select = event.currentTarget;
-
 		if (!(select instanceof HTMLSelectElement) || !identity) return;
-
 		void repoBrowser.setRecordPageSize(identity, Number(select.value));
 	}
 
 	function updatePreviewField(event: Event) {
 		const select = event.currentTarget;
 		if (!(select instanceof HTMLSelectElement)) return;
-
 		previewField = select.value as PreviewField;
 	}
 
+	// TODO: change to switch...case
 	function previewTitle(record: RepoRecordSummary) {
 		if (previewField === 'summary') return record.title;
 		if (previewField === 'text') return stringRecordField(record, 'text') ?? record.title;
@@ -98,10 +104,10 @@
 		if (previewField === 'createdAt') return stringRecordField(record, 'createdAt') ?? record.modified;
 		if (previewField === 'uri') return record.uri;
 		if (previewField === 'cid') return record.cid || 'No CID';
-
 		return record.title;
 	}
 
+	// TODO: change to switch...case
 	function previewBody(record: RepoRecordSummary) {
 		if (previewField === 'summary') return record.body;
 		if (previewField === 'text') return record.body;
@@ -109,13 +115,11 @@
 		if (previewField === 'createdAt') return `Indexed as ${record.modified}`;
 		if (previewField === 'uri') return `${record.collection}/${record.rkey}`;
 		if (previewField === 'cid') return record.cid ? `Record CID: ${record.cid}` : 'Record returned without a CID.';
-
 		return record.body;
 	}
 
 	function stringRecordField(record: RepoRecordSummary, key: string) {
 		if (!isRecordValue(record.value)) return null;
-
 		const value = record.value[key];
 		return typeof value === 'string' && value.length > 0 ? value : null;
 	}
@@ -284,6 +288,14 @@
 					<img src="/icons/humanity/apps/identity-inspector.svg" alt="" width="22" height="22" />
 					<span>Identity</span>
 				</button>
+				<button
+					class="identity-launcher"
+					type="button"
+					disabled={!repoBrowser.selectedCollection}
+					onclick={openCollectionSchema}>
+					<img src="/icons/humanity/apps/web-browser.svg" alt="" width="22" height="22" />
+					<span>Schema</span>
+				</button>
 				{#if canUseAsDefault}
 					<button class="identity-launcher" type="button" onclick={useCurrentRepoAsDefault}>
 						<img src="/icons/humanity/places/user-home.svg" alt="" width="22" height="22" />
diff --git a/src/lib/components/Gedit.svelte b/src/lib/components/Gedit.svelte
index e07fed9..2950706 100644
--- a/src/lib/components/Gedit.svelte
+++ b/src/lib/components/Gedit.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { ThemeRegistration } from 'shiki';
+	import { lexiconPath } from '$lib/atproto/lexicon';
 	import { blobPath } from '$lib/atproto/routes';
 	import { blobReferences, isRenderableBlob, rawBlobUrl, repoBlobs } from '$lib/atproto/blobs.svelte';
 	import { repoSession } from '$lib/atproto/session.svelte';
@@ -32,6 +33,7 @@
 
 		return record.collection;
 	});
+
 	const schemaFields = $derived.by(() => schemaFieldsForRecord(record.value));
 	const attachments = $derived.by(() => blobReferences(record.value, record.uri));
 	const identity = $derived(repoSession.identity);
@@ -39,11 +41,10 @@
 		const pds = identity?.pds;
 		const repo = identity?.did;
 		if (!pds || !repo) return null;
-
 		const params = new URLSearchParams({ repo, collection: record.collection, rkey: record.rkey });
-
 		return `${pds}/xrpc/com.atproto.repo.getRecord?${params.toString()}`;
 	});
+
 	const externalLinks = $derived.by(() => linksForRecord(record));
 
 	const themeName = 'ubuntu-iterm2b24';
@@ -70,9 +71,8 @@
 		]
 	};
 
-	let highlighterPromise: Promise<{
-		codeToTokensBase: (code: string, options: { lang: 'json'; theme: string }) => TokenLine[];
-	}> | null = null;
+	type P = (code: string, options: { lang: 'json'; theme: string }) => TokenLine[];
+	let highlighterPromise: Promise<{ codeToTokensBase: P }> | null = null;
 
 	async function getJsonHighlighter() {
 		highlighterPromise ??= Promise.all([
@@ -87,8 +87,9 @@
 			});
 
 			return {
-				codeToTokensBase: (code: string, options: { lang: 'json'; theme: string }) =>
-					highlighter.codeToTokensBase(code, options) as TokenLine[]
+				codeToTokensBase(code: string, options: { lang: 'json'; theme: string }) {
+					return highlighter.codeToTokensBase(code, options) as TokenLine[];
+				}
 			};
 		});
 
@@ -169,6 +170,10 @@
 		window.open(rawBlobUrl(identity, attachment.cid), '_blank', 'noopener,noreferrer');
 	}
 
+	function openSchemaBrowser() {
+		void navigateTo(resolve(lexiconPath(recordType) as `/lexicons/${string}`), { keepFocus: true, noScroll: true });
+	}
+
 	function attachmentSizeLabel(size: number | null) {
 		if (size === null) return 'Unknown size';
 		if (size < 1024) return `${size} B`;
@@ -251,6 +256,7 @@
 					<h2>{recordType}</h2>
 					<p>{record.collection}</p>
 				</div>
+				<button type="button" onclick={openSchemaBrowser}>Open in Web Browser</button>
 			</section>
 
 			<table>
@@ -572,10 +578,16 @@
 
 	td:first-child,
 	td:nth-child(2) {
+		width: 1%;
 		color: var(--base0a);
 		white-space: nowrap;
 	}
 
+	td:nth-child(3) {
+		overflow-wrap: break-word;
+		word-break: normal;
+	}
+
 	.info-panel {
 		display: grid;
 		gap: var(--space-4);
diff --git a/src/lib/components/GnomePanel.svelte b/src/lib/components/GnomePanel.svelte
index 6eb5017..74d87ed 100644
--- a/src/lib/components/GnomePanel.svelte
+++ b/src/lib/components/GnomePanel.svelte
@@ -1,13 +1,24 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { notImplemented } from '$lib/not-implemented.svelte';
 	import { windowManager } from '$lib/window-manager.svelte';
 	import GnomeMenuBar from '$lib/components/GnomeMenuBar.svelte';
 
 	const launchers = [
-		{ label: 'Browser', icon: '/icons/humanity/apps/web-browser.svg' },
+		{ label: 'Browser', icon: '/icons/humanity/apps/web-browser.svg', path: '/lexicons' },
 		{ label: 'Mail', icon: '/icons/humanity/apps/evolution-mail.svg' },
 		{ label: 'Terminal', icon: '/icons/humanity/apps/utilities-terminal.svg' }
 	];
+
+	function openLauncher(launcher: (typeof launchers)[number]) {
+		if (launcher.path) {
+			void goto(resolve(launcher.path as '/lexicons'));
+			return;
+		}
+
+		notImplemented.show();
+	}
 </script>
 
 <header class="gnome-panel" aria-label="GNOME top panel">
@@ -15,7 +26,7 @@
 
 	<div class="panel-launchers" aria-label="Launchers">
 		{#each launchers as launcher (launcher.label)}
-			<button type="button" title={launcher.label} onclick={() => notImplemented.show()}>
+			<button type="button" title={launcher.label} onclick={() => openLauncher(launcher)}>
 				<img src={launcher.icon} alt="" width="22" height="22" />
 			</button>
 		{/each}
diff --git a/src/lib/components/browser/BrowserSummary.svelte b/src/lib/components/browser/BrowserSummary.svelte
new file mode 100644
index 0000000..426eecf
--- /dev/null
+++ b/src/lib/components/browser/BrowserSummary.svelte
@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { recordPath } from '$lib/atproto/routes';
+	import type { ResolvedLexicon } from '$lib/atproto/lexicon';
+
+	type Props = { result: ResolvedLexicon | null; error: string | null };
+
+	let { result, error }: Props = $props();
+
+	function sourceRecordPath(sourceUrl: string) {
+		if (!sourceUrl.startsWith('at://')) return sourceUrl;
+		const [did, collection, rkey] = sourceUrl.slice('at://'.length).split('/');
+		if (!did || !collection || !rkey) return sourceUrl;
+		return recordPath({ did, collection, rkey: decodeURIComponent(rkey) });
+	}
+</script>
+
+<aside class="page-summary" aria-label="Lexicon summary">
+	<img src="/icons/humanity/apps/web-browser.svg" alt="" width="48" height="48" />
+	{#if result}
+		<h2>{result.nsid}</h2>
+		<dl>
+			<div>
+				<dt>Authority</dt>
+				<dd>{result.parsed.authority}</dd>
+			</div>
+			<div>
+				<dt>DNS</dt>
+				<dd>{result.parsed.dnsName}</dd>
+			</div>
+			<div>
+				<dt>Cache</dt>
+				<dd>{result.cache}</dd>
+			</div>
+			<div>
+				<dt>Fetched</dt>
+				<dd>{new Date(result.fetchedAt).toLocaleString()}</dd>
+			</div>
+		</dl>
+		<a href={result._links.self.href} target="_blank" rel="external noreferrer">lexdns API</a>
+		<a href={sourceRecordPath(result.source.url)}>AT URI</a>
+	{:else if error}
+		<h2>Lookup failed</h2>
+		<p>{error}</p>
+	{:else}
+		<h2>Lexicon Browser</h2>
+		<p>Enter an NSID or Lexicon schema record URL.</p>
+	{/if}
+</aside>
+
+<style>
+	.page-summary {
+		display: grid;
+		align-content: start;
+		gap: var(--space-3);
+		min-height: 0;
+		padding: var(--space-3);
+		overflow: auto;
+		background: linear-gradient(90deg, #cdb690, #e8d9bf);
+		border-right: 1px solid #9f835d;
+	}
+
+	.page-summary h2 {
+		overflow-wrap: anywhere;
+		font-size: var(--text-4);
+		line-height: var(--leading-tight);
+	}
+
+	.page-summary p {
+		color: #5f4d3b;
+		font-size: var(--text-1);
+	}
+
+	dl {
+		display: grid;
+		gap: 1px;
+		margin: 0;
+		background: #a58a63;
+		border: 1px solid #a58a63;
+	}
+
+	dl div {
+		display: grid;
+		gap: 1px;
+		background: #fff8ed;
+	}
+
+	dt,
+	dd {
+		margin: 0;
+		padding: var(--space-1) var(--space-2);
+		font-size: var(--text-1);
+	}
+
+	dt {
+		color: #4b3824;
+		font-weight: 700;
+	}
+
+	dd {
+		overflow-wrap: anywhere;
+		font-family: var(--font-mono);
+	}
+
+	a {
+		color: #235a97;
+		font-size: var(--text-1);
+		font-weight: 700;
+		text-decoration: underline;
+	}
+
+	@media (max-width: 760px) {
+		.page-summary {
+			display: none;
+		}
+	}
+</style>
diff --git a/src/lib/components/browser/BrowserTabs.svelte b/src/lib/components/browser/BrowserTabs.svelte
new file mode 100644
index 0000000..c0e77f0
--- /dev/null
+++ b/src/lib/components/browser/BrowserTabs.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	// should go in types.ts
+	export type BrowserTab = 'schema' | 'json' | 'trace';
+	type Props = { activeTab: BrowserTab; onselect: (tab: BrowserTab) => void };
+
+	let { activeTab, onselect }: Props = $props();
+</script>
+
+<nav class="browser-tabs" aria-label="Browser view tabs">
+	<button
+		type="button"
+		class:active={activeTab === 'schema'}
+		aria-pressed={activeTab === 'schema'}
+		onclick={() => onselect('schema')}>Schema</button>
+	<button
+		type="button"
+		class:active={activeTab === 'json'}
+		aria-pressed={activeTab === 'json'}
+		onclick={() => onselect('json')}>JSON</button>
+	<button
+		type="button"
+		class:active={activeTab === 'trace'}
+		aria-pressed={activeTab === 'trace'}
+		onclick={() => onselect('trace')}>Trace</button>
+</nav>
+
+<style>
+	.browser-tabs {
+		display: flex;
+		gap: 2px;
+		padding: var(--space-2) var(--space-2) 0;
+		background: #d8c7ab;
+		border-bottom: 1px solid #8d704b;
+	}
+
+	button {
+		min-height: 1.65rem;
+		padding: 0 var(--space-2);
+		color: #251b13;
+		background: linear-gradient(#fffaf0, #d7c6a9);
+		border: 1px solid #8d704b;
+		border-bottom: 0;
+		border-radius: var(--radius-2) var(--radius-2) 0 0;
+		box-shadow: var(--shadow-raised);
+		font: inherit;
+		font-size: var(--text-1);
+		cursor: default;
+	}
+
+	button.active {
+		color: #fffaf0;
+		background: linear-gradient(#cf7125, #8a5527);
+		text-shadow: 0 1px 0 rgb(0 0 0 / 0.45);
+	}
+</style>
diff --git a/src/lib/components/browser/BrowserToolbar.svelte b/src/lib/components/browser/BrowserToolbar.svelte
new file mode 100644
index 0000000..983d030
--- /dev/null
+++ b/src/lib/components/browser/BrowserToolbar.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	type Props = {
+		address: string;
+		isLoading: boolean;
+		canGoBack: boolean;
+		canGoForward: boolean;
+		canReload: boolean;
+		onaddress: (address: string) => void;
+		onsubmit: () => void;
+		onback: () => void;
+		onforward: () => void;
+		onreload: () => void;
+		onhome: () => void;
+	};
+
+	let {
+		address,
+		isLoading,
+		canGoBack,
+		canGoForward,
+		canReload,
+		onaddress,
+		onsubmit,
+		onback,
+		onforward,
+		onreload,
+		onhome
+	}: Props = $props();
+</script>
+
+<form
+	class="browser-toolbar"
+	aria-label="Navigation toolbar"
+	onsubmit={(event) => {
+		event.preventDefault();
+		onsubmit();
+	}}>
+	<div class="nav-buttons" aria-label="Page navigation">
+		<button type="button" disabled={!canGoBack} onclick={onback}>Back</button>
+		<button type="button" disabled={!canGoForward} onclick={onforward}>Forward</button>
+		<button type="button" disabled={!canReload} onclick={onreload}>Reload</button>
+		<button type="button" onclick={onhome}>Home</button>
+	</div>
+
+	<label class="location-field">
+		<span>Location:</span>
+		<input
+			value={address}
+			aria-label="Lexicon address"
+			placeholder="app.bsky.feed.post or at://.../com.atproto.lexicon.schema/..."
+			oninput={(event) => onaddress(event.currentTarget.value)} />
+	</label>
+
+	<button class="go-button" type="submit" disabled={isLoading}>Go</button>
+
+	<div class="throbber" class:loading={isLoading} aria-label="Loading status">
+		<img src="/icons/humanity/apps/web-browser.svg" alt="" width="28" height="28" />
+	</div>
+</form>
+
+<style>
+	.browser-toolbar {
+		display: grid;
+		grid-template-columns: auto minmax(12rem, 1fr) auto auto;
+		align-items: center;
+		gap: var(--space-2);
+		padding: var(--space-2);
+		background: linear-gradient(#eee5d4, #cdb690);
+		border-bottom: 1px solid #8d704b;
+		box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset;
+	}
+
+	.nav-buttons {
+		display: flex;
+		gap: 2px;
+	}
+
+	button {
+		min-height: 1.65rem;
+		padding: 0 var(--space-2);
+		color: #251b13;
+		background: linear-gradient(#fffaf0, #d7c6a9);
+		border: 1px solid #8d704b;
+		border-radius: var(--radius-1);
+		box-shadow: var(--shadow-raised);
+		font: inherit;
+		font-size: var(--text-1);
+		cursor: default;
+	}
+
+	button:disabled {
+		color: #827b70;
+		background: #d8c7ab;
+		box-shadow: none;
+	}
+
+	.location-field {
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr);
+		align-items: center;
+		gap: var(--space-2);
+		min-width: 0;
+		font-size: var(--text-1);
+		font-weight: 700;
+	}
+
+	input {
+		width: 100%;
+		min-width: 0;
+		height: 1.75rem;
+		padding: 0 var(--space-2);
+		background: #fffdf7;
+		border: 1px solid #8d704b;
+		border-radius: var(--radius-1);
+		box-shadow: var(--shadow-sunken);
+		font: inherit;
+		font-family: var(--font-mono);
+	}
+
+	.go-button {
+		min-width: 3rem;
+	}
+
+	.throbber {
+		display: grid;
+		place-items: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		border: 1px solid #8d704b;
+		background: #f7efe1;
+		box-shadow: var(--shadow-sunken);
+	}
+
+	.throbber.loading img {
+		animation: throb 900ms steps(8) infinite;
+	}
+
+	@keyframes throb {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@media (max-width: 760px) {
+		.browser-toolbar {
+			grid-template-columns: 1fr;
+		}
+
+		.location-field {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/lib/components/browser/SchemaDocument.svelte b/src/lib/components/browser/SchemaDocument.svelte
new file mode 100644
index 0000000..904041f
--- /dev/null
+++ b/src/lib/components/browser/SchemaDocument.svelte
@@ -0,0 +1,224 @@
+<script lang="ts">
+	import type { LexiconDocument } from '$lib/atproto/lexicon';
+	import { defRows, referenceNsid } from './schema';
+
+	type Props = { lexicon: LexiconDocument; onreference: (nsid: string) => void };
+
+	let { lexicon, onreference }: Props = $props();
+	const schemaRows = $derived.by(() => defRows(lexicon.defs));
+</script>
+
+<div class="schema-document">
+	<header>
+		<p>Lexicon {lexicon.lexicon}</p>
+		<h1>{lexicon.id}</h1>
+	</header>
+
+	{#each schemaRows as def (def.name)}
+		<section class="definition">
+			<div class="definition-heading">
+				<div>
+					<p>{def.type}</p>
+					<h2>#{def.name}</h2>
+				</div>
+				{#if def.required.length > 0}
+					<span>{def.required.length} required</span>
+				{/if}
+			</div>
+
+			{#if def.description}
+				<p class="definition-description">{def.description}</p>
+			{/if}
+
+			{#if def.properties.length > 0}
+				<table>
+					<thead>
+						<tr>
+							<th>Field</th>
+							<th>Type</th>
+							<th>Description</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each def.properties as property (property.name)}
+							<tr>
+								<td>
+									<strong>{property.name}</strong>
+									{#if def.required.includes(property.name)}
+										<small>required</small>
+									{/if}
+								</td>
+								<td>{property.type}</td>
+								<td>{property.description || 'No description'}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+
+			{#if def.refs.length > 0}
+				<div class="reference-list" aria-label={`References for ${def.name}`}>
+					<span>References</span>
+					{#each def.refs as ref (ref)}
+						{@const nsid = referenceNsid(ref)}
+						{#if nsid}
+							<button type="button" onclick={() => onreference(nsid)}>{ref}</button>
+						{:else}
+							<code>{ref}</code>
+						{/if}
+					{/each}
+				</div>
+			{/if}
+		</section>
+	{/each}
+</div>
+
+<style>
+	.schema-document {
+		display: grid;
+		gap: var(--space-3);
+		padding: var(--space-4);
+	}
+
+	.schema-document > header {
+		padding-bottom: var(--space-3);
+		border-bottom: 1px solid #d1b183;
+	}
+
+	.schema-document > header p,
+	.definition-heading p {
+		color: #6b401e;
+		font-size: var(--text-0);
+		font-weight: 700;
+		text-transform: uppercase;
+	}
+
+	.schema-document h1 {
+		font-size: var(--text-6);
+		line-height: var(--leading-tight);
+		overflow-wrap: anywhere;
+	}
+
+	.definition {
+		border: 1px solid #b89a70;
+		background: #fffdf7;
+		box-shadow: 0 1px 0 rgb(255 255 255 / 0.75) inset;
+	}
+
+	.definition-heading {
+		display: flex;
+		align-items: start;
+		justify-content: space-between;
+		gap: var(--space-3);
+		padding: var(--space-3);
+		background: linear-gradient(#f2ead9, #dfcfaf);
+		border-bottom: 1px solid #b89a70;
+	}
+
+	.definition-heading h2 {
+		font-size: var(--text-4);
+		overflow-wrap: anywhere;
+	}
+
+	.definition-heading span {
+		padding: 0.1rem var(--space-2);
+		color: #fffaf0;
+		background: #6b401e;
+		border: 1px solid #4a2d1a;
+		font-size: var(--text-0);
+		font-weight: 700;
+		white-space: nowrap;
+	}
+
+	.definition-description {
+		padding: var(--space-3);
+		color: #4d4740;
+		border-bottom: 1px solid #e1d0b2;
+	}
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: var(--text-1);
+	}
+
+	th,
+	td {
+		padding: var(--space-2);
+		border: 1px solid #d7c6a9;
+		text-align: left;
+		vertical-align: top;
+	}
+
+	th {
+		background: #ede2cf;
+		color: #4b3824;
+		font-size: var(--text-0);
+		text-transform: uppercase;
+	}
+
+	td {
+		overflow-wrap: anywhere;
+	}
+
+	th:first-child,
+	th:nth-child(2),
+	td:first-child,
+	td:nth-child(2) {
+		width: 1%;
+		white-space: nowrap;
+	}
+
+	td:nth-child(2) {
+		font-family: var(--font-mono);
+		color: #235a97;
+	}
+
+	td:nth-child(3) {
+		overflow-wrap: break-word;
+		word-break: normal;
+	}
+
+	td small {
+		display: block;
+		width: fit-content;
+		margin-top: var(--space-1);
+		padding: 0 var(--space-1);
+		color: #fffaf0;
+		background: #8a5527;
+		font-size: var(--text-0);
+	}
+
+	.reference-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-2);
+		align-items: center;
+		padding: var(--space-3);
+		border-top: 1px solid #e1d0b2;
+	}
+
+	.reference-list span {
+		font-size: var(--text-0);
+		font-weight: 700;
+		text-transform: uppercase;
+	}
+
+	.reference-list code,
+	.reference-list button {
+		font-family: var(--font-mono);
+		font-size: var(--text-1);
+	}
+
+	button {
+		min-height: 1.65rem;
+		padding: 0 var(--space-2);
+		color: #251b13;
+		background: linear-gradient(#fffaf0, #d7c6a9);
+		border: 1px solid #8d704b;
+		border-radius: var(--radius-1);
+		box-shadow: var(--shadow-raised);
+		font: inherit;
+		cursor: default;
+	}
+</style>
diff --git a/src/lib/components/browser/TraceView.svelte b/src/lib/components/browser/TraceView.svelte
new file mode 100644
index 0000000..42df229
--- /dev/null
+++ b/src/lib/components/browser/TraceView.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { LexiconTrace } from '$lib/atproto/lexicon';
+
+	type Props = { trace: LexiconTrace | null };
+
+	let { trace }: Props = $props();
+	const traceRows = $derived.by(() => rowsForTrace(trace));
+
+	function rowsForTrace(currentTrace: LexiconTrace | null) {
+		if (!currentTrace) return [];
+
+		return [
+			{ step: 'DNS name', value: currentTrace.dnsName ?? 'Not attempted' },
+			{
+				step: 'TXT records',
+				value:
+					currentTrace.txtRecords.length > 0 ? currentTrace.txtRecords.map((record) => record.data).join('\n') : 'None'
+			},
+			{ step: 'Selected DID', value: currentTrace.selectedDid ?? 'None' },
+			{
+				step: 'DID document',
+				value: currentTrace.didDocument.url
+					? `${currentTrace.didDocument.url} (${currentTrace.didDocument.status ?? 'unknown'})`
+					: 'Not fetched'
+			},
+			{ step: 'PDS endpoint', value: currentTrace.pdsEndpoint ?? 'None' },
+			{
+				step: 'Record fetch',
+				value: currentTrace.repoGetRecord.url
+					? `${currentTrace.repoGetRecord.url} (${currentTrace.repoGetRecord.status ?? 'unknown'})`
+					: 'Not fetched'
+			},
+			{ step: 'Final', value: currentTrace.final.message }
+		];
+	}
+</script>
+
+<div class="trace-view">
+	{#each traceRows as row (row.step)}
+		<section>
+			<h2>{row.step}</h2>
+			<pre>{row.value}</pre>
+		</section>
+	{:else}
+		<section>
+			<h2>Trace</h2>
+			<pre>No resolution trace is available.</pre>
+		</section>
+	{/each}
+</div>
+
+<style>
+	.trace-view {
+		display: grid;
+		gap: var(--space-3);
+		padding: var(--space-4);
+	}
+
+	.trace-view section {
+		border: 1px solid #b89a70;
+		background: #fffdf7;
+	}
+
+	.trace-view h2 {
+		padding: var(--space-2) var(--space-3);
+		background: linear-gradient(#f2ead9, #dfcfaf);
+		border-bottom: 1px solid #b89a70;
+		font-size: var(--text-2);
+	}
+
+	pre {
+		margin: 0;
+		padding: var(--space-3);
+		font-family: var(--font-mono);
+		font-size: var(--text-1);
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
+</style>
diff --git a/src/lib/components/browser/schema.ts b/src/lib/components/browser/schema.ts
new file mode 100644
index 0000000..071a78e
--- /dev/null
+++ b/src/lib/components/browser/schema.ts
@@ -0,0 +1,71 @@
+import type { LexiconDefinition, LexiconProperty } from '$lib/atproto/lexicon';
+
+export type LexiconDefRow = {
+	name: string;
+	type: string;
+	description: string;
+	required: string[];
+	properties: Array<{ name: string; type: string; description: string }>;
+	refs: string[];
+};
+
+export function defRows(defs: Record<string, LexiconDefinition>): LexiconDefRow[] {
+	return Object.entries(defs).map(([name, def]) => {
+		const object = def.record ?? def.parameters ?? def.input?.schema ?? def.output?.schema ?? def;
+		const properties = Object.entries(object.properties ?? {}).map(([propertyName, property]) => ({
+			name: propertyName,
+			type: propertyType(property),
+			description: property.description ?? ''
+		}));
+
+		return {
+			name,
+			type: def.type ?? object.type ?? 'definition',
+			description: def.description ?? '',
+			required: object.required ?? def.required ?? [],
+			properties,
+			refs: refsForDefinition(def)
+		};
+	});
+}
+
+export function referenceNsid(ref: string) {
+	const [nsid] = ref.split('#');
+	if (!nsid) return null;
+	if (nsid.startsWith('#')) return null;
+	if (!nsid.includes('.')) return null;
+	return nsid;
+}
+
+function propertyType(property: LexiconProperty): string {
+	if (property.ref) return property.ref;
+	if (property.refs) return property.refs.join(' | ');
+	if (property.type === 'array' && property.items) return `array<${propertyType(property.items)}>`;
+	if (property.format) return `${property.type ?? 'value'}:${property.format}`;
+	return property.type ?? 'unknown';
+}
+
+function refsForDefinition(def: LexiconDefinition) {
+	const refs = new Set<string>();
+	collectRefs(def, refs);
+	return [...refs].sort();
+}
+
+function collectRefs(value: unknown, refs: Set<string>) {
+	if (Array.isArray(value)) {
+		for (const item of value) collectRefs(item, refs);
+		return;
+	}
+
+	if (typeof value !== 'object' || value === null) return;
+
+	const record = value as Record<string, unknown>;
+	if (typeof record.ref === 'string') refs.add(record.ref);
+	if (Array.isArray(record.refs)) {
+		for (const ref of record.refs) {
+			if (typeof ref === 'string') refs.add(ref);
+		}
+	}
+
+	for (const child of Object.values(record)) collectRefs(child, refs);
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c4e07da..583120d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -45,6 +45,7 @@
 		if (page.route.id === '/') return 'Welcome to Intrepid Ibex';
 		// TODO: this should be slug aware
 		if (page.route.id?.startsWith('/docs')) return 'Document Viewer';
+		if (page.route.id?.startsWith('/lexicons')) return 'Web Browser';
 		return 'AT Protocol Collections - Intrepid Ibex';
 	});
 
@@ -52,6 +53,7 @@
 		if (routeRequiresSetup) return '/icons/humanity/places/user-home.svg';
 		if (page.route.id === '/') return '/icons/humanity/devices/computer.svg';
 		if (page.route.id?.startsWith('/docs')) return '/icons/humanity/mimes/gnome-mime-application-pdf.svg';
+		if (page.route.id?.startsWith('/lexicons')) return '/icons/humanity/apps/web-browser.svg';
 		return '/icons/humanity/apps/internet-feed-reader.svg';
 	});
 
@@ -63,6 +65,11 @@
 	const identityInspectorWindow = $derived(windowManager.getWindow('identity-inspector'));
 	const eogWindow = $derived(windowManager.getWindow('eog'));
 	const repoIdentity = $derived(repoSession.identity ?? accountSetup.identity);
+	const trashShortcut = {
+		label: 'Trash',
+		icon: '/icons/humanity/places/user-trash.svg',
+		onactivate: () => window.open('https://github.com/desertthunder.dev/ibex', '_blank', 'noopener,noreferrer')
+	};
 	const shortcuts = $derived([
 		{
 			label: 'ibex Home',
@@ -110,6 +117,15 @@
 				void goto(resolve('/browse'));
 			}
 		},
+		{
+			label: 'Web Browser',
+			icon: '/icons/humanity/apps/web-browser.svg',
+			selected: page.route.id?.startsWith('/lexicons'),
+			onactivate: () => {
+				windowManager.restore('main');
+				void goto(resolve('/lexicons'));
+			}
+		},
 		{
 			label: 'Computer',
 			icon: '/icons/humanity/devices/computer.svg',
@@ -127,11 +143,6 @@
 				windowManager.restore('main');
 				void goto(resolve('/docs'));
 			}
-		},
-		{
-			label: 'Trash',
-			icon: '/icons/humanity/places/user-trash.svg',
-			onactivate: () => window.open('https://github.com/desertthunder.dev/ibex', '_blank', 'noopener,noreferrer')
 		}
 	]);
 
@@ -241,7 +252,7 @@
 	}
 
 	function closeMainWindow() {
-		if (page.route.id === '/browse' || page.route.id?.startsWith('/repos')) {
+		if (page.route.id === '/browse' || page.route.id?.startsWith('/repos') || page.route.id?.startsWith('/lexicons')) {
 			void goto(resolve('/'), { keepFocus: true, noScroll: true });
 		}
 	}
@@ -278,6 +289,10 @@
 				{/each}
 			</section>
 
+			<section class="desktop-trash" aria-label="Trash">
+				<DesktopIcon {...trashShortcut} />
+			</section>
+
 			{#if mainWindow?.isOpen && !mainWindow.isMinimized}
 				<div class="primary-window" class:maximized={mainWindow.isMaximized} style:z-index={mainWindow.zIndex}>
 					{#if routeUsesNativeWindow}
@@ -451,6 +466,14 @@
 		gap: var(--space-4);
 	}
 
+	.desktop-trash {
+		position: absolute;
+		top: var(--space-5);
+		right: var(--space-5);
+		display: grid;
+		justify-items: center;
+	}
+
 	.primary-window {
 		position: relative;
 		align-self: center;
@@ -536,6 +559,11 @@
 			padding: var(--space-3);
 		}
 
+		.desktop-trash {
+			top: var(--space-3);
+			right: var(--space-3);
+		}
+
 		.about-window,
 		.gedit-window,
 		.identity-inspector-window,
@@ -554,6 +582,10 @@
 			display: none;
 		}
 
+		.desktop-trash {
+			display: none;
+		}
+
 		.primary-window {
 			height: calc(100vh - 4.25rem);
 			min-height: 0;
diff --git a/src/routes/lexicons/+layout.svelte b/src/routes/lexicons/+layout.svelte
new file mode 100644
index 0000000..a61101b
--- /dev/null
+++ b/src/routes/lexicons/+layout.svelte
@@ -0,0 +1,244 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import { onMount } from 'svelte';
+	import { lexiconBrowser } from '$lib/atproto/lexicon.svelte';
+	import { lexiconPath } from '$lib/atproto/lexicon';
+	import BrowserSummary from '$lib/components/browser/BrowserSummary.svelte';
+	import BrowserTabs, { type BrowserTab } from '$lib/components/browser/BrowserTabs.svelte';
+	import BrowserToolbar from '$lib/components/browser/BrowserToolbar.svelte';
+	import SchemaDocument from '$lib/components/browser/SchemaDocument.svelte';
+	import TraceView from '$lib/components/browser/TraceView.svelte';
+
+	let { children } = $props();
+	let activeTab = $state<BrowserTab>('schema');
+	let handledRouteInput = $state<string | null>(null);
+	const routeInput = $derived.by(() => page.params.nsid ?? page.url.searchParams.get('q') ?? '');
+	const rawJson = $derived.by(() => {
+		if (!lexiconBrowser.result) return '';
+		return JSON.stringify(lexiconBrowser.result.lexicon, null, 2);
+	});
+	const statusText = $derived.by(() => {
+		if (lexiconBrowser.isLoading) return `Contacting ${lexiconBrowser.address || 'lexdns'}...`;
+		if (lexiconBrowser.error) return lexiconBrowser.error;
+		if (lexiconBrowser.result)
+			return `${lexiconBrowser.result.nsid} resolved from ${lexiconBrowser.result.source.name}`;
+		return 'Ready';
+	});
+	const currentTrace = $derived(lexiconBrowser.result?.trace ?? lexiconBrowser.errorTrace);
+
+	onMount(() => {
+		openRouteInput();
+	});
+
+	$effect(() => {
+		if (routeInput !== handledRouteInput) openRouteInput();
+	});
+
+	function openRouteInput() {
+		handledRouteInput = routeInput;
+		if (!routeInput) {
+			if (!lexiconBrowser.result && !lexiconBrowser.error) lexiconBrowser.address = 'app.bsky.feed.post';
+			return;
+		}
+
+		void lexiconBrowser.open(routeInput, { recordHistory: false });
+	}
+
+	function submitAddress() {
+		const target = lexiconBrowser.address.trim();
+		if (!target) return;
+
+		void goto(resolve(lexiconPath(target) as `/lexicons/${string}`), { keepFocus: true, noScroll: true });
+	}
+
+	function openHome() {
+		lexiconBrowser.address = 'app.bsky.feed.post';
+		submitAddress();
+	}
+
+	function openReference(nsid: string) {
+		lexiconBrowser.address = nsid;
+		submitAddress();
+	}
+</script>
+
+<section class="web-browser" aria-label="Lexicon Web Browser">
+	<div class="browser-menubar" role="menubar" aria-label="Browser menus">
+		<span role="menuitem">File</span>
+		<span role="menuitem">Edit</span>
+		<span role="menuitem">View</span>
+		<span role="menuitem">Go</span>
+		<span role="menuitem">Bookmarks</span>
+		<span role="menuitem">Help</span>
+	</div>
+
+	<BrowserToolbar
+		address={lexiconBrowser.address}
+		isLoading={lexiconBrowser.isLoading}
+		canGoBack={lexiconBrowser.canGoBack}
+		canGoForward={lexiconBrowser.canGoForward}
+		canReload={Boolean(lexiconBrowser.activeNsid)}
+		onaddress={(address) => (lexiconBrowser.address = address)}
+		onsubmit={submitAddress}
+		onback={() => void lexiconBrowser.goBack()}
+		onforward={() => void lexiconBrowser.goForward()}
+		onreload={() => void lexiconBrowser.reload()}
+		onhome={openHome} />
+
+	<div class="browser-content">
+		<BrowserSummary result={lexiconBrowser.result} error={lexiconBrowser.error} />
+
+		<section class="page-view" aria-label="Lexicon document">
+			<BrowserTabs {activeTab} onselect={(tab) => (activeTab = tab)} />
+
+			<div class="browser-page">
+				{#if lexiconBrowser.isLoading}
+					<div class="empty-state">
+						<img src="/icons/humanity/apps/web-browser.svg" alt="" width="54" height="54" />
+						<h2>Resolving Lexicon schema...</h2>
+						<p>{lexiconBrowser.address}</p>
+					</div>
+				{:else if lexiconBrowser.error}
+					<div class="empty-state error">
+						<img src="/icons/humanity/status/image-missing.svg" alt="" width="54" height="54" />
+						<h2>{lexiconBrowser.errorCode ?? 'Lookup error'}</h2>
+						<p>{lexiconBrowser.error}</p>
+					</div>
+				{:else if !lexiconBrowser.result}
+					<div class="empty-state">
+						<img src="/icons/humanity/apps/web-browser.svg" alt="" width="54" height="54" />
+						<h2>No page loaded</h2>
+						<p>Try app.bsky.feed.post or com.atproto.repo.getRecord.</p>
+					</div>
+				{:else if activeTab === 'schema'}
+					<SchemaDocument lexicon={lexiconBrowser.result.lexicon} onreference={openReference} />
+				{:else if activeTab === 'json'}
+					<pre class="json-view"><code>{rawJson}</code></pre>
+				{:else}
+					<TraceView trace={currentTrace} />
+				{/if}
+			</div>
+		</section>
+	</div>
+
+	<footer class="browser-statusbar" aria-live="polite">
+		<span>{statusText}</span>
+		{#if lexiconBrowser.result}
+			<span>{lexiconBrowser.result.source.url}</span>
+		{:else}
+			<span>lex.desertthunder.dev</span>
+		{/if}
+	</footer>
+</section>
+
+{@render children()}
+
+<style>
+	.web-browser {
+		display: grid;
+		grid-template-rows: auto auto minmax(0, 1fr) auto;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
+		color: #201d1a;
+		background: #d8c7ab;
+	}
+
+	.browser-menubar {
+		display: flex;
+		gap: var(--space-3);
+		padding: 0.2rem var(--space-2);
+		background: linear-gradient(#f5efe4, #d4c1a0);
+		border-bottom: 1px solid #9f835d;
+		font-size: var(--text-1);
+	}
+
+	.browser-menubar span {
+		padding: 0.05rem var(--space-1);
+	}
+
+	.browser-content {
+		display: grid;
+		grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.page-view {
+		display: grid;
+		grid-template-rows: auto minmax(0, 1fr);
+		min-width: 0;
+		min-height: 0;
+		background: #fff8ed;
+	}
+
+	.browser-page {
+		min-height: 0;
+		overflow: auto;
+		background: #fffaf0;
+	}
+
+	.empty-state {
+		display: grid;
+		place-items: center;
+		align-content: center;
+		gap: var(--space-2);
+		min-height: 100%;
+		padding: var(--space-5);
+		text-align: center;
+	}
+
+	.empty-state h2 {
+		font-size: var(--text-5);
+	}
+
+	.empty-state p {
+		max-width: 34rem;
+		color: #67594c;
+		overflow-wrap: anywhere;
+	}
+
+	.empty-state.error h2 {
+		color: #9d2516;
+	}
+
+	.json-view {
+		min-height: 100%;
+		margin: 0;
+		padding: var(--space-4);
+		color: #eeeeec;
+		background: #300a24;
+		font-family: var(--font-mono);
+		font-size: var(--text-1);
+		white-space: pre-wrap;
+		overflow-wrap: anywhere;
+	}
+
+	.browser-statusbar {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+		gap: 1px;
+		padding: 1px;
+		background: #9f835d;
+		border-top: 1px solid #8d704b;
+		font-size: var(--text-1);
+	}
+
+	.browser-statusbar span {
+		min-width: 0;
+		overflow: hidden;
+		padding: 0.2rem var(--space-2);
+		background: #e6d5b8;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	@media (max-width: 760px) {
+		.browser-content,
+		.browser-statusbar {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/routes/lexicons/+page.svelte b/src/routes/lexicons/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/lexicons/[nsid]/+page.svelte b/src/routes/lexicons/[nsid]/+page.svelte
new file mode 100644
index 0000000..e69de29