← Back to News
Tools

JSON Import Attributes Give Browser Tools a Native Module Path

JSON Import Attributes Give Browser Tools a Native Module Path

What Changed for JSON Modules

JSON module imports are now a practical browser feature instead of a bundler-only habit. MDN marks import attributes as Baseline 2025, and the Web Platform DX feature data lists JSON import attributes as Baseline Newly Available since April 29, 2025.

The browser syntax is explicit: a module can import a JSON file with with { type: "json" }. The imported JSON value is parsed by the module loader and exposed as the module's default export, so there is no separate JSON.parse() call in application code.

Why MIME Validation Matters

The important part is not just convenience. Web module loading relies on the response media type rather than the URL suffix. MDN and the TC39 proposal both describe the security problem: a file that looks like JSON by name could be served with a JavaScript MIME type and accidentally run as code if the runtime did not have an explicit type marker.

With import attributes, a JSON module import must be served as JSON. If the response uses a different media type, the import fails instead of silently treating the resource as a JavaScript module. That makes JSON fixture loading easier to reason about when code moves between a local page, a browser extension, and a hosted developer tool.

How Local Tools Can Use It

A local-first JSON utility still needs paste, file upload, and drag-and-drop paths for user-supplied payloads. JSON module imports are different: they fit static fixtures, examples, schemas, demos, and test data that ship beside a browser tool.

For fixjson.org-style workflows, the useful lesson is architectural. Browser features are making more JSON work possible inside the tab, while still keeping strict parsing and MIME validation visible to the developer. That supports the same privacy-conscious pattern as a formatter or diff tool that processes pasted input locally.

Compatibility Guidance

Tool authors should feature-test or keep a fetch fallback when supporting older browsers. MDN notes that JSON modules expose only a default export, and web.dev calls out that strict module MIME checking still applies.

The practical rule is simple: use with { type: "json" } for module-time JSON fixtures, use fetch() when the JSON may change during the page lifetime, and keep user-pasted or sensitive payloads on the local browser path rather than uploading them to a server just to inspect them.

Sources

Related on fixjson.org