Escape Sequence Visualizer

Enter any text with escape sequences on the left, see the unescaped result on the right.\n

\n\n

Input (with escape sequences)

\n \n

Output (unescaped)

\n

\n\n

Supports common escape sequences: \\n (newline), \\t (tab), \\r (carriage return), \\\\ (backslash), \\\", \\', \\b, \\f,\n \\v, \\0, \\xHH, \\uHHHH

\n View Source\n

\n\n \n \n \n\n\n\n","label",[167,65],"frontend","pulls","branches",1,"forks","envVars",{"_176":26,"_178":26},"connections",{"_176":26,"_177":26},"count","unfilledCount","emptyCount",{"_34":256,"_13":255,"_63":247,"_44":-5,"_36":37,"_159":257,"_160":100,"_38":258,"_40":26,"_66":227,"_163":-5,"_67":24,"_165":-5,"_195":259,"_17":260},{"_34":245,"_13":246,"_63":98,"_44":247,"_36":37,"_159":248,"_160":100,"_38":249,"_40":170,"_66":250,"_163":251,"_67":24,"_165":252,"_195":253,"_17":254},{"_34":241,"_13":167,"_63":158,"_44":-5,"_36":37,"_159":41,"_160":100,"_38":242,"_40":26,"_66":227,"_163":-5,"_67":24,"_165":-5,"_195":243,"_17":244},{"_34":157,"_13":65,"_63":64,"_44":158,"_36":37,"_159":81,"_160":100,"_38":238,"_40":162,"_66":21,"_163":164,"_67":24,"_165":-5,"_195":239,"_17":240},{"_34":230,"_13":231,"_63":232,"_44":158,"_36":37,"_159":233,"_160":100,"_38":234,"_40":170,"_66":220,"_163":235,"_67":24,"_165":-5,"_195":236,"_17":237},{"_34":225,"_13":224,"_63":217,"_44":-5,"_36":37,"_159":218,"_160":100,"_38":226,"_40":26,"_66":227,"_163":-5,"_67":24,"_165":-5,"_195":228,"_17":229},{"_34":214,"_13":215,"_63":216,"_44":217,"_36":37,"_159":218,"_160":100,"_38":219,"_40":26,"_66":220,"_163":221,"_67":24,"_165":-5,"_195":222,"_17":223},{"_34":206,"_13":207,"_63":208,"_44":-5,"_36":37,"_159":209,"_160":100,"_38":210,"_40":26,"_66":21,"_163":211,"_67":24,"_165":-5,"_195":212,"_17":213},{"_34":198,"_13":199,"_63":200,"_44":-5,"_36":37,"_159":201,"_160":100,"_38":202,"_40":162,"_66":21,"_163":203,"_67":24,"_165":-5,"_195":204,"_17":205},{"_34":189,"_13":190,"_63":191,"_44":-5,"_36":37,"_159":192,"_160":100,"_38":193,"_40":26,"_66":21,"_163":194,"_67":24,"_165":-5,"_195":196,"_17":197},"ab9d72b2-324f-11f0-9572-569c3dd06744","deno.json","ab9d7366-324f-11f0-9572-569c3dd06744",14,["D",1747397821143],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","children",[],[190],"11db0d68-31a7-11f0-b322-569c3dd06744","README.md","824abe28-31a6-11f0-a61a-569c3dd06744",13,["D",1747325407723],"# Escape Sequence Visualizer\n\nA simple web tool that helps visualize escape sequences in any text, built with Hono framework.\n\n## Features\n\n- Side-by-side interface with input and output panels\n- Real-time conversion of escape sequences to their actual characters\n- Works with any text containing escape sequences (not limited to JSON-compatible strings)\n- Handles a wide range of escape sequences:\n - `\\n` (newline)\n - `\\t` (tab)\n - `\\r` (carriage return)\n - `\\\\` (backslash)\n - `\\\"` (double quote)\n - `\\'` (single quote)\n - `\\b` (backspace)\n - `\\f` (form feed)\n - `\\v` (vertical tab)\n - `\\0` (null character)\n - `\\xHH` (hex escape)\n - `\\uHHHH` (unicode escape)\n- Responsive design that works on mobile and desktop\n- Built with Hono framework following recommended project structure\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono app entry point\n├── frontend/\n│ ├── index.html # Main HTML template\n│ └── index.js # Frontend JavaScript\n├── shared/\n│ └── utils.ts # Shared types and utilities\n└── README.md\n```\n\n## How to Use\n\n1. Enter any text with escape sequences in the left panel\n2. See the unescaped result in the right panel in real-time\n3. Copy the visualized output as needed\n\n## Implementation Details\n\n- Backend uses Hono framework to serve the frontend files\n- Frontend uses vanilla JavaScript with custom escape sequence handling\n- The tool uses regular expressions to replace escape sequences with their actual characters\n- Works with any text, including code snippets, TypeScript definitions, etc.\n\n## Examples\n\nInput: `Hello\\nWorld`\nOutput: \n```\nHello\nWorld\n```\n\nInput: `Tab:\\tIndented`\nOutput: `Tab: Indented`\n\nInput: TypeScript definitions with escape sequences (like `\\n` for newlines) will be properly rendered with actual newlines in the output panel.",[],[199],"aba2ddf6-324f-11f0-9f22-569c3dd06744",".vtignore","aba2dec8-324f-11f0-9f22-569c3dd06744",15,["D",1747397821147],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[207],"c0e8ac08-31a6-11f0-8ee4-569c3dd06744","utils.ts","c0e8ac9e-31a6-11f0-8ee4-569c3dd06744","56a373b2-eaa8-4c54-b78b-6a46b97d220a",8,["D",1747325271922],"script","/**\n * Shared utility functions and types for the Escape Sequence Visualizer\n */\n\n// Type definition for project info passed from backend to frontend\nexport interface ProjectInfo {\n viewSourceUrl: string;\n}\n\n// Add any other shared utilities here as needed",[],[224,215],"shared","c0e8c364-31a6-11f0-8ee4-569c3dd06744",["D",1747325271922],"directory",[185],[224],"fb3afe7e-31a6-11f0-bcc2-569c3dd06744","index.js","bd1fdb0a-31a6-11f0-9a17-569c3dd06744",11,["D",1747325369749],"document.addEventListener('DOMContentLoaded', () => {\n const inputArea = document.getElementById('input-area');\n const outputArea = document.getElementById('output-area');\n const viewSourceLink = document.getElementById('view-source');\n \n // Set up view source link if project info is available\n if (window.__PROJECT_INFO__?.viewSourceUrl) {\n viewSourceLink.href = window.__PROJECT_INFO__.viewSourceUrl;\n }\n \n /**\n * Converts escape sequences in a string to their actual characters\n * Handles common escape sequences without requiring JSON validity\n */\n function unescapeString(str) {\n return str\n .replace(/\\\\n/g, '\\n') // newline\n .replace(/\\\\t/g, '\\t') // tab\n .replace(/\\\\r/g, '\\r') // carriage return\n .replace(/\\\\b/g, '\\b') // backspace\n .replace(/\\\\f/g, '\\f') // form feed\n .replace(/\\\\v/g, '\\v') // vertical tab\n .replace(/\\\\\\\\/g, '\\\\') // backslash\n .replace(/\\\\'/g, '\\'') // single quote\n .replace(/\\\\\"/g, '\"') // double quote\n .replace(/\\\\0/g, '\\0') // null character\n .replace(/\\\\x([0-9A-Fa-f]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16))) // hex escape\n .replace(/\\\\u([0-9A-Fa-f]{4})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16))); // unicode escape\n }\n \n function updateOutput() {\n // Get input and unescape it\n const input = inputArea.value;\n const unescaped = unescapeString(input);\n outputArea.textContent = unescaped;\n }\n \n // Update on input\n inputArea.addEventListener('input', updateOutput);\n \n // Initial update\n updateOutput();\n});",[],[167,231],["D",1747397870751],[],[167,65],"b838663e-31a6-11f0-a7db-569c3dd06744",["D",1747325257337],[182,183],[167],"c94ae17c-31a6-11f0-8045-569c3dd06744","index.ts","6871483d-6327-468c-96eb-937b700436df",10,["D",1747325285984],"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files from frontend directory\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main HTML page with project info injected\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Get project info for view source link\n const projectVal = parseProject(import.meta.url);\n \n // Inject project info\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;","escape",[],[255,246],"backend","a8b51752-31a6-11f0-a214-569c3dd06744",4,["D",1747325231315],[180],[255],["D",1747325101015],{"_11":12,"_135":70},{"_11":12,"_131":-5,"_69":70,"_30":68,"_132":133,"_134":24},{"_40":81,"_13":16,"_34":37,"_123":88,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":-5,"_129":14,"_130":12},"ctx",{"_53":-5,"_154":298,"_299":300,"_301":302,"_303":24,"_304":24,"_305":24,"_306":100,"_307":-5,"_308":-7,"_309":-7,"_310":26,"_311":24,"_312":24,"_313":-5,"_314":24,"_315":24,"_316":24,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":16,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"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"]

History · index.html