<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Harun Mahmud</title>
    <description>The latest articles on DEV Community by Harun Mahmud (@harun_mahmud_88).</description>
    <link>https://dev.to/harun_mahmud_88</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3925532%2F5a5a1f3e-39fd-4e62-9d49-d2366fc5c128.jpg</url>
      <title>DEV Community: Harun Mahmud</title>
      <link>https://dev.to/harun_mahmud_88</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/harun_mahmud_88"/>
    <language>en</language>
    <item>
      <title>I Built a Job Aggregator That Scrapes 10 Sources Every Morning — Here's How It Works</title>
      <dc:creator>Harun Mahmud</dc:creator>
      <pubDate>Fri, 05 Jun 2026 18:30:47 +0000</pubDate>
      <link>https://dev.to/harun_mahmud_88/i-built-a-job-aggregator-that-scrapes-10-sources-every-morning-heres-how-it-works-4hm6</link>
      <guid>https://dev.to/harun_mahmud_88/i-built-a-job-aggregator-that-scrapes-10-sources-every-morning-heres-how-it-works-4hm6</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqza8zaop31h723sfgm1n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqza8zaop31h723sfgm1n.png" alt=" " width="800" height="420"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Built It
&lt;/h2&gt;

&lt;p&gt;Job hunting is exhausting — not because jobs don't exist, but because they're scattered everywhere. LinkedIn, Indeed, RemoteOK, We Work Remotely, Remotive… you end up checking six tabs every morning just to see what's new.&lt;/p&gt;

&lt;p&gt;I wanted one place that quietly does that work for you. Browse it on the site, or just get a clean email digest every morning with only the roles that match what you're looking for.&lt;/p&gt;

&lt;p&gt;That's &lt;strong&gt;&lt;a href="https://dailyjobfeed.com" rel="noopener noreferrer"&gt;DailyJobFeed.com&lt;/a&gt;&lt;/strong&gt; — a read-only job aggregator. No job posting, no accounts, no applications. Just a fresh, filtered feed of real jobs updated daily.&lt;/p&gt;




&lt;h2&gt;
  
  
  How It Works
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Scraping — every morning at 6 AM
&lt;/h3&gt;

&lt;p&gt;A Python cron job runs daily and pulls listings from 10 sources. Each source uses a different method:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;RSS feeds&lt;/strong&gt; — We Work Remotely exposes 9 category feeds&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Public JSON APIs&lt;/strong&gt; — RemoteOK, Remotive, Arbeitnow, Himalayas, Jobicy&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keyed REST APIs&lt;/strong&gt; — Adzuna (12 countries), USAJobs (US federal), Reed UK, The Muse&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each source is wrapped in its own module. If one fails, it's caught and the rest continue. Nothing blocks the run.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Normalization
&lt;/h3&gt;

&lt;p&gt;Every source speaks a different language. Remotive calls it &lt;code&gt;"Software Development"&lt;/code&gt;. RemoteOK uses freeform tags. WWR uses RSS feed names. The scraper normalizes all of this into a consistent canonical schema:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;slug&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;             &lt;span class="nf"&gt;make_slug&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;company&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;title&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;            &lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;company&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;          &lt;span class="n"&gt;company&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;category&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;         &lt;span class="nf"&gt;canonical_category&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;tags&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;  &lt;span class="c1"&gt;# Engineering, Design, Marketing…
&lt;/span&gt;  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;experience_level&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;parse_experience&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;           &lt;span class="c1"&gt;# entry, mid, senior, lead
&lt;/span&gt;  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;remote_type&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;      &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;remote&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;hybrid&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;on-site&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;job_type&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;         &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;full-time&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;part-time&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;contract&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;country&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;          &lt;span class="p"&gt;...,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;salary_min&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;       &lt;span class="p"&gt;...,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;salary_max&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;       &lt;span class="p"&gt;...,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;source_url&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;       &lt;span class="p"&gt;...,&lt;/span&gt;
  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;posted_at&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;        &lt;span class="p"&gt;...,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;canonical_category()&lt;/code&gt; is a keyword-matching function that maps any free-text label into one of ~20 fixed buckets. Getting this right — especially across sources that use completely different taxonomies — took more iteration than anything else in the project.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Deduplication
