Newly availableUseful for static configuration and bundled data. Prefer it when JSON should behave like part of the module graph.
JSON Newly available

JSON import attributes

JSON module imports let JavaScript load JSON data through the module system with explicit type metadata. This keeps data loading closer to the source file and makes intent clearer.

JSONModulesImports

Overview

JSON module imports let JavaScript load JSON data through the module system with explicit type metadata. This keeps data loading closer to the source file and makes intent clearer.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
javascript.grammar.trailing_commas.trailing_commas_in_dynamic_import
91
91
138
15
91
15
Statement
import attributes.type json

`with {type: 'json'}`
123
123
138
17.2
123
17.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
import config from './config.json' with { type: 'json' };

console.log(config.apiUrl);

Use cases

  • Static configuration

    Import build-time settings, lookup tables, or locale data directly into module code.

  • Bundled datasets

    Treat JSON assets as part of the application bundle instead of issuing a separate runtime fetch.

Cautions

  • Module-based JSON is best for static or bundled data, not for user-controlled remote content.
  • Tooling and runtime support need to agree on the import syntax you choose.

Accessibility

  • Static data imports can reduce loading complexity for user-facing content and labels.
  • If imported JSON powers accessible names or messages, keep the data validated and complete.

Related links

Powered by web-features