T
development web-dev typescript wasm graphql astro prisma file-extensions

Developer Tools and Source Extensions Reference: WASM, TSX, GraphQL, and More

A complete guide to modern developer file extensions. Learn about .wasm, .wat, .map, .tsx, .d.ts, .vue, .astro, .prisma, and .graphql, and their roles in the modern tech stack.

2026-04-11

Developer Tools and Source Extensions Reference: WASM, TSX, GraphQL, and More

The modern developer's toolkit is full of specialized file formats. From compiled WebAssembly modules to type definition files and domain-specific languages for databases, understanding these extensions is key to navigating any modern codebase.

This reference guide explains the "who, what, and why" of common development-specific file extensions.

Quick Reference Table: Development Source Extensions

Extension Full Name Ecosystem Purpose
.wasm WebAssembly Binary Web / Edge Computing Compiled code for high-performance web apps
.wat WebAssembly Text Web Development Human-readable version of WASM
.map Source Map Web Development Mapping minified code back to source for debugging
.d.ts Type Definition TypeScript Describing the shape of JavaScript libraries
.tsx / .jsx TypeScript/JS XML React / Solid Combining logic and UI in a single file
.vue / .svelte Vue/Svelte Component Vue / Svelte Single File Components (SFCs)
.astro Astro Component Astro Framework Island-based web components
.mdx Markdown with JSX Documentation Interactive documentation with React components
.prisma Prisma Schema Database / ORM Defining database models and relationships
.graphql / .gql GraphQL Query/Schema APIs / GraphQL Defining API schemas and data queries

1. The High-Performance Web (.wasm, .wat)

WebAssembly (WASM) allows code written in languages like C++, Rust, or Go to run in the browser at near-native speeds.

  • WASM: A binary file that the browser executes. You don't edit this directly.
  • WAT: The human-readable text format of WASM. It looks like Lisp (lots of parentheses) and is used for manual inspection or learning how WebAssembly works.

2. TypeScript and React (.d.ts, .tsx, .jsx)

As the web moved towards "Component-Based" UI, new formats were needed to mix HTML-like tags with JavaScript/TypeScript logic.

  • JSX / TSX: Used by React and similar frameworks. It allows you to write <div> tags directly inside your functions.
  • D.TS: These are "declaration" files. They don't contain any executable code; they just tell the TypeScript compiler what functions and variables exist in a JavaScript library, providing you with better autocomplete (IntelliSense).

3. Modern Framework Components (.vue, .svelte, .astro)

Many modern frameworks use Single File Components (SFCs), where the HTML, CSS, and Logic for a specific UI element live together in one file.

  • Vue & Svelte: Use specific extensions for their component logic.
  • Astro: A newer framework (which powers this very site!) that allows you to use components from any other framework (React, Vue, Svelte) together.

4. Database and API Schemas (.prisma, .graphql)

As apps get more complex, we need dedicated languages to define how data is structured and how it's queried.

  • Prisma: A modern database toolkit. You define your tables and relationships in a .prisma file, and it automatically generates the database for you.
  • GraphQL: An alternative to REST APIs. .graphql files define the "Schema" (what data is available) and the "Queries" (exactly what data you want to fetch).

5. Debugging and Documentation (.map, .mdx)

  • Source Maps (.map): When you deploy code, it's usually "minified" into a single, unreadable line to save space. A .map file tells your browser's debugger exactly which line of the original source code corresponds to the minified line, making it possible to debug your app in production.
  • MDX: The best of both worlds—it allows you to write standard Markdown but import and use React components inside the document. Perfect for interactive technical documentation.

Common Questions (FAQ)

Q: Why can't I run a .wasm file directly?

A: WASM is a low-level format designed to be executed by a virtual machine (usually inside a web browser or a runtime like Wasmtime). It needs a "host" environment to manage memory and inputs/outputs.

Q: Do I need to commit .map files to my Git repository?

A: Generally, no. Source maps are generated during the build process. However, you should upload them to your error-tracking service (like Sentry) so you can see readable stack traces when errors occur.

Q: What is the difference between .gql and .graphql?

A: There is no technical difference. Both are used for GraphQL schemas and queries. Most IDE plugins recognize both equally.

Related Tools on Tool3M

  • JSON Formatter: Useful for inspecting the JSON data returned by your GraphQL queries.
  • Code Minifier: Compress your code and generate source maps for better performance.
Back to Blog