&lt;/h3&gt;

&lt;p&gt;Jobs get cross-posted across sources constantly. Deduplication is slug-based: a SHA-256 hash of the source URL is truncated to 12 hex characters and appended to the slug. That gives 281 trillion unique combinations with no collision risk. The database has a &lt;code&gt;UNIQUE&lt;/code&gt; constraint on &lt;code&gt;source_url&lt;/code&gt; as a second safety net.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Storage
&lt;/h3&gt;

&lt;p&gt;Jobs live in PostgreSQL. Only the last 6 months of listings are kept — a cleanup job runs before each scrape to purge anything older.&lt;/p&gt;

&lt;p&gt;Job descriptions are sanitized with &lt;code&gt;bleach&lt;/code&gt; before storage — dangerous tags (&lt;code&gt;script&lt;/code&gt;, &lt;code&gt;iframe&lt;/code&gt;, event handlers) are stripped and only safe formatting tags (&lt;code&gt;p&lt;/code&gt;, &lt;code&gt;ul&lt;/code&gt;, &lt;code&gt;li&lt;/code&gt;, &lt;code&gt;strong&lt;/code&gt;, etc.) are kept. Descriptions are capped at 50KB.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. The Frontend
&lt;/h3&gt;

&lt;p&gt;The site is built with &lt;strong&gt;Nuxt 3&lt;/strong&gt; (Vue 3, SSR, TypeScript). Server-side rendering matters here because every job page needs to be crawlable.&lt;/p&gt;

&lt;p&gt;The job listing page supports filtering by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Category (Engineering, Design, Marketing, Data, DevOps, etc.)&lt;/li&gt;
&lt;li&gt;Work mode (Remote, Hybrid, On-site)&lt;/li&gt;
&lt;li&gt;Experience level (Entry, Mid, Senior, Lead)&lt;/li&gt;
&lt;li&gt;Country (40+ countries)&lt;/li&gt;
&lt;li&gt;Job type (Full-time, Part-time, Contract)&lt;/li&gt;
&lt;li&gt;Date posted (last 24h, 3 days, week, month)&lt;/li&gt;
&lt;li&gt;Salary range&lt;/li&gt;
&lt;li&gt;Visa sponsorship&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Filters hit a Supabase API endpoint with faceted aggregation via a custom PostgreSQL RPC — so sidebar counts update accurately with every filter combination without expensive full-table scans.&lt;/p&gt;

&lt;p&gt;One small detail: on the default unfiltered view, results are round-robin interleaved across all 9 scrapers so no single source dominates the top of the feed.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. The Email Digest
&lt;/h3&gt;

&lt;p&gt;Subscribers enter their email and set preferences — categories, work mode, send time. That's it. No password.&lt;/p&gt;

&lt;p&gt;Every morning after the scraper finishes, the email sender:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Queries all active subscribers&lt;/li&gt;
&lt;li&gt;Filters the last 24 hours of jobs against each subscriber's preferences&lt;/li&gt;
&lt;li&gt;Builds a digest — headline with total match count, 6 preview job cards, a CTA linking to the full filtered feed&lt;/li&gt;
&lt;li&gt;Sends via Resend API&lt;/li&gt;
&lt;li&gt;Updates &lt;code&gt;last_emailed_at&lt;/code&gt; on each subscriber row&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Unsubscribe is a single link click — no confirmation screen, no login. It sets &lt;code&gt;is_active = FALSE&lt;/code&gt;. Rows are never deleted.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Tech Stack
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Layer&lt;/th&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Frontend&lt;/td&gt;
&lt;td&gt;Nuxt 3 (Vue 3, SSR, TypeScript)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Styling&lt;/td&gt;
&lt;td&gt;SCSS + CSS custom properties (no Tailwind)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Database&lt;/td&gt;
&lt;td&gt;PostgreSQL&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DB hosting&lt;/td&gt;
&lt;td&gt;Supabase&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Frontend hosting&lt;/td&gt;
&lt;td&gt;Vercel&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Scraper&lt;/td&gt;
&lt;td&gt;Python&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cron runner&lt;/td&gt;
&lt;td&gt;Railway&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Email&lt;/td&gt;
&lt;td&gt;Resend API&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  The Biggest Technical Challenge
&lt;/h2&gt;

