Skip to content

Instantly share code, notes, and snippets.

@Braunson

Braunson/index.html

Created February 12, 2025 20:31
Show Gist options
  • Save Braunson/44c7c2554a5b6ca6f205e89706b74060 to your computer and use it in GitHub Desktop.
Save Braunson/44c7c2554a5b6ca6f205e89706b74060 to your computer and use it in GitHub Desktop.
Download ZIP
JSON Path Explorer built with Alpine.js + Tailwind
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Path Explorer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.13.5/cdn.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 min-h-screen p-8">
<div class="max-w-3xl mx-auto" x-data="{
jsonInput: '',
path: '',
result: '',
error: '',
sampleJson: {
users: [
{ id: 1, name: 'John', details: { age: 31, role: 'admin' } },
{ id: 2, name: 'Jane', details: { age: 29, role: 'user' } }
],
settings: {
theme: 'dark',
notifications: true,
twofa: false
}
},
evaluatePath() {
try {
const jsonObj = this.jsonInput ? JSON.parse(this.jsonInput) : {};
const value = _.get(jsonObj, this.path, 'Not found');
this.result = JSON.stringify(value, null, 2);
this.error = '';
} catch (err) {
this.error = 'Invalid JSON input';
this.result = '';
}
},
loadSample() {
this.jsonInput = JSON.stringify(this.sampleJson, null, 2);
this.path = 'users[0].details.role';
this.evaluatePath();
}
}">
<div class="bg-white rounded-lg shadow-lg p-6 space-y-6">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-800">JSON Path Explorer</h1>
<button
@click="loadSample()"
class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors text-sm"
>
Load Sample
</button>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">JSON Input:</label>
<textarea
x-model="jsonInput"
class="w-full h-48 p-3 border rounded-md font-mono text-sm bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder='{"user": {"details": {"name": "John"}}}'
></textarea>
</div>
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Path (using dot notation):</label>
<div class="flex gap-2">
<input
type="text"
x-model="path"
@keyup.enter="evaluatePath()"
class="flex-1 p-2 border rounded-md font-mono text-sm bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="user.details.name"
>
<button
@click="evaluatePath()"
class="px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors"
>
Evaluate
</button>
</div>
</div>
<template x-if="error">
<div class="p-3 bg-red-100 text-red-700 rounded-md text-sm" x-text="error"></div>
</template>
<template x-if="result">
<div class="space-y-2">
<label class="block text-sm font-medium text-gray-700">Result:</label>
<pre class="p-3 bg-gray-100 rounded-md overflow-auto font-mono text-sm" x-text="result"></pre>
</div>
</template>
<div class="text-sm text-gray-600 space-y-2">
<p class="font-medium">Examples:</p>
<ul class="list-disc pl-5 space-y-1">
<li>Simple path: "settings.theme"</li>
<li>Array access: "users[0].name"</li>
<li>Nested object: "users[0].details.role"</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment