[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_96":95,"_33":46,"_104":86,"_28":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":27,"_119":120,"_121":25,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_33":46,"_39":47,"_48":-5,"_49":27,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":27},"version",25,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":29,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":27},"previous",{"_31":32,"_33":29,"_34":35,"_36":37},"deleted",true,"deletedHere",false,"path","index.ts","latestPath","fileId","24393970-471a-11f0-a950-76b3cceeab13","name","fileType","http","content","export default async function(req: Request): Promise {\n const html = `\n\n\n \n \n JSON-RPC Viewer\n \n \n \n\n\n

JSON-RPC Viewer

\n \n

📋 What is this tool for?

\n This tool parses and visualizes JSON Lines containing JSON-RPC messages. \n It's particularly useful for analyzing Language Server Protocol (LSP) logs, API debugging, \n and understanding request-response flows.\n

📝 Show example input format

Content-Length: 87\n\n{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"capabilities\":{}}}\nContent-Length: 45\n\n{\"jsonrpc\":\"2.0\",\"id\":1,\"result\":{\"capabilities\":{}}}\nContent-Length: 52\n\n{\"jsonrpc\":\"2.0\",\"method\":\"initialized\",\"params\":{}}

\n \n

Paste JSON-RPC Messages

\n \n

\n \n \n \n \n \n \n

\n\n

\n \n

\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n 'Content-Type': 'text/html',\n },\n });\n}","export default async function(req: Request): Promise {\n const html = `\n\n\n \n \n JSON-RPC Viewer\n \n \n \n\n\n

JSON-RPC Viewer

\n \n

📋 What is this tool for?

📝 Show example input format

Content-Length: 87\n\n{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"capabilities\":{}}}\nContent-Length: 45\n\n{\"jsonrpc\":\"2.0\",\"id\":1,\"result\":{\"capabilities\":{}}}\nContent-Length: 52\n\n{\"jsonrpc\":\"2.0\",\"method\":\"initialized\",\"params\":{}}

\n \n

Paste JSON-RPC Messages

\n \n

\n \n \n \n \n \n \n

\n\n

\n \n

\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n 'Content-Type': 'text/html',\n },\n });\n}","createdAt",["D",1749684500571],"branchVersion","branchId","06095aae-4718-11f0-a0bc-76b3cceeab13","id","06090950-4718-11f0-a0bc-76b3cceeab13","JSONRPC-Viewer",["D",1749682895450],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","006ad326-471c-11f0-9092-76b3cceeab13","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":27},"branch",{"_13":85,"_33":86,"_44":43,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":46,"_94":95},"isOwned",54,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_33":46,"_39":163,"_48":-5,"_49":27,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":25,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":164,"_80":165,"_82":166,"_84":27},"tree",[154,155],"files",[154,155],"counts",{"_143":62,"_144":145,"_146":62,"_147":148,"_149":150},"contents",[126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":135,"_33":136,"_31":137,"_129":-5,"_42":43,"_41":138,"_130":27,"_39":139,"_13":140,"_34":20,"_36":141,"_24":27,"_133":-5,"_28":142},{"_44":128,"_33":29,"_31":32,"_129":-5,"_42":43,"_41":14,"_130":27,"_39":131,"_13":132,"_34":35,"_36":38,"_24":27,"_133":-5,"_28":134},"c2c48044-471b-11f0-b704-76b3cceeab13","parentId","latest",["D",1749684500571],19,"label",[29],"808136a0-471b-11f0-b3b9-76b3cceeab13","README.md","3472b776-471a-11f0-8402-76b3cceeab13",21,["D",1749684389403],1,"# JSON-RPC Viewer\n\nA web-based tool for parsing and visualizing JSON Lines containing JSON-RPC messages. Perfect for analyzing Language Server Protocol (LSP) logs, debugging API communications, and understanding request-response flows.\n\n## 🚀 How to Use\n\n### 1. **Input Your Data**\nPaste your JSON-RPC communication logs into the textarea. The tool accepts:\n- Raw JSON Lines (one JSON object per line)\n- Messages with Content-Length headers (LSP format)\n- Mixed formats with varying whitespace\n\n### 2. **Parse & Visualize**\nClick **\"Parse Messages\"** to extract and display the JSON-RPC messages with:\n- **Request-Response Grouping**: Related messages are paired together\n- **Direction Indicators**: Client → Server vs Server → Client\n- **Message Types**: REQUEST, RESPONSE, NOTIFICATION\n- **Method Names & IDs**: Clearly labeled for easy identification\n\n### 3. **Control Your View**\nUse the toolbar buttons to customize the display:\n- **Toggle Grouping**: Switch between grouped pairs and chronological order\n- **Hide Ping**: Filter out noisy ping/keepalive messages\n- **Collapse/Expand All**: Minimize or maximize all message content\n- **Individual Controls**: Collapse/expand specific messages or pairs\n\n## 📋 Example Input Format\n\n```\nContent-Length: 87\n\n{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"capabilities\":{}}}\nContent-Length: 45\n\n{\"jsonrpc\":\"2.0\",\"id\":1,\"result\":{\"capabilities\":{}}}\nContent-Length: 52\n\n{\"jsonrpc\":\"2.0\",\"method\":\"initialized\",\"params\":{}}\n```\n\n## ✨ Key Features\n\n- **Smart Grouping**: Automatically pairs requests with their responses\n- **Ping Filtering**: Hide noisy keepalive messages with one click\n- **Visual Distinction**: Color-coded messages with clear direction indicators\n- **Flexible Views**: Toggle between grouped and chronological display\n- **Responsive Design**: Works on desktop and mobile devices\n- **Privacy-First**: All parsing happens client-side, no data sent to servers\n\n## 🎯 Perfect For\n\n- **LSP Analysis**: Debug Language Server Protocol communications\n- **API Development**: Visualize JSON-RPC API request/response flows\n- **Protocol Debugging**: Understand complex message sequences\n- **Documentation**: Create visual representations of API interactions\n- **Learning**: Study how JSON-RPC protocols work in practice\n\n## 🔧 Technical Notes\n\n- Built with vanilla JavaScript and TailwindCSS\n- Handles malformed JSON gracefully with error reporting\n- Supports large message logs with efficient parsing\n- No external dependencies or data transmission",[136],"pulls","branches",2,"forks","envVars",{"_151":62,"_153":62},"connections",{"_151":62,"_152":62},"count","unfilledCount","emptyCount",{"_44":135,"_33":136,"_31":137,"_129":-5,"_42":43,"_41":138,"_130":27,"_39":160,"_13":140,"_34":20,"_36":141,"_24":27,"_133":-5,"_157":161,"_28":162},{"_44":128,"_33":29,"_31":32,"_129":-5,"_42":43,"_41":14,"_130":27,"_39":156,"_13":132,"_34":35,"_36":38,"_24":27,"_133":-5,"_157":158,"_28":159},["D",1749684500571],"children",[],[29],["D",1749684389403],[],[136],["D",1749682895450],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":27},{"_13":85,"_33":86,"_44":43,"_87":45,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":46,"_94":95},"ctx",{"_78":-5,"_123":200,"_201":202,"_203":204,"_205":27,"_206":27,"_207":27,"_208":25,"_209":-5,"_210":-7,"_211":-7,"_212":62,"_213":27,"_214":27,"_215":-5,"_216":27,"_217":27,"_218":27,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":86,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v25