&lt;p&gt;Normalization. Every source has its own category system, experience labels, and remote-type conventions. Building &lt;code&gt;canonical_category()&lt;/code&gt; — a reliable function that maps any combination of title, tags, and source category into one of ~20 fixed buckets — required reading through thousands of real job titles and edge cases.&lt;/p&gt;

&lt;p&gt;A sample of what the mapping handles:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;data scientist&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;     &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;ml engineer&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;        &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;platform engineer&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;  &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;DevOps&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;entwickler&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;         &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Engineering&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;  &lt;span class="c1"&gt;# German: developer
&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;product owner&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;      &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Product&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;devrel&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;             &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Marketing&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Without this, filters would be useless — a "show me Engineering jobs" query would miss half the results because some source filed them under &lt;code&gt;"Software Development"&lt;/code&gt; or &lt;code&gt;"Tech"&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Skipped (Intentionally)
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;No Indeed scraping&lt;/strong&gt; — ToS risk, and the only reliable approach requires a paid proxy that wasn't in scope&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No user accounts&lt;/strong&gt; — subscribers only provide email + preferences. No passwords, no sessions, no JWTs&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;No job applications&lt;/strong&gt; — every listing links directly to the original source. DailyJobFeed is read-only&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;If you're building something similar or have questions about any part of the architecture, happy to discuss in the comments.&lt;/p&gt;

&lt;p&gt;🔗 &lt;a href="https://dailyjobfeed.com" rel="noopener noreferrer"&gt;dailyjobfeed.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>python</category>
      <category>vue</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Text Case Converter: The Complete Guide to camelCase, snake_case, kebab-case and More</title>
      <dc:creator>Harun Mahmud</dc:creator>
      <pubDate>Sat, 16 May 2026 03:47:09 +0000</pubDate>
      <link>https://dev.to/harun_mahmud_88/text-case-converter-the-complete-guide-to-camelcase-snakecase-kebab-case-and-more-2f0o</link>
      <guid>https://dev.to/harun_mahmud_88/text-case-converter-the-complete-guide-to-camelcase-snakecase-kebab-case-and-more-2f0o</guid>
      <description>&lt;p&gt;Every developer has been there — you copy a variable name from one codebase and it's in the wrong case for your project. Or you're converting a database column name to a JavaScript variable. Or you need to turn a human-readable label into a URL slug.&lt;/p&gt;

&lt;p&gt;Text case conversion is one of those small tasks you do dozens of times a day. Here's a complete guide to every case format and when to use each one.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Most Common Cases
&lt;/h2&gt;

&lt;h3&gt;
  
  
  camelCase
&lt;/h3&gt;

&lt;p&gt;Words are joined together, first word lowercase, subsequent words capitalized.&lt;br&gt;
helloWorld&lt;br&gt;
firstName&lt;br&gt;
getUserById&lt;br&gt;
myVariableName&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Used for:&lt;/strong&gt; JavaScript/TypeScript variables, function names, object properties, JSON keys.&lt;/p&gt;




&lt;h3&gt;
  
  
  PascalCase (UpperCamelCase)
&lt;/h3&gt;

&lt;p&gt;Same as camelCase but the first letter is also capitalized.&lt;br&gt;
HelloWorld&lt;br&gt;
FirstName&lt;br&gt;
GetUserById&lt;br&gt;
MyComponent&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Used for:&lt;/strong&gt; React components, TypeScript interfaces, class names, constructors.&lt;/p&gt;




&lt;h3&gt;
  
  
  snake_case
&lt;/h3&gt;

&lt;p&gt;Words are separated by underscores, all lowercase.&lt;br&gt;
hello_world&lt;br&gt;
first_name&lt;br&gt;
get_user_by_id&lt;br&gt;
my_variable_name&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Used for:&lt;/strong&gt; Python variables, database column names, Ruby, file names in some projects.&lt;/p&gt;




&lt;h3&gt;
  
  
  SCREAMING_SNAKE_CASE
&lt;/h3&gt;

