DevBox – Format JSON, Test Regex, Clean Text, Generate Passwords, Convert HTML & Colors

Text Cleaner

Removes extra spaces, empty lines, and smart quotes from your text.

🧽 Why Clean Your Text?

Raw text often contains unwanted spaces, empty lines, or curly quotes from word processors like Microsoft Word. These issues can break code, reduce readability, or create bugs in copy-paste workflows.

📌 Common Use Cases:

Cleaning JSON or code before pasting into editors
Fixing blog posts or docs copied from Word
Removing smart quotes (e.g. “ ”) and replacing with straight quotes (" ")
Getting rid of extra line breaks for social media captions
Preparing clean text for AI models or SEO tools

Pro tip: Keep your text simple, readable, and format-free before you publish or paste it.

Text Case Converter

Convert text into different case styles like UPPERCASE, lowercase, Capitalized, snake_case, camelCase and more. 100% offline in your browser.

💡 Why Use a Text Case Converter?

Changing the case of text isn't just for looks — it's crucial in development, content writing, naming conventions, and SEO. Different platforms and programming languages require different case formats, and manually converting them wastes time and increases errors.

🎯 Who Uses This Tool?

Developers — format variables, constants, and API fields using consistent case styles.
Writers — quickly fix formatting issues in titles, headings, or sentences.
SEO specialists — generate URL-friendly slugs using kebab-case instantly.
Students — clean up essays or assignments before submission.
UX/UI designers — prepare button labels and interface text with consistent casing.

🔠 When Should You Use It?

Creating consistent variable names (camelCase or snake_case)
Writing titles, headings, and subtitles for blogs or articles
Formatting button labels, UI elements, or API fields
Preparing SEO-friendly URLs using kebab-case
Quickly transforming data copied from emails or spreadsheets

💬 Productivity Tips

Combine this tool with the Text Cleaner above to remove unwanted line breaks, spaces, and formatting issues before applying case conversions.

You can also use keyboard shortcuts like (Ctrl + A) then (Ctrl + C) after converting, or simply click "Copy" or "Download" to work even faster.

🌐 Language Support

This tool works well with Latin-based characters and emojis. While it doesn't apply casing to non-Latin scripts (like Arabic or Chinese), it's still useful for formatting mixed content and keeping structure consistent.

JSON Formatter & Validator

Paste JSON to format and validate.

If the JSON is invalid, an Auto-Fix button will appear.
🛠 Note: This feature is experimental (Beta) and currently handles:

Unquoted keys (e.g. {name: "Name"})
Trailing commas (e.g. { "x": 1, })
Basic missing quotes or colons

It may not fix deeply broken structures or nested errors. Always review the output before using.

📦 What is JSON?

JSON (JavaScript Object Notation) is a lightweight data format used to exchange information between servers and applications. It's widely used in APIs, config files, databases, and frontend/backend communication.

🧠 Common Mistakes Developers Make:

Missing quotes around keys: { name: "User One" } ❌
Trailing commas: { "a": 1, } ❌
Unescaped characters: {"text": "Line\nBreak"} ✅
Using single quotes instead of double quotes ❌
Non-UTF8 characters or invalid nesting

✅ Best Practices for Clean JSON:

Always use double quotes for keys and string values
Validate before sending data to APIs
Use a formatter for better readability and debugging
Keep structure consistent (avoid mixing arrays & objects randomly)
Minify JSON for production, format it for development

Tip: This tool is perfect for quickly fixing broken JSON from API responses, Postman exports, or log files.

HTML Entities Converter

Convert special characters to/from HTML entities.

💡 What Are HTML Entities?

HTML entities are used to display reserved or invisible characters in HTML. For example, instead of using the character `<` which might break HTML code, we write `<`.

📌 Commonly Used Entities

Character	Entity Name	Entity Code	Meaning
<	<	<	Less than
>	>	>	Greater than
&	&	&	Ampersand
"	"	"	Double Quote
'	'	'	Single Quote
			Non-breaking space

Color Converter 🎨

Convert between HEX, RGB, and RGBA formats. Live preview with opacity.

Pick a color visually and get the HEX, RGB, and RGBA instantly.

Opacity: 1.00

🎨 How to Create Harmonious Color Schemes

