Thomas Steiner, Developer Relations Engineer at Google, recently published a blog post announcing that JSON module scripts were now available in all modern browsers. Developers using the latest version of modern browsers can now directly import JSON modules into their JavaScript code. The feature builds on the Import Attributes proposal. Native CSS modules import may soon follow.
Import attributes tell the runtime how a particular module should be loaded. The primary use case is to load non-JS modules, such as JSON modules and CSS modules.
Steiner provides the following code sample to illustrate the syntax:
import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };
const {explanation, title, url} = astronomyPictureOfTheDay;
document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });
Non-browser runtimes such as Deno align with browser semantics:
import file from "./version.json" with { type: "json" };
console.log(file.version);
const module = await import("./version.json", {
with: { type: "json" },
});
console.log(module.default.version);
{
"version": "1.0.0"
}
In both cases, there is no JSON parsing needed as all major browsers implemented the native parsing as part of Interop 2025 (Baseline Newly available). Previously, web developers’ options included using a bundler, an extra transpilation step, or using polyfills to support those browsers that had not implemented the feature yet.
On the web, each import statement results in an HTTP request. The response is then prepared into a JavaScript value and made available to the program by the runtime. The specification explicitly calls out type: "json" to be supported. The type attribute however also supports CSS modules:
import styles from "https://example.com/styles.css" with { type: "css" };
As a developer noted on Reddit, CSS module imports are not part of Interop 2025 but may be included in the next Interop:
I proposed it for Interop 2025 but it was rejected, so hopefully next year. Though it is currently supported in Chrome.
With CSS, the result of importing a CSS file would be a constructable stylesheet, something that you could feed directly to a DOM API like
adoptedStyleSheets(e.g. custom elements / Web Components)
[…] Just gotta wait for the CFP for Interop 2026
While this was considered in earlier versions of the proposal, JSON modules do not however support named exports. The proposal champions opted not to allow named exports because not all JSON documents are objects, and in their opinion, it made more sense to think of a JSON document as conceptually “a single thing” rather than several things that happen to be side-by-side in a file.
Developers can review the browser compatibility of the Import Attributes syntax, CSS module imports, and JSON module imports on MDN.