&lt;p&gt;All uppercase with underscores.&lt;br&gt;
HELLO_WORLD&lt;br&gt;
MAX_RETRY_COUNT&lt;br&gt;
API_BASE_URL&lt;br&gt;
DATABASE_HOST&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Used for:&lt;/strong&gt; Constants, environment variables, config values.&lt;/p&gt;




&lt;h3&gt;
  
  
  kebab-case
&lt;/h3&gt;

&lt;p&gt;Words separated by hyphens, all lowercase.&lt;br&gt;
hello-world&lt;br&gt;
first-name&lt;br&gt;
get-user-by-id&lt;br&gt;
my-component&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Used for:&lt;/strong&gt; CSS class names, HTML attributes, URL slugs, file names, CLI flags.&lt;/p&gt;




&lt;h3&gt;
  
  
  Title Case
&lt;/h3&gt;

&lt;p&gt;Each word starts with a capital letter.&lt;br&gt;
Hello World&lt;br&gt;
First Name&lt;br&gt;
Get User By Id&lt;br&gt;
My Variable Name&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Used for:&lt;/strong&gt; Page titles, headings, button labels, UI text.&lt;/p&gt;




&lt;h3&gt;
  
  
  dot.case
&lt;/h3&gt;

&lt;p&gt;Words separated by dots, all lowercase.&lt;br&gt;
hello.world&lt;br&gt;
first.name&lt;br&gt;
config.database.host&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Used for:&lt;/strong&gt; Config file keys, logging namespaces, some API response formats.&lt;/p&gt;




&lt;h2&gt;
  
  
  Quick Reference Table
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Case&lt;/th&gt;
&lt;th&gt;Example&lt;/th&gt;
&lt;th&gt;Common Use&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;camelCase&lt;/td&gt;
&lt;td&gt;&lt;code&gt;myVariable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;JS variables, JSON keys&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;PascalCase&lt;/td&gt;
&lt;td&gt;&lt;code&gt;MyComponent&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Classes, React components&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;snake_case&lt;/td&gt;
&lt;td&gt;&lt;code&gt;my_variable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Python, databases&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;SCREAMING_SNAKE&lt;/td&gt;
&lt;td&gt;&lt;code&gt;MY_CONSTANT&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Constants, env vars&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;kebab-case&lt;/td&gt;
&lt;td&gt;&lt;code&gt;my-variable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;CSS, URLs, HTML&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Title Case&lt;/td&gt;
&lt;td&gt;&lt;code&gt;My Variable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;UI labels, headings&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;dot.case&lt;/td&gt;
&lt;td&gt;&lt;code&gt;my.variable&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Config, namespaces&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  How to Convert in JavaScript
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hello world example&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// to camelCase&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;camel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\s(&lt;/span&gt;&lt;span class="sr"&gt;.&lt;/span&gt;&lt;span class="se"&gt;)&lt;/span&gt;&lt;span class="sr"&gt;/g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;_&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="c1"&gt;// "helloWorldExample"&lt;/span&gt;

&lt;span class="c1"&gt;// to PascalCase&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pascal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;^&lt;/span&gt;&lt;span class="se"&gt;\w&lt;/span&gt;&lt;span class="sr"&gt;|&lt;/span&gt;&lt;span class="se"&gt;\s\w)&lt;/span&gt;&lt;span class="sr"&gt;/g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;c&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;trim&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="c1"&gt;// "HelloWorldExample"&lt;/span&gt;

&lt;span class="c1"&gt;// to snake_case&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;snake&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\s&lt;/span&gt;&lt;span class="sr"&gt;+/g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;_&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="c1"&gt;// "hello_world_example"&lt;/span&gt;

&lt;span class="c1"&gt;// to kebab-case&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;kebab&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\s&lt;/span&gt;&lt;span class="sr"&gt;+/g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;-&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toLowerCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="c1"&gt;// "hello-world-example"&lt;/span&gt;

&lt;span class="c1"&gt;// to SCREAMING_SNAKE_CASE&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;screaming&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;str&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;\s&lt;/span&gt;&lt;span class="sr"&gt;+/g&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;_&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;toUpperCase&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="c1"&gt;// "HELLO_WORLD_EXAMPLE"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  How to Convert in Python
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;re&lt;/span&gt;