Analogous: Colors next to each other on the color wheel (e.g., blue, teal, green).
Complementary: Colors opposite each other (e.g., blue & orange).
Monochromatic: Variations of the same hue (light to dark).
Triadic: Three evenly spaced colors (e.g., red, yellow, blue).
Keep contrast readable (light background = dark text).

🌈 Ready-to-Use Color Palettes

Free Online Regex Tester & Pattern Validator

Quickly test, debug, and validate your regular expressions (regex) using this live JavaScript-based tool. Includes real-time match results and common regex pattern examples.

💡 Using ^ or $? Remove extra spaces/newlines or skip them for better matches.

Common Regex Patterns for Developers

Browse useful regular expression patterns below. Copy and test them instantly.

Pattern Name	Regex	Example
Email	^[A-Za-z0-9](?:[\w.-]*[A-Za-z0-9])?@[\w.-]+\.\w+$	example@email.com
Password (Strong)	^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[\W_]).{8,}$	P@ssw0rd!
Password (Medium)	^(?=.[a-z])(?=.[A-Z])(?=.*\d).{6,}$	Test123
Password (Only Letters & Special)	^(?=.[a-zA-Z])(?=.[!@#$%^&*]).{6,}$	hello@you
Phone (International)	^\+(?:[0-9] ?){6,14}[0-9]$	+44 1234 567890
Text Only (English)	^[a-zA-Z ]*$	Hello World
Numbers Only	^[0-9]*$	123456
Text with Numbers	^[a-zA-Z0-9 ]*$	user123
Arabic Only (with Diacritics)	^[\u0621-\u064A\s\u064B-\u0652]*$	مُرَحباً بكمْ في عالمِ البرمجة
Arabic + English	^[\u0621-\u064Aa-zA-Z ]*$	Hello مرحبا
Arabic + English + Numbers	^[\u0621-\u064Aa-zA-Z0-9 ]*$	مرحبا123 Hello
All (AR/EN/Numbers/Symbols)	^[\u0621-\u064Aa-zA-Z0-9\s\!\@\#\$\%\^\&\\_\+\-\=\[\]\{\}\;\'\:\"\\\\|\,\.\/\<\>\?]$	مرحبا!@# Hello123
No Spaces (All Chars)	^[\u0621-\u064Aa-zA-Z0-9!@#$%^&`()_+\-=\[\]{};':"\\\|,.<>\/?]$	مرحبا123@#Hello
Username (Alphanumeric)	^[a-zA-Z0-9_]{3,16}$	dev_user123
Slug	^[a-z0-9]+(?:-[a-z0-9]+)*$	jscripted-devbox
URL	https?:\/\/(www\.)?[\w\-]+(\.[\w\-]+)+[/#?]?.*$	https://example.com
Hex Color	^#?([a-fA-F0-9]{6}\|[a-fA-F0-9]{3})$	#FFA07A
IPv4 Address	^(?:(?:25[0-5]\|2[0-4]\d\|1?\d{1,2})\.){3}(?:25[0-5]\|2[0-4]\d\|1?\d{1,2})$	192.168.1.1

⚠️ Note: These regex patterns are for reference and learning. Always test your expressions based on the language or environment you’re using.

Password Generator

Generate strong, secure, and customizable passwords with optional keywords and leetspeak.

Preset: Length:

Uppercase Lowercase Numbers Symbols

Generate pronounceable password Include specific word (optional):

Tip: If you include a keyword, consider increasing the total length for a stronger password.

Insert keyword at: Apply leetspeak (e.g., myBrand → myBr@nd) Exclude characters (optional):

••••••••••••

🔐 Tips for Creating Strong Passwords

Use a mix of uppercase and lowercase letters, numbers, and symbols.
Avoid common passwords like 123456 or password.
Longer passwords are more secure. Aim for at least 12–16 characters.
Don’t reuse the same password across multiple sites.
Try combining a memorable word with random characters (e.g., MyBrand#2024).
Use a password manager to store them safely.

❓ Are the passwords stored anywhere?

No. All password generation happens locally in your browser. Nothing is sent to any server.

🔒 Is this tool safe to use?

Yes. It runs entirely in your browser with no tracking, storage, or external requests. It's designed for privacy-focused developers.

Lorem Ipsum Generator

Generate random placeholder text by number of characters.

💡 What is Lorem Ipsum?

Lorem Ipsum is placeholder text used in design mockups to focus on layout, fonts, and visual structure instead of actual content. It mimics the look of real paragraphs without being distracting.

📌 When to use it?

Wireframes & UI mockups
Design previews for clients
Testing font sizes and line spacing
Filling empty states or loading placeholders

Base64 Encoder & Decoder

Convert plain text to Base64 and decode Base64 back to readable text.

💡 What is Base64 Encoding?

Base64 is a method for encoding binary data using only ASCII characters. It's commonly used for encoding images or files into text, transmitting data over media designed to handle textual data, and embedding files in web pages or emails.

📌 When is Base64 Useful?

Embedding small images directly in HTML/CSS
Transferring binary data in JSON or XML APIs
Encoding credentials or tokens for basic auth
Storing file previews or attachments in databases

🔐 Base64 is not Encryption

Many beginners confuse Base64 with encryption. Base64 is an encoding method, not a secure way to hide or protect data. Anyone can decode a Base64 string easily.

⚙️ Common Use Cases for Developers

🖼️ Converting images to Base64 to embed directly in HTML or CSS.
📦 Sending file attachments in APIs using JSON or XML.
🔑 Storing small configuration values or tokens in browser storage.
📄 Encoding PDF or Excel files to send in email bodies.

🚫 When NOT to Use Base64

Avoid using Base64 for large files, sensitive data, or anything requiring encryption. It increases file size by ~33% and offers no protection from data leaks.

URL Encoder & Decoder

Convert special characters in text to a URL-safe format, and decode URL-encoded text back to its original form.

💡 What is URL Encoding?

URL encoding (also called percent-encoding) is the process of converting characters into a format that can be safely transmitted over the Internet. It replaces unsafe characters (like spaces, &, %, /) with a percent symbol followed by two hexadecimal digits.

📌 When to Use It?

Adding parameters to URLs
Encoding special characters in query strings
Sending text via GET/POST requests
Embedding dynamic data in links

🔠 Common Characters & Their Encoded Values

Character	Encoded	Description
Space	%20	Used to separate words
&	%26	Ampersand
=	%3D	Equals sign
?	%3F	Start of query string
%	%25	Percentage
/	%2F	Forward slash
#	%23	Fragment identifier
+	%2B	Plus sign
@	%40	At symbol

⚠️ Common Pitfalls

Don't double-encode strings! Encoding a string twice (e.g., encoding an already encoded URL) can cause issues when decoding. Also, avoid decoding random URLs without knowing their source — it might expose unexpected or unsafe content.

cURL Parser & Converter

Paste a cURL command to parse its method, URL, headers, query params, body, cookies, and auth — then convert it into ready-to-use Fetch, Axios, or Angular HttpClient code. Everything runs locally in your browser.

cURL command

Paste a cURL command above to see the parsed breakdown and generated code.

🧰 What this tool understands

Supported flags: -X --request, -H --header, -d --data --data-raw --data-binary, -u --user, -b --cookie, --url, -I --head, -A --user-agent. Multi-line cURL (backslash + Windows caret continuations) and Postman exports are handled.

⚙️ Behavior rules:

If no method is supplied but a body is present, the method is inferred as POST.
-I / --head forces the method to HEAD.
Unknown flags are kept as warnings — they don't crash parsing.
Bodies that look like JSON are pretty-printed and validated; if invalid, you'll see exactly why.
Duplicate headers and incomplete headers are flagged but don't stop parsing.

Don't see a flag you need? Most non-essential flags (verbose, location, compressed, insecure) are silently ignored — parsing still succeeds.

🔍 Why use the cURL Parser?

cURL commands are everywhere — browser DevTools' "Copy as cURL", Postman exports, API docs, Stack Overflow answers, support tickets — but you can't paste a cURL command straight into a frontend project. This tool reads the command, breaks it into its real parts (method, URL, query params, headers, body, cookies, auth) and gives you working code in Fetch, Axios, and Angular HttpClient — ready to drop into your app.

📌 Common use cases:

Turn a "Copy as cURL" from Chrome/Firefox DevTools into Fetch / Axios code in one paste.
Convert a Postman cURL export into Angular HttpClient calls for your service.
Inspect what a complex API request actually sends — useful when debugging auth, headers, or query params.
Spot sensitive data (Bearer tokens, API keys, cookies, Basic auth) before sharing a request in a bug report or Slack message.
Reformat or validate the JSON body of a request without leaving the browser.

Pro tip: everything runs locally in your browser — no network calls are ever made and nothing is logged.

API Response Formatter & Mock Generator

Paste any JSON API response to format it, validate it, inspect its structure, and generate TypeScript interfaces, mock data, Angular models, and Zod schemas — all in your browser.

JSON response

Paste a JSON response above to begin.

🧪 What this tool generates

Interfaces — clean TypeScript with nested types, optionals for partial keys, and union types for mixed arrays.
Mock Data — 5 fake records that respect the shape of your JSON. Strings shaped like emails / dates / UUIDs / URLs / phones get realistic values.
Angular — both the interface and a columns array ready for a Material/Tailwind table.
Zod — a runtime-validatable schema with type inference.
Inspector — root type, total keys, nested-object count, array count, max depth, and which primitive types appear.

⚙️ Safety + edge cases handled:

Invalid JSON gets a clear error with line and column — UI never crashes.
Mixed array shapes are merged into a union with optional keys.
Null-only fields are typed nullable so you don't lose information.
Empty objects and arrays are handled without breaking generators.

Inputs larger than ~500 KB switch to Viewer/Inspector only to keep the UI responsive.

🚀 Why use the API Response Formatter?

Working with a new API usually means three things: format the JSON so you can actually read it, write TypeScript types so the compiler stops yelling, and create fake data so you can build the UI before the backend is ready. This tool does all three from a single paste — plus generates Angular models, Zod schemas, and a structural inspector so you understand the response at a glance.

📌 Common use cases:

Paste a fresh response from your backend and instantly get a matching TypeScript interface — no manual typing.
Build UI components against realistic mock data while the API is still in development.
Generate a Zod schema for runtime validation in forms, API clients, or server actions.
Scaffold an Angular table from a list endpoint — interfaces + column config in one block.
Sanity-check a malformed JSON payload from logs or a Slack copy-paste (the formatter auto-recovers from trailing commas and log prefixes).

Pro tip: everything is local. Your JSON never leaves the browser — safe for production payloads, PII, or staging data.

Want to advertise on JsCripted?

Reach thousands of developers by promoting your tool or service here.

Contact Us

JsCripted DevBox

Text Cleaner

🧽 Why Clean Your Text?

📌 Common Use Cases:

Text Case Converter

💡 Why Use a Text Case Converter?

🎯 Who Uses This Tool?

🔠 When Should You Use It?

💬 Productivity Tips

🌐 Language Support

JSON Formatter & Validator

📦 What is JSON?

🧠 Common Mistakes Developers Make:

✅ Best Practices for Clean JSON:

HTML Entities Converter

💡 What Are HTML Entities?

📌 Commonly Used Entities

Color Converter 🎨

🎨 How to Create Harmonious Color Schemes

🌈 Ready-to-Use Color Palettes

Free Online Regex Tester & Pattern Validator

Common Regex Patterns for Developers

Password Generator

🔐 Tips for Creating Strong Passwords

Lorem Ipsum Generator

💡 What is Lorem Ipsum?

📌 When to use it?

Base64 Encoder & Decoder

💡 What is Base64 Encoding?

📌 When is Base64 Useful?

🔐 Base64 is not Encryption

⚙️ Common Use Cases for Developers

🚫 When NOT to Use Base64

URL Encoder & Decoder

💡 What is URL Encoding?

📌 When to Use It?

🔠 Common Characters & Their Encoded Values

⚠️ Common Pitfalls

cURL Parser & Converter

HTTP Method

Full URL

Base URL

Path

Query Parameters

Headers

Body

Cookies

Basic Auth

Fetch API

Axios

Angular HttpClient

Full Parsed JSON

🧰 What this tool understands

⚙️ Behavior rules:

🔍 Why use the cURL Parser?

📌 Common use cases:

API Response Formatter & Mock Generator

Formatted JSON

Tree Viewer

Root Type

Total Keys

Nested Objects

Arrays

Max Depth

Detected Types

TypeScript Interfaces

Mock Data (5 records)

Angular Model + Table Columns

Zod Schema

🧪 What this tool generates

⚙️ Safety + edge cases handled:

🚀 Why use the API Response Formatter?

📌 Common use cases:

Want to advertise on JsCripted?

More from Mohamed Wahshey

كورس أساسيات الويبFrontend Fundamentals

من تايه لمبرمج 1.0

Angular Launch

Converta

قاموس مصطلحات البرمجة