# Loaders (/docs/bundler/loaders)
Related: [Fullstack dev server](/docs/bundler/fullstack.md), [Hot reloading](/docs/bundler/hot-reloading.md), [HTML & static sites](/docs/bundler/html-static.md), [Standalone HTML](/docs/bundler/standalone-html.md), [CSS](/docs/bundler/css.md), [Single-file executable](/docs/bundler/executables.md)
The Bun bundler has a set of built-in loaders.
> As a rule of thumb: **the bundler and the runtime both support the same set of file types by default.**
`.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 choose which built-in loader parses the file. Every loader has a name, such as `js`, `tsx`, or `json`. Plugins that extend Bun with custom loaders refer to these names.
To specify a loader explicitly, use the `'type'` import attribute.
```ts title="index.ts" icon="/icons/typescript.svg"
import my_toml from "./my_file" with { type: "toml" };
// or with dynamic imports
const { default: my_toml } = await import("./my_file", { with: { type: "toml" } });
```
## Built-in loaders [#built-in-loaders]
### `js` [#js]
**JavaScript loader.** Default for `.cjs` and `.mjs`.
Parses the code and applies a set of default transforms like dead-code elimination and tree shaking. Bun does not down-convert syntax.
***
### `jsx` [#jsx]
**JavaScript + JSX loader.** Default for `.js` and `.jsx`.
Same as the `js` loader, but JSX syntax is supported. By default, JSX is down-converted to plain JavaScript; the exact output depends on the `jsx*` compiler options in your `tsconfig.json`. See the [TypeScript documentation on JSX](https://www.typescriptlang.org/tsconfig#jsx).
***
### `ts` [#ts]
**TypeScript loader.** Default for `.ts`, `.mts`, and `.cts`.
Strips out all TypeScript syntax, then behaves identically to the `js` loader. Bun does not perform typechecking.
***
### `tsx` [#tsx]
**TypeScript + JSX loader.** Default for `.tsx`.
Transpiles both TypeScript and JSX to vanilla JavaScript.
***
### `json` [#json]
**JSON loader.** Default for `.json`.
JSON files can be directly imported.
```js
import pkg from "./package.json";
pkg.name; // => "my-package"
```
During bundling, the parsed JSON is inlined into the bundle as a JavaScript object.
```js
const pkg = {
name: "my-package",
// ... other fields
};
pkg.name;
```
If a `.json` file is passed as an entrypoint to the bundler, it is converted to a `.js` module that `export default`s the parsed object.
Input
Output
```json
{
"name": "John Doe",
"age": 35,
"email": "johndoe@example.com"
}
```
```js
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `jsonc` [#jsonc]
**JSON with Comments loader.** Default for `.jsonc`.
JSONC (JSON with Comments) files can be directly imported. Bun parses them, stripping out comments and trailing commas.
```js
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
var config = {
option: "value",
};
```
Bun automatically uses the `jsonc` loader for `tsconfig.json`, `jsconfig.json`, `package.json`, and `bun.lock` files.
***
### `toml` [#toml]
**TOML loader.** Default for `.toml`.
TOML files can be directly imported. Bun parses them with its native TOML parser.
```js
import config from "./bunfig.toml";
config.logLevel; // => "debug"
// with an import attribute:
// import myCustomTOML from './my.config' with {type: "toml"};
```
During bundling, the parsed TOML is inlined into the bundle as a JavaScript object.
```js
var config = {
logLevel: "debug",
// ...other fields
};
config.logLevel;
```
If a `.toml` file is passed as an entrypoint, it is converted to a `.js` module that `export default`s the parsed object.
Input
Output
```toml
name = "John Doe"
age = 35
email = "johndoe@example.com"
```
```js
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `yaml` [#yaml]
**YAML loader.** Default for `.yaml` and `.yml`.
YAML files can be directly imported. Bun parses them with its native YAML parser.
```js
import config from "./config.yaml";
console.log(config);
// with an import attribute:
import data from "./data.txt" with { type: "yaml" };
```
During bundling, the parsed YAML is inlined into the bundle as a JavaScript object.
```js
var config = {
name: "my-app",
version: "1.0.0",
// ...other fields
};
```
If a `.yaml` or `.yml` file is passed as an entrypoint, it is converted to a `.js` module that `export default`s the parsed object.
Input
Output
```yaml
name: John Doe
age: 35
email: johndoe@example.com
```
```js
export default {
name: "John Doe",
age: 35,
email: "johndoe@example.com",
};
```
***
### `text` [#text]
**Text loader.** Default for `.txt`.
Text files can be directly imported. The file is read and returned as a string.
```js
import contents from "./file.txt";
console.log(contents); // => "Hello, world!"
// To import an html file as text
// The "type" attribute overrides the default loader.
import html from "./index.html" with { type: "text" };
```
When referenced during a build, the contents are inlined into the bundle as a string.
```js
var contents = `Hello, world!`;
console.log(contents);
```
If a `.txt` file is passed as an entrypoint, it is converted to a `.js` module that `export default`s the file contents.
Input
Output
```txt
Hello, world!
```
```js
export default "Hello, world!";
```
***
### `napi` [#napi]
**Native addon loader.** Default for `.node`.
In the runtime, native addons can be directly imported.
```js
import addon from "./addon.node";
console.log(addon);
```
In the bundler,
`.node`
files are handled with the
`file`
loader.
***
### `sqlite` [#sqlite]
**SQLite loader.** Requires `with { "type": "sqlite" }` import attribute.
In the runtime and bundler, SQLite databases can be directly imported. Bun loads the database with `bun:sqlite`.
```js
import db from "./my.db" with { type: "sqlite" };
```
The
`sqlite`
loader is only supported when the target is
`bun`
.
By default, the database file on disk is not bundled into the final output; it stays external to the bundle, so you can use a database loaded elsewhere.
You can change this behavior with the `"embed"` attribute:
```js
// embed the database into the bundle
import db from "./my.db" with { type: "sqlite", embed: "true" };
```
When using a standalone executable, the database is embedded into the single-file executable.
Otherwise, the database to embed is copied into the `outdir` with a hashed filename.
***
### `html` [#html]
**HTML loader.** Default for `.html`.
The `html` loader processes HTML files and bundles any referenced assets. It:
* Bundles and hashes referenced JavaScript files (`