&lt;span class="n"&gt;text&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;hello world example&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

&lt;span class="c1"&gt;# to snake_case
&lt;/span&gt;&lt;span class="n"&gt;snake&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;_&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;lower&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="c1"&gt;# "hello_world_example"
&lt;/span&gt;
&lt;span class="c1"&gt;# to kebab-case
&lt;/span&gt;&lt;span class="n"&gt;kebab&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;replace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;-&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;lower&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="c1"&gt;# "hello-world-example"
&lt;/span&gt;
&lt;span class="c1"&gt;# to PascalCase
&lt;/span&gt;&lt;span class="n"&gt;pascal&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;""&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;word&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;capitalize&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;word&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;span class="c1"&gt;# "HelloWorldExample"
&lt;/span&gt;
&lt;span class="c1"&gt;# to camelCase
&lt;/span&gt;&lt;span class="n"&gt;words&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;split&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="n"&gt;camel&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;words&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;lower&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="sh"&gt;""&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;w&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;capitalize&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;w&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;words&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;:])&lt;/span&gt;
&lt;span class="c1"&gt;# "helloWorldExample"
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Stop Converting Manually
&lt;/h2&gt;

&lt;p&gt;Writing a one-off conversion function every time gets old fast. A dedicated tool lets you paste any text and instantly see all formats side by side — camelCase, PascalCase, snake_case, kebab-case, SCREAMING_SNAKE, Title Case, dot.case and more in one click.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://toolscraft.io/text-case" rel="noopener noreferrer"&gt;ToolsCraft Text Case Converter&lt;/a&gt; — paste any text, convert to any case instantly. Free, works in your browser, no account needed.&lt;/p&gt;




&lt;h2&gt;
  
  
  When You're Working Across Languages
&lt;/h2&gt;

&lt;p&gt;The case confusion gets worse when you're working across different parts of a stack:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Your &lt;strong&gt;database&lt;/strong&gt; uses &lt;code&gt;snake_case&lt;/code&gt; columns&lt;/li&gt;
&lt;li&gt;Your &lt;strong&gt;API response&lt;/strong&gt; uses &lt;code&gt;camelCase&lt;/code&gt; JSON keys
&lt;/li&gt;
&lt;li&gt;Your &lt;strong&gt;CSS&lt;/strong&gt; uses &lt;code&gt;kebab-case&lt;/code&gt; classes&lt;/li&gt;
&lt;li&gt;Your &lt;strong&gt;constants&lt;/strong&gt; use &lt;code&gt;SCREAMING_SNAKE_CASE&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Your &lt;strong&gt;React components&lt;/strong&gt; use &lt;code&gt;PascalCase&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All from the same underlying concept — just named differently depending on where it lives. A quick converter saves you the mental overhead of doing it by hand every time.&lt;/p&gt;




&lt;p&gt;Which case format trips you up most often when switching between languages or frameworks? Drop it in the comments 👇&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>tools</category>
    </item>
    <item>
      <title>JSON Formatter: 5 Ways to Pretty-Print JSON (Online, CLI, VS Code, JavaScript &amp; Python)</title>
      <dc:creator>Harun Mahmud</dc:creator>
      <pubDate>Mon, 11 May 2026 17:55:52 +0000</pubDate>
      <link>https://dev.to/harun_mahmud_88/json-formatter-5-ways-to-pretty-print-json-online-cli-vs-code-javascript-python-5150</link>
      <guid>https://dev.to/harun_mahmud_88/json-formatter-5-ways-to-pretty-print-json-online-cli-vs-code-javascript-python-5150</guid>
      <description>&lt;p&gt;If you've ever stared at a wall of minified JSON like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;"user"&lt;/span&gt;&lt;span class="p"&gt;:{&lt;/span&gt;&lt;span class="nl"&gt;"id"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"John"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"email"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="s2"&gt;"john@example.com"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nl"&gt;"roles"&lt;/span&gt;&lt;span class="p"&gt;:[&lt;/span&gt;&lt;span class="s2"&gt;"admin"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="s2"&gt;"editor"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="nl"&gt;"active"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;}}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You know how painful it is to read. Here are 5 ways to format it instantly depending on where you're working.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Online JSON Formatter (fastest, no install)
