The file formats you meet in vibe coding—how do you tell them apart?

Why do you get stuck on extensions before code?

People learning to vibe code get stuck on something before the code itself: file extensions. The moment unfamiliar extensions like .json, .yaml, .env, .md pour in, they give up with 'I knew it, I'm not a developer.' Yet these dozens of formats fall into just three groups.

Containers that hold data, things that display on screen, settings and secrets. Grasp just these three branches and, even for an extension you've never seen, you get a sense of which box it belongs to. The table below is that map.

Format	Stands for	Group	One-line definition
CSV	Comma-Separated Values	Data	A table with all the formatting stripped from a spreadsheet
JSON	JavaScript Object Notation	Data	A box with labels (the common tongue of apps and AI)
XML	eXtensible Markup Language	Data	Old-style data wrapped in tags
HTML	HyperText Markup Language	Screen	The skeleton of a web page
Markdown (.md)	Not an acronym · a play on 'markup'	Screen	Text formatted with a few symbols
YAML	YAML Ain't Markup Language (a recursive acronym)	Settings	Settings organized by indentation
.env	environment	Secret	A safe holding API keys and passwords
TXT	text	Other	Plain characters with no rules at all

Formats that hold data: CSV, JSON, XML

CSV is a pure table with all color and formatting stripped out and columns separated by commas. The first row is the column names, and data follows from the next row. Order histories from a shop or survey results usually come as CSV, and it is easy to hand straight to AI for analysis.

JSON is today's de facto standard for programs exchanging data. Each value carries a label, and you can nest a box inside a box. AI API responses, app settings, and database results are almost all JSON, so it's what you meet most often when vibe coding.

XML is the old way of wrapping the same data in opening and closing tags. It is still used in the aging systems of government offices and banks, and interestingly, if you crack open an Excel file (.xlsx), the inside is XML. For new work, people usually pick the lighter JSON.

Put all three side by side for the same single order and the shapes become obvious at a glance.

orders.csv

order_id,name,price,qty,status
1001,Americano,4500,2,paid
1002,Cafe Latte,5000,1,paid
1003,Cold Brew,5500,3,pending
1004,Espresso,4000,1,cancelled

response.json

{
  "customer": { "id": "sh", "name": "SH Consulting", "vip": true },
  "orders": [
    { "item": "Americano", "price": 4500, "qty": 2 },
    { "item": "Cold Brew", "price": 5500, "qty": 3 }
  ],
  "total": 25500,
  "paid": true
}

order.xml

<order id="1001" status="paid">
  <customer>SH Consulting</customer>
  <items>
    <item qty="2">
      <name>Americano</name>
      <price>4500</price>
    </item>
    <item qty="3">
      <name>Cold Brew</name>
      <price>5500</price>
    </item>
  </items>
  <total>25500</total>
</order>

Formats that display: HTML, Markdown

HTML is the blueprint the browser uses to draw the screen. Tags specify what each thing is—<h1> a heading, <p> a paragraph, <button> a button. A website or email newsletter built by vibe coding is all HTML, and skeleton (HTML), styling (CSS), and behavior (JavaScript) move as one set.

Markdown (.md) is text whose formatting is expressed with simple symbols like # or -. It takes five minutes to learn, stays readable even with the symbols attached, and renders into a clean document. GitHub READMEs, AI chatbot answers, and Notion memos are mostly Markdown.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SH Consulting</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>We help teams adopt AI.</p>
    <ul>
      <li>Corporate training</li>
      <li>Vibe coding</li>
    </ul>
    <button>Contact us</button>
  </body>
</html>

README.md

# Project Title

A short intro paragraph goes here.

## Install

- npm install
- npm run dev

## Features

- First feature
- Second feature
- Third feature

> A blockquote looks like this.

**Bold**, *italic*, and a [link](https://sh.consulting).

Settings and secrets: YAML, .env

YAML is the same data as JSON, organized by indentation instead of brackets. It is easy for humans to read, so it is often used for deployment and app configuration. Just beware: a single wrong space can break the whole thing, so watch the indentation.

.env is a file that holds sensitive values like API keys and passwords, separated from the code. When you connect an AI service, this is where the key goes. There is one iron rule: never push .env to a public repository. Doing so hands your entire key to strangers. That's why it is usually excluded via .gitignore.

config.yaml

app:
  name: my-app
  port: 3000
  debug: false

database:
  host: localhost
  port: 5432
  name: shdb

features:
  - login
  - search
  - export

users:
  - name: sh
    role: admin
  - name: guest
    role: viewer

.env

# Server
PORT=3000
NODE_ENV=production

# AI / external API keys
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx
AZURE_OPENAI_ENDPOINT=https://example.openai.azure.com

# Database
DATABASE_URL=postgres://user:pass@localhost:5432/shdb

How to read an extension at a glance

The core instinct is simple. CSV, JSON, XML, and YAML are data—the contents. HTML and Markdown are the text and screen that display. .env is a secret. If just seeing the extension gives you the sense of 'this is data, this is screen, this is settings,' that's enough.

From an AX (AI transformation) standpoint this instinct matters more than it seems. When a non-developer builds something with AI, the real barrier is often not code syntax but a vague fear of unfamiliar files. The moment you hold the map that sorts extensions into three groups, unfamiliar files stop being scary. That is exactly when vibe coding truly begins.