> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/zhcndoc/bun/llms.txt
> Use this file to discover all available pages before exploring further.
# Loaders
> Built-in loaders for the Bun bundler and runtime
The Bun bundler implements a set of default loaders out of the box.
> As a general rule: **The bundler and runtime both support the same set of file types.**
`.js` `.cjs` `.mjs` `.mts` `.cts` `.ts` `.tsx` `.jsx` `.css` `.json` `.jsonc` `.toml` `.yaml` `.yml` `.txt` `.wasm` `.node` `.html` `.sh`
Bun uses the file extension to determine which built-in loader should be used to parse the file. Each loader has a name, such as `js`, `tsx`, or `json`. These names are used when building custom loader plugins that extend Bun.
You can explicitly specify which loader to use using the `'type'` import attribute.
```ts theme={null}
import my_toml from "./my_file" with { type: "toml" };
// or with dynamic import
const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });
```
## Built-in loaders
### `js`
**The JavaScript loader.** Used by default for `.cjs` and `.mjs` files.
Parses the code and applies a set of default transformations like dead code elimination and tree shaking. Note that Bun does not currently attempt to down-convert syntax.
***
### `jsx`
**The JavaScript + JSX loader.** Used by default for `.js` and `.jsx` files.
Identical to the `js` loader, but supports JSX syntax. By default, JSX is down-converted to vanilla JavaScript; the specifics of how JSX is transformed depends on the `jsx*` compiler options in your `tsconfig.json`. Refer to the [TypeScript docs on JSX](https://www.typescriptlang.org/tsconfig#jsx) for details.
***
### `ts`
**The TypeScript loader.** Used by default for `.ts`, `.mts`, and `.cts` files.
Strips all TypeScript syntax, then behaves identically to the `js` loader. Bun does not perform typechecking.
***
### `tsx`
**The TypeScript + JSX loader.** Used by default for `.tsx` files.
Transpiles TypeScript and JSX to vanilla JavaScript.
***
### `json`
**The JSON loader.** Used by default for `.json` files.
JSON files can be directly imported.
```js theme={null}
import pkg from "./package.json";
pkg.name; // => "my-package"
```
During bundling, the parsed JSON is inlined into the bundle as a JavaScript object.
```js theme={null}
const pkg = {
name: "my-package",
// ... other fields
};
pkg.name;
```
If a `.json` file is passed as an entrypoint to the bundler, it will be converted to a `.js` module that `export default`s the parsed object.
```json Input theme={null}
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com"
}
```
```js Output theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `jsonc`
**The JSON with comments (JSONC) loader.** Used by default for `.jsonc` files.
JSON with comments (JSONC) files can be directly imported. Bun will parse and strip out the comments and trailing commas.
```js theme={null}
import config from "./config.jsonc";
console.log(config);
```
During bundling, the parsed JSONC is inlined into the bundle as a JavaScript object, identical to the `json` loader.
```js theme={null}
var config = {
option: "value",
};
```
Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files.
***
### `toml`
**The TOML loader.** Used by default for `.toml` files.
TOML files can be directly imported. Bun will parse them using its fast native TOML parser.
```js theme={null}
import config from "./bunfig.toml";
config.logLevel; // => "debug"
// With import attributes:
// import myCustomTOML from './my.config' with {type: "toml"};
```
During bundling, the parsed TOML is inlined into the bundle as a JavaScript object.
```js theme={null}
var config = {
logLevel: "debug",
// ...other fields
};
config.logLevel;
```
If a `.toml` file is passed as an entrypoint to the bundler, it will be converted to a `.js` module that `export default`s the parsed object.
```toml Input theme={null}
name = "John Doe"
age = 35
email = "johndoe@example.com"
```
```js Output theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `yaml`
**The YAML loader.** Used by default for `.yaml` and `.yml` files.
YAML files can be directly imported. Bun will parse them using its fast native YAML parser.
```js theme={null}
import config from "./config.yaml";
console.log(config);
// With import attributes:
import data from "./data.txt" with { type: "yaml" };
```
During bundling, the parsed YAML is inlined into the bundle as a JavaScript object.
```js theme={null}
var config = {
name: "my-app",
version: "1.0.0",
// ...other fields
};
```
If a `.yaml` or `.yml` file is passed as an entrypoint to the bundler, it will be converted to a `.js` module that `export default`s the parsed object.
```yaml Input theme={null}
name: John Doe
age: 35
email: johndoe@example.com
```
```js Output theme={null}
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `text`
**The text loader.** Used by default for `.txt` files.
The contents of the text file are read and inlined into the bundle as a string. Text files can be directly imported. The file contents are read and returned as a string.
```js theme={null}
import contents from "./file.txt";
console.log(contents); // => "Hello, world!"
// Import HTML file as text
// You can override the default loader with the "type" attribute.
import html from "./index.html" with { type: "text" };
```
During bundling, the file contents are inlined into the bundle as a string.
```js theme={null}
var contents = `Hello, world!`;
console.log(contents);
```
If a `.txt` file is passed as an entrypoint, it will be converted to a `.js` module that `export default`s the file contents.
```txt Input theme={null}
Hello, world!
```
```js Output theme={null}
export default "Hello, world!";
```
***
### `napi`
**The native addon loader.** Used by default for `.node` files.
At runtime, native addons can be directly imported.
```js theme={null}
import addon from "./addon.node";
console.log(addon);
```
In the bundler, `.node` files are treated with the file loader.
***
### `sqlite`
**The SQLite loader.** Requires the `with { "type": "sqlite" }` import attribute.
SQLite database files can be directly imported in the runtime and bundler. The database will be loaded using `bun:sqlite`.
```js theme={null}
import db from "./my.db" with { type: "sqlite" };
```
This feature is only supported when the target is `bun`.
By default, the database file is external to the bundle (so you can load the database elsewhere), meaning the database file on disk is not bundled into the final output.
You can change this behavior with the `"embed"` attribute:
```js theme={null}
// Embed the database into the bundle
import db from "./my.db" with { type: "sqlite", embed: "true" };
```
When using standalone executables, the database is embedded into the standalone executable.
Otherwise, embedded databases are copied to the output directory `outdir` with a hashed filename.
***
### `html`
**The HTML loader.** Used by default for `.html` files.
The `html` loader processes HTML files and bundles all referenced assets. It will:
* Bundle and hash referenced JavaScript files (`