&lt;/h2&gt;

&lt;p&gt;If you just need to quickly format a JSON response from an API or debug a config file, an online tool is the fastest option.&lt;/p&gt;

&lt;p&gt;The important thing is to use one that runs in your browser and doesn't send your data to a server — especially if your JSON contains tokens, user data, or anything sensitive.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://toolscraft.io/json-formatter" rel="noopener noreferrer"&gt;ToolsCraft JSON Formatter&lt;/a&gt; — formats, validates, and minifies JSON entirely client-side. Nothing leaves your machine.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. VS Code (best for files)
&lt;/h2&gt;

&lt;p&gt;VS Code has JSON formatting built in. Open your &lt;code&gt;.json&lt;/code&gt; file and press:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Windows/Linux:&lt;/strong&gt; &lt;code&gt;Shift + Alt + F&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mac:&lt;/strong&gt; &lt;code&gt;Shift + Option + F&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Or right-click → Format Document.&lt;/p&gt;

&lt;p&gt;To auto-format on save, add this to your &lt;code&gt;settings.json&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"[json]"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"editor.formatOnSave"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  3. JavaScript (in your code)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;ugly&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;{"name":"John","age":30,"city":"New York"}&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pretty&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;stringify&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;JSON&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;parse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;ugly&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;pretty&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The third argument in &lt;code&gt;JSON.stringify&lt;/code&gt; is the indentation level. Use &lt;code&gt;2&lt;/code&gt; or &lt;code&gt;4&lt;/code&gt; depending on your preference.&lt;/p&gt;




&lt;h2&gt;
  
  
  4. Python (scripts &amp;amp; data processing)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;

&lt;span class="n"&gt;ugly&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;name&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;John&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;age&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;:30,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;city&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;New York&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;
&lt;span class="n"&gt;parsed&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;loads&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;ugly&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;pretty&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;json&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;dumps&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;parsed&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;indent&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;pretty&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Or directly from the terminal on any JSON file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python &lt;span class="nt"&gt;-m&lt;/span&gt; json.tool yourfile.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  5. Command Line with jq (power users)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# Install&lt;/span&gt;
brew &lt;span class="nb"&gt;install &lt;/span&gt;jq  &lt;span class="c"&gt;# Mac&lt;/span&gt;
apt-get &lt;span class="nb"&gt;install &lt;/span&gt;jq  &lt;span class="c"&gt;# Linux&lt;/span&gt;

&lt;span class="c"&gt;# Format a file&lt;/span&gt;
jq &lt;span class="nb"&gt;.&lt;/span&gt; yourfile.json

&lt;span class="c"&gt;# Format API response directly&lt;/span&gt;
curl https://api.example.com/users | jq &lt;span class="nb"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Quick comparison
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;Best for&lt;/th&gt;
&lt;th&gt;Install needed&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Online tool&lt;/td&gt;
&lt;td&gt;Quick debugging, API responses&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;VS Code&lt;/td&gt;
&lt;td&gt;Working with JSON files&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JavaScript&lt;/td&gt;
&lt;td&gt;In your app code&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Python&lt;/td&gt;
&lt;td&gt;Scripts, data processing&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;jq&lt;/td&gt;
&lt;td&gt;Terminal, pipelines&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  Bonus: Validate while formatting
&lt;/h2&gt;

&lt;p&gt;A good formatter should also validate your JSON and tell you exactly where the error is. If you paste invalid JSON:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"John"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"age"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That trailing comma makes it invalid. A proper formatter should highlight the exact line and character where the error is — not just silently fail.&lt;/p&gt;

&lt;p&gt;The &lt;a href="https://toolscraft.io/json-formatter" rel="noopener noreferrer"&gt;ToolsCraft JSON Formatter&lt;/a&gt; shows inline error highlighting, which saves a lot of head-scratching.&lt;/p&gt;




&lt;p&gt;That's it! Use the online tool for quick jobs, VS Code for files, and jq if you live in the terminal.&lt;/p&gt;

&lt;p&gt;What's your go-to method for formatting JSON? Drop it in the comments 👇&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>tools</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
